SvelteKit Port: Changing Dev & Preview Server Ports SvelteKit Port: Changing Dev & Preview Server Ports
This video might be useful if you’re just getting going with SvelteKit and are stuck on
changing the default SvelteKit port. Here we are talking about the port SvelteKit runs on when you
fire up a
pnpm run dev. By default SvelteKit will run on port 3000
and if you already have another tool running on that port, the command will fail. We see how you
can update your SvelteKit config so the preview as well as dev server will run on a port you have
available on your device. We also 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.
Then run SvelteKit dev Server:
Build app as well as run SvelteKit preview server:
package.json build and preview scripts (change ports in highlighted
line to suit):
- Post on getting started with SvelteKit ,
- Twitter handle: @askRodney .
- Element chat: #Rodney matrix chat .
- By default SvelteKit runs on port 3000. That’s for both the dev and preview servers. You can change these, updating the dev and preview scripts in your project’s package.json file. First spin up a new project as normal. Then add ' --port 3001' on both the dev and preview script lines. Now when you execute 'pnpm run dev' or 'pnpm run preview', your SvelteKit app will be running on your chosen port.
- To install SvelteKit for a new project, in the Terminal run 'pnpm init [email protected] 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 run dev'. You can then see the new app in your browser.
- 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 run build' followed by 'pnpm run 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.
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 .
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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.