Set up local CodeSandbox development environment
This guide walks through setting up a local CodeSandbox repository and integrating it with a local GitLab instance. CodeSandbox is used to power the Web IDE's Live Preview feature. Having a local CodeSandbox setup is useful for debugging upstream issues or creating upstream contributions like this one.
Before using CodeSandbox with your local GitLab instance, you must:
Enable HTTPS on your GDK. CodeSandbox uses Service Workers that require
https. Follow the GDK NGINX configuration instructions to enable HTTPS for GDK.
codesandbox-clientproject locally. If you plan on contributing upstream, you might want to fork and clone first.
Optional. Use correct
yarnmay fail to install or build some packages. If you're using
asdfyou can run the following commands:
asdf local nodejs 10.14.2 asdf local python 2.7.18
Run the following commands in the
# This might be necessary for the `prepublishOnly` job that is run later yarn global add lerna # Install packages yarn
You can run
yarn build:cleanto clean up the build assets.
Use local GitLab instance with local CodeSandbox
GitLab integrates with two parts of CodeSandbox:
- An npm package called
codesandbox-clientproject). This exposes an entrypoint for us to kick off Codesandbox's bundler.
- A server that houses CodeSandbox assets for bundling and previewing. This is hosted on a separate server for security.
Each time you want to run GitLab and CodeSandbox together, you need to perform the steps in the following sections.
smooshpack for GitLab
GitLab usually satisfies its
smooshpack dependency with a remote module, but we want
to use a locally-built module. To build and use a local
codesandbox-clientproject directory, run:
cd standalone-packages/sandpack yarn link # (Optional) you might want to start a development build yarn run start
Now, in the GitLab project, you can run
yarn link "smooshpack".
smooshpackon disk as opposed to the one hosted remotely.
gitlabproject directory, run:
# Remove and reinstall node_modules just to be safe rm -rf node_modules yarn install # Use the "smooshpack" package on disk yarn link "smooshpack"
Fix possible GDK webpack problem
webpack in GDK can fail to find packages inside a linked package. This step can help
webpack breaking with messages saying that it can't resolve packages from
codesandbox-client project directory, run:
cd standalone-packages mkdir node_modules ln -s $PATH_TO_LOCAL_GITLAB/node_modules/core-js ./node_modules/core-js
Start building CodeSandbox app assets
codesandbox-client project directory:
cd packages/app yarn start:sandpack-sandbox
Create HTTPS proxy for CodeSandbox
Because we need
https, we need to create a proxy to the webpack server. We can use
http-server, which can do this proxying
out of the box:
npx http-server --proxy http://localhost:3000 -S -C $PATH_TO_CERT_PEM -K $PATH_TO_KEY_PEM -p 8044 -d false
bundler_url setting in GitLab
We need to update our
application_setting_implementation.rb to point to the server that hosts the
sandpack assets. For instance, if these assets are hosted by a server at
diff --git a/app/models/application_setting_implementation.rb b/app/models/application_setting_implementation.rb index 6eed627b502..1824669e881 100644 --- a/app/models/application_setting_implementation.rb +++ b/app/models/application_setting_implementation.rb @@ -391,7 +391,7 @@ def static_objects_external_storage_enabled? # This will eventually be configurable # https://gitlab.com/gitlab-org/gitlab/-/issues/208161 def web_ide_clientside_preview_bundler_url - 'https://sandbox-prod.gitlab-static.net' + 'https://sandpack.local:8044' end private
You can apply this patch by copying it to your clipboard and running
pbpaste | git apply.
You may want to restart the GitLab Rails server after making this change:
gdk restart rails-web