Ted Vu

Spin up your first website on the internet in 5 minutes with Ngrok

January 22nd, 2022

I know the joyful experience having my own website on the internet, it's one of those enjoyable moments in the journey of learning web development. However, the effort required to spin up your first website on the internet and show it your friends especially for newbie is insurmountable. In this tutorial, I would like to walk through a step-by-step guide on how to spin up your first website ever on the internet in 5 minutes (yes, literally 5 minutes or even less!).

Prerequisite

  • Basic knowledge of JavaScript

  • Basic knowledge on Nodejs.

Step 1: Download ngrok

  • Remember to add your authtoken as you will need it to spin your server up.

Step 2: Create a directory called whatever you like, in that directory type in this command to set up a basic nodejs project.

npm init -y

Step 3: Create a server.js file in that directory and paste in this line of code.

const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => {  res.send("Hello World!");}); app.listen(port, () => {  console.log(`Example app listening on port ${port}`);});

Ngrok-1

This code will spin up a simple server listening on port 3000 for request on your local machine.

Type in the command line:

npm start

And navigate to http://localhost:3000, you should see a "Hello World!" message appears on the screen.

Step 4: Start ngrok program you just downloaded in step 1.

A command prompt will appear. From that command prompt type in this command

ngrok authtoken <token>

Where <token> is the token you obtain in step 1.

Step 5: Expose your forward traffic from your localhost to the internet.

From the command line of ngrok program, type in this command:

ngrok http 3000

The instruction will appear on the command prompt on how to access the url. Navigate to the url. For me, the prompt shows this:

ngrok-2

Voila ! You have successfully spinned up a website and can show it to your friends.

If you have any issue please feel free to reach out to me at tedvu184@gmail.com.

Created by Ted Vu, copyright 2024, proudly powered by GatsbyJS