Skip to main content
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 sveltekit template.

​
Create a .gitpod.yml

Start by creating a .gitpod.yml file in the root of your project and add the following to it: 
tasks:
    - name: Install Dependencies and Start Dev Server
      init: npm install
      command: npm run dev

ports:
    - port: 5173
      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 5173. 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:
  • Set up 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): 
    - 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: 
    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

RepositoryDescriptionTry it
Sveltekit templateA SvelteKit templateOpen in Gitpod

​
VS Code 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.