Switch from Gitpod to GitHub Codespaces

canova · canova · commit 8322a34f3cf2 · 2025-11-05T12:30:28.000+01:00
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,31 @@
+{
+  "name": "Firefox Profiler",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "22"
+    }
+  },
+  "forwardPorts": [4242],
+  "portsAttributes": {
+    "4242": {
+      "label": "Firefox Profiler",
+      "onAutoForward": "openBrowser"
+    }
+  },
+  "postCreateCommand": "yarn install",
+  "postStartCommand": "FX_PROFILER_HOST=\"0.0.0.0\" yarn start",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "stylelint.vscode-stylelint"
+      ],
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      }
+    }
+  }
+}
diff --git a/.gitpod.yml b/.gitpod.yml
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -52,13 +52,11 @@ module.exports = function (config, serverConfig) {
 
 This project uses [TypeScript](https://www.typescriptlang.org/).
 
-## Using Gitpod
+## Using GitHub Codespaces
 
-Alternatively, you can also develop the Firefox Profiler online in a pre-configured development environment:
+Alternatively, you can also develop the Firefox Profiler online in a pre-configured development environment using [GitHub Codespaces](https://github.com/features/codespaces).
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/firefox-devtools/profiler)
-
-Gitpod will automatically install all dependencies; start the webpack server for you; and open the web app in a new browser tab. Please look at our [gitpod documentation](./docs-user/gitpod.md) for more information.
+GitHub Codespaces will automatically install all dependencies, start the webpack server for you, and forward port 4242 so you can access the web app. Please look at our [GitHub Codespaces documentation](./docs-developer/codespaces.md) for more information.
 
 ## Loading in profiles for development
 
diff --git a/README.md b/README.md
@@ -43,22 +43,20 @@ yarn start
 
 This project uses [TypeScript](https://www.typescriptlang.org/).
 
-You can also develop the Firefox Profiler online in a pre-configured development environment.
+You can also develop the Firefox Profiler online in a pre-configured development environment using [GitHub Codespaces](https://github.com/features/codespaces).
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/firefox-devtools/profiler)
-
-Please look at our [gitpod documentation](./docs-user/gitpod.md) for more information.
+Please look at our [GitHub Codespaces documentation](./docs-developer/codespaces.md) for more information.
 
 For more detailed information on getting started contributing. We have plenty of docs available to get you started.
 
-|                                                                |                                                                                                       |
-| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| [Contributing](./CONTRIBUTING.md)                              | Find out in detail how to get started and get your local development environment configured.          |
-| [Code of Conduct](./CODE_OF_CONDUCT.md)                        | We want to create an open and inclusive community, we have a few guidelines to help us out.           |
-| [Developer Documentation](./docs-developer)                    | Want to know how this whole thing works? Get started here.                                            |
-| [Source Files](./src)                                          | Dive into the inner workings of the code. Most folders have a `README.md` providing more information. |
-| [End-User Documentation](https://profiler.firefox.com/docs/#/) | These docs are customized for actual users of the profiler, not just folks contributing.              |
-| [Gitpod documentatation](./docs-user/gitpod.md)                | Start here if you want to set up a work space on gitpod.                                              |
+|                                                                   |                                                                                                       |
+| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Contributing](./CONTRIBUTING.md)                                 | Find out in detail how to get started and get your local development environment configured.          |
+| [Code of Conduct](./CODE_OF_CONDUCT.md)                           | We want to create an open and inclusive community, we have a few guidelines to help us out.           |
+| [Developer Documentation](./docs-developer)                       | Want to know how this whole thing works? Get started here.                                            |
+| [Source Files](./src)                                             | Dive into the inner workings of the code. Most folders have a `README.md` providing more information. |
+| [End-User Documentation](https://profiler.firefox.com/docs/#/)    | These docs are customized for actual users of the profiler, not just folks contributing.              |
+| [GitHub Codespaces documentation](./docs-developer/codespaces.md) | Start here if you want to set up a workspace on GitHub Codespaces.                                    |
 
 ### Discussion
 
diff --git a/docs-developer/codespaces.md b/docs-developer/codespaces.md
@@ -0,0 +1,64 @@
+# Setting up profiler on GitHub Codespaces
+
+Instead of configuring a local setup, you can also use [GitHub Codespaces](https://github.com/features/codespaces), a cloud-based development environment with minimal setup.
+
+## Getting Started
+
+You can create a new Codespace directly from the repository:
+
+1. Navigate to the [Firefox Profiler repository](https://github.com/firefox-devtools/profiler)
+2. Click the green `Code` button
+3. Click on the `Codespaces` tab
+4. Click `Create codespace on main` (or on your branch)
+
+GitHub will automatically:
+
+- Create a new development environment
+- Install all dependencies using `yarn install`
+- Start the development server on port 4242
+
+## Open the profiler UI in your web browser
+
+Once the Codespace is ready, GitHub will automatically forward port 4242. You'll see a notification that a service is available on this port.
+
+- Click `Open in Browser` to open the profiler UI in a new tab
+- Alternatively, you can access forwarded ports from the `PORTS` tab at the bottom of the VS Code interface
+
+## Load custom profiles
+
+If you want to load profiles for development, you can follow the steps described in [Loading in profiles for development](../CONTRIBUTING.md#loading-in-profiles-for-development) section.
+
+## Advanced usage
+
+### Opening a specific branch or pull request
+
+You can create a Codespace for any branch or pull request:
+
+1. Navigate to the branch or pull request you want to work on
+2. Click the `Code` button
+3. Select the `Codespaces` tab
+4. Click `Create codespace on [branch-name]`
+
+### Using the GitHub CLI
+
+You can also create and manage Codespaces using the [GitHub CLI](https://cli.github.com/):
+
+```bash
+# Create a new codespace
+gh codespace create --repo firefox-devtools/profiler
+
+# List your codespaces
+gh codespace list
+
+# Connect to a codespace
+gh codespace code
+```
+
+### Configuration
+
+The Codespace is configured using the `.devcontainer/devcontainer.json` file in the repository. This includes:
+
+- Node.js environment
+- Automatic port forwarding for port 4242
+- Pre-installed VS Code extensions (ESLint, Prettier, Stylelint)
+- Automatic dependency installation and server startup
diff --git a/docs-user/gitpod.md b/docs-user/gitpod.md
diff --git a/res/photon/server.js b/res/photon/server.js
@@ -6,7 +6,7 @@ const port = process.env.FX_PROFILER_PHOTON_PORT || 4243;
 const host = process.env.FX_PROFILER_PHOTON_HOST || 'localhost';
 
 const serverConfig = {
-  allowedHosts: ['localhost', '.gitpod.io'],
+  allowedHosts: ['localhost', '.app.github.dev'],
   host,
   port,
   static: false,
diff --git a/server.js b/server.js
@@ -29,7 +29,7 @@ config.cache = {
   type: 'filesystem',
 };
 const serverConfig = {
-  allowedHosts: ['localhost', '.gitpod.io'],
+  allowedHosts: ['localhost', '.app.github.dev'],
   host,
   port,
   // We disable hot reloading because this takes lot of CPU and memory in the
