React + Vite + GitHub Codespaces

In this article, I will show you how to create a React application with Vite and configure dev container to run it in GitHub Codespaces.

According to the official site:

A codespace is a development environment that's hosted in the cloud. You can customise your project for GitHub Codespaces by committing configuration files to your repository, which creates a repeatable codespace configuration for all users of your project.

Currently GitHub Codespaces are available for everyone and you get up to 60 hours per month for free, which should be enough for experiments and pet projects.

Building a React application with Vite.js

In this post, I'll be using React with Typescript, but the same would work for React with a raw javascript template.

1. Build the application - run one of these commands

# npm 6.x
npm create vite@latest devc-react-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest devc-react-app -- --template react-ts

# yarn
yarn create vite devc-react-app --template react-ts

2. Install & run

cd devc-react-app

npm install
npm run dev

Your application should run on a random port.

3. Change running port

Open vite.config.ts and change default export to this:

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

4. Installing extensions

You need to open the project directory in VS Code and install the Dev Containers extensions.

5. Create Dev Container

Once installed, run the Create Dev Container... command and select the universal template

VS Code will add the dev container configuration file to your project: .devcontainer/devcontainer.json.

Once the file is added, you may be prompted by VS Code to open the folder in a dev container.

Let's skip this for now and focus on configuring the dev container first.

Detailed instructions can be found here: Get started with development Containers in Visual Studio Code and here:
Developing inside a Container using Visual Studio Code Remote Development

6. Configuring the dev container

Now, open .devcontainer/devcontainer.json and configure a few things:

• forwardPorts - the same as in step 3
• portAttributes - this is optional, but allows you to assign a name to the port
• updateContentCommand - install dependencies when container is created
• postAttachCommand - run application when container is ready

You can also configure a file to open automatically in codespaces customizations.codespaces.openFiles or VS Code extensions to be installed in codespaces and dev container customizations.vscode.extensions.

There are many more configuration options, but I will not focus on them here.

  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": {
      "label": "React App",
      "onAutoForward": "openPreview"
    }
  },
  "updateContentCommand": "npm install",
  "postAttachCommand": "npm run dev",

  // Configure tool-specific properties.
  "customizations": {
    "codespaces": {
      "openFiles": ["src/App.tsx"]
    },
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
      ]
    },
//...

Port attributes

7. Configure start command

By default, Vite doesn't work in codespaces - even though the application is running, you can't see any page content in a browser.

To fix this, you need to modify package.json and change the scripts.dev by adding the --host parameter:

"scripts": {
  "dev": "vite --host"
}

This is the trick I couldn't find anywhere and spent a lot of time looking for.

Remainder: this is the command that the dev container runs as "postAttachCommand": "npm run dev" on startup.

8. Push to GitHub

Now you can push the repository to GitHub and open it in Codespaces:

You will see the green text 'codespaces' in the bottom left corner of your browser.

Extras

Open in local Dev Container

To open a project in a local dev container, you need to:

1. Have Docker installed and running
2. Open the project folder in VS Code, then you will be asked if you want to open it in the dev container. You can open it or clone to the dev container
   • Reopen in dev container - files stay where they are and you work on them directly from the linked Docker volume
   • Clone in volume - preferred for Windows users with WSL2. It clones a copy of the project into a Docker container and volume. This option is much faster on Windows.

Detailed instructions can be found here: Get started with development Containers in Visual Studio Code and here:
Developing inside a Container using Visual Studio Code Remote Development

If you don't have your repository locally and want to clone it directly from GitHub into a local dev container, you can do this from within VS Code:
> Dev containers: Clone repository in Container Volume

Running CRA in Codespaces

To run a React application created with CRA (create-react-app) you need to change start command in package.json:

  "scripts": {
    "start": "BROWSER=none WDS_SOCKET_PORT=0 react-scripts start"
    //...
  },

This is needed to fix the hot reload after each change.

You can find the GitHub repository for this article here