- From Github repo, click on the Code button and then into the Codespaces tab.
- Under codespaces tab click into the 3 dots for extended functionality, and then click on Configure dev container
Add the portsAttributes definition for Vite port 5173, add a label, and force preview within the browser window.
{
"image": "mcr.microsoft.com/devcontainers/universal:2",
"features": {
},
"portsAttributes": {
"5173": {
"label": "Vite port",
"onAutoForward": "openPreview"
}
},
"forwardPorts": [5173]
}Save your changes.
- Once your .devcontainer is ready, go back to the Github repo (you'll now see the dev config) and click the Code button.
- Under codespaces tab click Create codespace on main button to launch an instance of VS code in a new tab.
Go to the Vite guide and get the latest build commands, also RTFM.
- Run
npm create vite@latestin your codespace terminal and then follow the prompts- For this demo we chose React with Javascript + SWC (stands for Speedy Web Compiler, a super-fast TypeScript / JavaScript compiler written in Rust.)
- This will take a few moments, but eventually you will see the vite-project folder in your left panel
- Once your project is built, add the following flag to your package.json dev script:
"dev": "vite --host" - Next,
cdinto your project and run it with withnpm run dev
Using Vite in codespaces you can quickly and easily set up a repo with a modern and lightweight build tool and use VS Code in the browser to edit and preview.
Special thanks to Morten Rand-Hendrickson (for generally being awesome) and also teaching me this.