How to change default port number for svelte and sveltekit example

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 default port.

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 --portor -p option with a 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 the 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 the new port number.

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

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