vue.jscodespacesgithub-codespaces

VueJS port not accessible or crashing with GitHub Codespaces


In a blank repository, I've set up a new Codespace that I've opened in VSCode for the Desktop on Windows 11. Within that I've ran the following:

npm create vue@latest .
✔ Project name: ...
✔ Add TypeScript? … No / [Yes]
✔ Add JSX Support? … [No] / Yes
✔ Add Vue Router for Single Page Application development? … [No] / Yes
✔ Add Pinia for state management? … [No] / Yes
✔ Add Vitest for Unit testing? … No / [Yes]
✔ Add an End-to-End Testing Solution? … [No] / Cypress / Playwright
✔ Add ESLint for code quality? … No / [Yes]
✔ Add Prettier for code formatting? … No / [Yes]

And then ran the standard:

npm install
npm run format
npm run dev

It then successfully says that the project is accessible on port 5173, but if I attempt to open localhost:5173 in the browser nothing happens, it doesn't seem to be connected to the port within the Codespace despite the ports list showing it as Auto Forwarded

Further to this, attempting to set the port from private to public crashes the Codespace entirely. However, if I instead run npm run dev within VSCode for Web, it all works out fine - any ideas? I'd rather not use the web version because my muscle memory is hardwired to hit Ctrl + W to close the tab within VSCode which closes the Codespace entirely


Solution

  • If anyone else comes across this, I added the --host flag to my package.json:

    "dev": "vite --host",
    

    which solved the issue