How to use a Development Server

Tutorial Hell meets Dependency Hell

Why do you need a development server?

They provide a runtime environment which is incredibly useful regardless of the size of your project and where you stand in your developer journey.

Before we start…

This is NOT a basic tutorial where we will install random dependencies you’ve never heard of! However, we will need a couple of things:

  • Node.js — a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  • Visual Studio Code — a lightweight but powerful source code editor.

1. Setting up your project

Once you’ve install both, we should be ready to start. For this guide, we’ll create a regular Vanilla.js project (only using HTML, CSS and JavaScript). Go ahead launch VS Code and open a terminal window by navigating to View > Terminal.

2. Cleaning your directory

  1. You can safely delete the favicon.svg file and also remove the line 5 from your index.html file which links the icon.
  2. From your index.html file you can change your project's title from <title>Vite App</title> to a name of your choosing <title>Test App</title>.
  3. From your main.js file delete the entire document.querySelector (lines 3 to 6) which is feeding the inner HTML into the html file.

3. Start working on your project

If everything went well, go ahead and write something in your html file, hit save, open a browser window and go to http://localhost:3000/. You should be greeted with the following:

Now what?

Go ahead and play with it. You will quickly learn why working with a Development Server is an industry standard. You only need to be working on your files and hitting cmd + s every time you want to see a change reflected on the server.

Using your Network to view on other devices

Using your network comes in handy when you want to check what your project looks like on other devices (i.e. Other OS or Mobile). This is easily configured with Vite making the following changes:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store