{

How to change default port number for svelte and sveltekit example


This tutorial shows you how to change the default port number in the svelte and sveltekit application

How to change the default port in the svelte application?

The svelte application can be created using sveltejs/template.

sveltejs/template uses sirv cli tool. by default, the Svelte application runs with the npm run dev command and listens at 5000 port.

There are multiple ways we can change Here is an existing scripts created in package.json for the default port

{
  "name": "svelte-app",

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w ",
    "start": "sirv public --no-clear "
  }
}

add --port or -p option with new port value to run a server with the new port number

Changed from

    "start": "sirv public --no-clear "

to

    "start": "sirv public --no-clear  --port 8700"

Now, Running npm run dev command started and listens at 8700 and the application is accessible at http://localhost:8700

Another way,

You can also environment variables with PORT=9000

    "dev": "PORT=9000 rollup -c -w ",

This will not work in Windows but works in Unix and macOS

Change port number for sveltekit application

sveltekit is a full-stack application framework.

sveltekit applications are created with svelte cli.

It uses svelte-kit cli to start an application.

{
  "name": "sveltekitexample",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "test": "playwright test",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },

It uses the npm run dev command to start sveltekit applications and the default port listens at 3000.

You can add --port or -p option to use new port number.

    "dev": "svelte-kit dev --port 9000",

It starts application and is accessible at http://localhost:9000

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.