How do you change the SvelteKit Port?

By default SvelteKit dev server runs on port 5173, while the preview server runs on port 4173. You can change these, adding server server.port and preview.port (respectively) to your Vite config. That is in the `vite.config.js` file in the root folder of your project. If you are running in dev mode, there is no need to stop and start your server after changing this config. Vite runs Hot Module Replacement (HMR) in dev mode and the server will automatically restart on the new port. Don’t forget to change port in your browser though!

How do you install SvelteKit?

To install SvelteKit for a new project, in the Terminal run `pnpm create svelte@next my-sveltekit-app`. Then follow the on-screen prompts to configure your project. This sets up the Svelte side of your project. The on-screen instructions will tell you to run `pnpm install` from the new project directory. That last command will download and install all the packages needed to get your new SvelteKit project up and running. The final step is `pnpm dev`. You can then see the new app in your browser.

How do you build your SvelteKit locally?

It is a good idea to build your SvelteKit app periodically as you develop, just to make sure it looks and works as expected once built. You just need to stop the dev server (Crtl + C) and then run two commands. These are `pnpm build` followed by `pnpm preview`. The second step lets you see the site in your browser just like in dev mode. A big difference is that changes to the code now will not be reflected in the browser, so remember to switch back to the dev server if you need to tweak something. Preview mode is also good for checking SEO meta tags get injected as expected.

How do I make SvelteKit automatically exit if I try to start a project running on a port that is already in use?

By default if you try to start up a fresh SvelteKit project on a port that is already in use, Vite (which SvelteKit uses under the hood), will search for a free port and run there instead. The actual chosen port is output in the Terminal. This default behaviour is often fine. However, you might have something like Playwright configured to look for a SvelteKit instance on port `5173`. Alternatively, you might start changing code then be confused when you don’t see changes reflected in your browser as it points to another project which is actually running on port 5173. Either way Playwright is or, you are, potentially looking at he wrong project! With these, and similar, scenarios in mind, you can set SvelteKit automatically to stop if the default (or configured) port is already in use. Just edit your `vite.config.js` file in the project root directory. Here you need to set `server.strictPort` to true. Now if you try to start a project on the default port, and you already have a project running there, the server will stop. You can then choose how to remedy the situation yourself.

SvelteKit Port: Changing Dev & Preview Server Ports # SvelteKit Port: Changing Dev & Preview Server Ports #

SvelteKit Port: Changing Dev & Preview Server Ports #

Updated 5 months ago

4 minute read

Gunning Fog Index: 5.7

Content by Rodney

📚 SvelteKit Port #

This video might be useful if you’re just getting going with SvelteKit and are stuck on changing the default behaviour for SvelteKit ports. Here we are talking about the port SvelteKit runs on when you fire up a pnpm dev. By default SvelteKit will run on port 5173. If you already have another tool running on that port, the command will automatically find another, free port. In the video, we see how this might cause confusion and how you can change the default behaviour. We also see how you can update your SvelteKit config so the preview as well as dev server run on different ports which you might prefer. As well as all that, we see how to install SvelteKit for your new project.

If that’s what you wanted to know then hit play on the video! After that, don’t forget to scroll down. You will see a list of commands mentioned in the video. Drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 SvelteKit Port: Video #

Please enable JavaScript to watch the video 📼

SvelteKit Port

🗳 Poll #

How often do you switch to the preview server?

🖥 SvelteKit Port: Code #

SvelteKit Install:

    pnpm dlx sv create my-sveltekit-app && cd $_
pnpm install

Then run SvelteKit dev Server:

    pnpm dev

Build app as well as run SvelteKit preview server:

    pnpm build
pnpm preview

vite.config.js build and preview port config (change ports to suit):

vite.config.js

javascript

    1 import { sveltekit } from '@sveltejs/kit/vite';
2 
3 /** @type {import('vite').UserConfig} */
4 const config = {
5 	plugins: [sveltekit()],
6 	server: {
7 		port: 5173,
8 		strictPort: false,
9 	},
10 	preview: {
11 		port: 4173,
12 		strictPort: false,
13 	}
14 };
15 
16 export default config;

🔗 SvelteKit Port: Links #

Post on getting started with SvelteKit,
Tutorial on starting out with Svelte and SvelteKit ,
Video on VS Code explorer file nesting,
Twitter handle: @askRodney ,
Element chat: #Rodney matrix chat .

🏁 SvelteKit Port: Summary #

How do you change the SvelteKit Port? #: By default SvelteKit dev server runs on port 5173, while the preview server runs on port 4173. You can change these, adding server server.port and preview.port (respectively) to your Vite config. That is in the `vite.config.js` file in the root folder of your project. If you are running in dev mode, there is no need to stop and start your server after changing this config. Vite runs Hot Module Replacement (HMR) in dev mode and the server will automatically restart on the new port. Don’t forget to change port in your browser though!
How do you install SvelteKit? #: To install SvelteKit for a new project, in the Terminal run `pnpm create svelte@next my-sveltekit-app`. Then follow the on-screen prompts to configure your project. This sets up the Svelte side of your project. The on-screen instructions will tell you to run `pnpm install` from the new project directory. That last command will download and install all the packages needed to get your new SvelteKit project up and running. The final step is `pnpm dev`. You can then see the new app in your browser.
How do you build your SvelteKit locally? #: It is a good idea to build your SvelteKit app periodically as you develop, just to make sure it looks and works as expected once built. You just need to stop the dev server (Crtl + C) and then run two commands. These are `pnpm build` followed by `pnpm preview`. The second step lets you see the site in your browser just like in dev mode. A big difference is that changes to the code now will not be reflected in the browser, so remember to switch back to the dev server if you need to tweak something. Preview mode is also good for checking SEO meta tags get injected as expected.
How do I make SvelteKit automatically exit if I try to start a project running on a port that is already in use? #: By default if you try to start up a fresh SvelteKit project on a port that is already in use, Vite (which SvelteKit uses under the hood), will search for a free port and run there instead. The actual chosen port is output in the Terminal. This default behaviour is often fine. However, you might have something like Playwright configured to look for a SvelteKit instance on port `5173`. Alternatively, you might start changing code then be confused when you don’t see changes reflected in your browser as it points to another project which is actually running on port 5173. Either way Playwright is or, you are, potentially looking at he wrong project! With these, and similar, scenarios in mind, you can set SvelteKit automatically to stop if the default (or configured) port is already in use. Just edit your `vite.config.js` file in the project root directory. Here you need to set `server.strictPort` to true. Now if you try to start a project on the default port, and you already have a project running there, the server will stop. You can then choose how to remedy the situation yourself.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Here’s a new video on how you can change the ❤️ SvelteKit dev server and preview server ports.

Handy if you already have something running on port 3000.

Hope you find it useful!

#SvelteJS #SvelteKit #askRodney https://t.co/nGDOZ29ZDq
— Rodney (@askRodney) May 4, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.