DEV Community

Cover image for npm start...the server is up&running!
Techelopment
Techelopment

Posted on β€’ Edited on

2

npm start...the server is up&running!

With 'npm start' you can quickly and easily create and run a local web server!

This tutorial is intended to guide you through the use of the npm start command, showing you how to set up a Node.js project and actually run web applications. We will start by installing Node.js and npm, then move on to creating a project and configuring your web server startup script.

Having a local web server is particularly useful for testing web applications locally before releasing them to the official environment, thus ensuring that they work correctly and without errors.

πŸ”— Do you like Techelopment? Check out the site for all the details!

1. Introduction to Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript code outside of the browser. It is especially used for developing server-side applications.

*npm *(Node Package Manager) is the Node.js package manager, used to install and manage libraries and dependencies of JavaScript projects.

To use npm, you need to have Node.js installed, as npm is automatically included with Node.js. Additionally, many packages available on npm are designed to run in a Node.js environment, making its presence essential for the correct functioning of applications.

2. Install Node.js and npm

To use npm start, you need to have Node.js installed, which automatically includes npm.
Installation steps:

  • Download Node.js: Visit the official Node.js website and download the latest stable version for your operating system.
  • Install Node.js: Follow the instructions in the installation wizard.
  • Verify installation: Open a terminal and type:
node -v

npm -v
Enter fullscreen mode Exit fullscreen mode

These commands will return the installed version of Node.js and npm.

3. Creating a Node.js project

To run npm start, you need to have a Node.js project with a startup script configured.
Steps to create a new project:

  • Create a project folder:
mkdir my-project

cd my-project
Enter fullscreen mode Exit fullscreen mode
  • Initialize a Node.js project:
npm init -y
Enter fullscreen mode Exit fullscreen mode

This command generates a package.json file with basic settings.

4. Start script setup

To start a local server and serve an index.html file, you need to install a package that handles the HTTP server, such as http-server.
Installing http-server:

npm install --save-dev http-server 
Enter fullscreen mode Exit fullscreen mode

Now, in the package.json file, edit the scripts section:

{
   "name": "my-project",
   "version": "1.0.0",
   "scripts": {
      "start": "http-server -p 8080"
   },
   "devDependencies": {
      "http-server": "^14.1.1"
   }
}
Enter fullscreen mode Exit fullscreen mode

This will allow you to start a local server by running npm start.

5. Creating index.html file

Now let's create a simple index.html file to test the server:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Local Server</title>
  </head>
  <body>
    <h1>Welcome! This is a local server :)</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

6. Run npm start

To start the server and view the web application, open a terminal and make sure you are in the folder where the index.html file is located. Then, run:

npm start
Enter fullscreen mode Exit fullscreen mode

The local server will start on port 8080. To access the web application, open a browser and type:

http://localhost:8080/

If you want to change the port, you can change it in the start script in the package.json file, for example:

"start": "http-server -p 3000"
Enter fullscreen mode Exit fullscreen mode

to run the server on port 3000.

npm start...the server is up&running πŸ˜πŸ˜πŸ˜

You have now successfully configured a Node.js project to serve a web application locally using npm start with http-server. This approach is especially useful for testing your project before deploying it to a production environment.


Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
bankai2054 profile image
anas barkallah β€’

thank you

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free