React + Vite + GitHub Codespaces
Tags: react, codespaces, vite, devcontainer
Published: 2023-03-16 21:50:12

In this article, I will show you how to create a React application with [Vite](https://vitejs.dev/) and configure [dev container](https://code.visualstudio.com/docs/devcontainers/containers) to run it in [GitHub Codespaces](https://docs.github.com/en/codespaces/overview).


According to the official [site](https://docs.github.com/en/codespaces/overview):
> 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.

![Codespaces - pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrnugfxu5gnjr6ip44vf.png)


## 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
```bash
# 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:
```js
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](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extensions.

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

![Create dev container command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n9tbkei2ses2wyiby3i.png)

![Create dev container - select configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5276ammzyv76pkf3mio.png)

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. 

![Open in container notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9oc93seza94smdiq2ar.png)
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](https://code.visualstudio.com/docs/devcontainers/tutorial) and here:
[Developing inside a Container using Visual Studio Code Remote Development](https://code.visualstudio.com/docs/devcontainers/containers)


### 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.

```json
  "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

![Port attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j8o6di5nelw5n9ojve0.png)

### 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:
```json
"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:

![Open repository in codespaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwls1ey769yuop5hui0x.png)


![Running and application in codespaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crsdpznb4me6iu76jrd4.png)
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.

![Open in container notification - full view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj39snfqejsnijivk4ij.png)

Detailed instructions can be found here: [Get started with development Containers in Visual Studio Code](https://code.visualstudio.com/docs/devcontainers/tutorial) and here:
[Developing inside a Container using Visual Studio Code Remote Development](https://code.visualstudio.com/docs/devcontainers/containers)

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`

![Dev containers - clone repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnkby0gdgqvksx3niro1.png)

## Running CRA in Codespaces
To run a React application created with CRA (create-react-app) you need to change `start` command in `package.json`:
```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](https://github.com/kkoziarski/devc-react-app)