In the good old days doing web development was a lot simpler. We just open a HTML file from the local filesystem in our browser and the referenced CSS and JavaScript files where loaded as well. We could focus on getting our web site right without the need for a local server or any other infrastructure.
Since then our applications got more functionality and they do a lot more work in JavaScript. Combine that with Ajax calls and everything gets more complicated, especially since around 2018, when the web browsers had to protect us from cross-site scripting attacks. If you now open an HTML page that uses JavaScript and loads data from your disk, your browser will show you something like this error in the console:
d3-fetch.min.js:2 Fetch API cannot load file:///C:/_Projects/d3/data/movies.csv. URL scheme must be “http” or “https” for CORS request.
u @ d3-fetch.min.js:2
d3-fetch.min.js:2 Uncaught (in promise) TypeError: Failed to fetch
at u (d3-fetch.min.js:2)
at Object.csv (d3-fetch.min.js:2)
at app.js:67
You can find out more about Cross-Origin Resource Sharing (CORS) at the MDN. What prevents your data from being stolen by criminals also prevents your development efforts on your local machine.
While you can install a full web server on your machine, a faster way is to install live-server (a Node.js package):
|
1 |
$ npm install -g live-server |
You can now open the directory that contains your application files and run this command:
|
1 |
$ live-server |
Your browser should open a new window for http://127.0.0.1:8080/ and run your application. If the browser does not open, you can type in the URL yourself. Your application runs now in a minimalistic web server that supports auto-reloading as soon as the server detects a changed file. This means you start live-server once and it updates your site automatically when you change it – no restart or deployment of any kind is required.
The basic settings work for me without any modification. Should this not be enough for your use-case, you can customize live-server and change the many configuration options to better fit your needs.