How to use a Development Server

Why do you need a development server?

Long story, short. Development servers are used to quickly develop applications. They provide a runtime environment which is incredibly useful regardless of the size of your project and where you stand in your developer journey.

Although this over-simplified guide is meant for Beginners, ***Vite* (the frontend build tool showcased here) has an extensive list of features that can be found here. But quick question — are you learning how to code using HTML, CSS, JavaScript? If so, give this guide a try!

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.

Once the terminal opens, type the following commands replacing the placeholders with your own:

If everything went well, you should see in your terminal window the following result:

Open the project's folder cmd + O or by navigating to File > Open Folder... You directory should look as follows:

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:

Thanks for reading!

Get in touch:
Whatsapp
[e-mail]
Instagram