How to use a Development Server
Long story, short. Development servers are used to quickly develop applications.
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:
- Visual Studio Code — a lightweight but powerful source code editor.
1. Setting up your project
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
- You can safely delete the
favicon.svgfile and also remove the line 5 from your
index.htmlfile which links the icon.
- From your
index.htmlfile you can change your project's title from
<title>Vite App</title>to a name of your choosing
- From your
main.jsfile 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:
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: