Switch from Gitpod to GitHub Codespaces (#5653)

canova · web-flow · commit 5cd89edd552c · 2025-11-06T12:28:50.000+01:00
We had Gitpod support and documentation for easy online development. But GitHub now supports Codespaces which is easier to use. Also I've seen that Gitpod [is renamed](https://ona.com/stories/gitpod-is-now-ona) to Ona now with more AI focus. I think it's time to switch from Gitpod to GitHub Codespaces. Apart from the documentation, this PR adds a devcontainer config which is used by Codespaces. I tested it manually in VSCode and it works as expected. One minor annoying thing is that whenever you open up your vscode, it suggests devcontainers if that plugin is installed. But you can click on "don't show this again" to hide that popup on startup (Or remove the plugin? Not so sure if it comes preinstalled or if I installed it before, but my local vscode already had it).
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
 
@@ -68,7 +66,7 @@ Say hello on Matrix in the [_Firefox Profiler_ channel (_#profiler:mozilla.org_)
 
 [MPL v2](./LICENSE) is designed to encourage contributors to share modifications they make to the code, while still allowing them to combine the code with code under other licenses (open or proprietary) with minimal restrictions.
 
-We are very grateful to the the **zlib compression library (Jean-loup Gailly, Mark Adler and team)** for their contribution to the project.
+We are very grateful to the **zlib compression library (Jean-loup Gailly, Mark Adler and team)** for their contribution to the project.
 
 [matrix]: https://chat.mozilla.org/#/room/#profiler:mozilla.org
 
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
