How to use a Development Server
Tags: javascript, node, beginners
Published: 2021-12-11 20:00:00

## 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](https://github.com/vitejs/vite)** (the *frontend build tool* showcased here) has an extensive list of features that can be found [here](https://vitejs.dev/guide/features.html). 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](https://nodejs.org/en/) — a JavaScript runtime built on Chrome's V8 JavaScript engine.
- [Visual Studio Code](https://code.visualstudio.com/Download) — 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:

{% gist https://gist.github.com/ekqt/924455a71a8bca18ab07e22b43c15bda %}

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

{% gist https://gist.github.com/ekqt/279f64797e43db5bf0571431979803be %}

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

{% gist https://gist.github.com/ekqt/0176a4cb92dba00a025a160e1abb5fcf %}

## 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/](http://localhost:3000/). You should be greeted with the following:

![Untitled](https://miro.medium.com/max/562/1*3MJHi0ikI-E3_f3141xAKw.png)

## 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:

{% gist https://gist.github.com/ekqt/5ea0d28d3aaa9a1d7d94fa5dac948c0a %}

Thanks for reading!

Get in touch:
[Whatsapp](http://wa.me/420608984789)
[ekheinquarto@gmail.com](mailto:ekheinquarto@gmail.com)
[Instagram](https://www.instagram.com/ekheinquarto/)