Svelte in Gitpod

To work with Svelte in Gitpod, you will need to properly configure your repository. Here is how to do that, assuming that you’re using the official sveltejs template which uses Rollup:

Create a .gitpod.yml

Start by creating a .gitpod.yml file in the root of your project and add the following to it:

language:

yml

tasks:
  - init: npm install
    command: npm run dev

ports:
  - port: 5000
    onOpen: open-preview
  - port: 35729
    onOpen: ignore

After committing and pushing this file to your repository, start a new Gitpod workspace. You’ll see that Gitpod will automatically install the dependencies; start the dev server; and open a preview on the side for port 5000.

Sveltejs Template in Gitpod

Making Live Reload work

In order to make live reload work we need to add a bit of configuration as specified below:

Setup an environment variable called CLIENT_URL in the .gitpod.yml config file as shown below please make sure that you set it up before the task which starts the dev server(which is npm run dev in this case):
language:
bash
```
- init: npm install
    command: |
      export CLIENT_URL="$(gp url 35729)/livereload.js?snipver=1&port=443"
      npm run dev
```
Pass the value of CLIENT_URL environment variable to the rollup-plugin-livereload in rollup-config.js inside of the plugins array as shown:
language:
js
```
plugins: [
  !production &&
    livereload({
      watch: "public",
      clientUrl: process.env.CLIENT_URL,
    }),
];
```
This will set CLIENT_URL to the workspace url of port 35729 (default port for livereload in Gitpod).

Example Projects

Repository	Description	Try it
SvelteJS template	A project template for Svelte apps

VSCode Extensions

Svelte for VS Code

Svelte for VS Code Provides syntax highlighting and rich IntelliSense for Svelte components in VS Code, utilising the svelte language server.

To add this extension to your repository, simply head to Gitpod’s Extensions panel (find it in the IDE’s left vertical menu), then search for the desired extension by name, and install it for your project. This will add an entry to your .gitpod.yml file that ensures all future Gitpod workspaces for your repository will already have this extension pre-installed.