How To Change The Default Port 5000 in Svelte?

In Svelte, the application is by default rendered on port 5000 when using the development server. However, you might want to change this port to avoid conflicts with other applications or to fit specific requirements.

It can be done through different approaches, such as updating the package.json file or using environment variables to specify a new port number.

Steps to Create a Svelte Application

Step 1: Install Node.js

Make sure Node.js is installed on your machine. You can download it from nodejs.org.

Step 2: Install Svelte

Open your terminal and run the following command to set up a new Svelte project:

npx degit sveltejs/template svelte-app

Step 3: Navigate to Your Project Directory

Change to the newly created project directory:

cd svelte-app

Step 4: Install Dependencies

Install the required npm packages:

npm install

Project Structure

Dependencies

"devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
  },
"dependencies": {
    "sirv-cli": "^2.0.0"
  }

Approach 1: Updating package.json File

In this approach, we are using the sirv CLI tool to serve the static files and specify the desired port directly in the package.json file. By updating the "start" script with the --port flag followed by the desired port number (e.g., 3000), we override the default port and set the server to listen on the new port.

Syntax:

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

Update the “scripts” section in package.json to specify the desired port:

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear --port 3000"  // Changed port number to 3000
}

Example: The below example is displayed on the port number which is updated in package.json file.

<!--App.svelte-->

<script>
  // Function to extract the port number from the URL
    function getPortFromUrl() {
        const url = new URL(window.location.href);
        return url.port || 'Port not specified';
  }

  // Extract the port number on component mount
    let portNumber = getPortFromUrl();
</script>

<style>
  h1 {
      color: green;
  }
  h3 {
      color: #555; 
  }
</style>

<main>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Updating package.json File</h3>
    <p>The port number extracted from the URL is: {portNumber}</p>
</main>

Output

Approach 2: Using Environment Variables

In this approach, we are using environment variables to set the port number dynamically. By modifying the "start" script in package.json to use the $PORT environment variable, and then setting the PORT variable in the command line or terminal (e.g., $env:PORT=5005), we can control the port on which the server listens.

Syntax

"start": "sirv public --no-clear --port $PORT" 

Set the Environment Variable

$env:PORT=5005

Start the Application

npm run dev

Example: The below example is displayed on the port number which is specified using environment variable.

<!--App.svelte-->

<script>
  // Function to extract the port number from the URL
  function getPortFromUrl() {
      const url = new URL(window.location.href);
      return url.port || 'Port not specified';
  }

  // Extract the port number on component mount
    let portNumber = getPortFromUrl();
</script>

<style>
  h1 {
      color: green;
  }
  h3 {
      color: #555; 
  }
</style>

<main>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 2: Using Environment Variables</h3>
    <p>The port number extracted from the URL is: {portNumber}</p>
</main>

Output