Developing a Basic JavaScript/HTML/CSS Site
Today, I just wanted to write a little bit about a tool that I recently began using as I have become more interested in CSS, and from that interest I’ve started to gravitate towards projects that simply rely on JavaScript, HTML, and CSS without using big frameworks such as React.
One of the nice things about frameworks like React or Ruby on Rails is that there is a terminal command to start up the application — “npm start” and “rails server” respectively. These are useful because they allow the user to make changes to the code and the display on the page will automatically update, but also by having the application actually running, as it would once deployed, you are able to make fetch requests, which with a basic JS/HTML/CSS application has presented issues for me in the past.
Typically, when I would be working on my application I would copy the file path to whichever .html file I was working on, and then paste it into the browser which actually works fairly well. However, it does not have those two benefits that I mentioned in the above paragraph, so this method surely has its limitations. In a previous post, I wrote about how I took a basic HTML/CSS/JS application and converted into an Express.js app in order to deploy it, and that method would also allow me to have the command “node app.js” to run the application while developing, but is that always necessary?
In order to actually deploy the application, you can’t just send off three files — index.html, script.js, and main.css and expect it to work — you will need to figure something out, and I personally suggest transitioning it to an Express.js application, but this would not be needed during development (or if there are no plans to deploy). I recently found an npm package titled “live-server” which takes care of everything. Once I’ve installed the package, I simply make sure that I am in the correct directory, and run the command “live-server” and the application immediately begins to “run”. This isn’t exactly some totally unknown tool, as it does have over 200,000 weekly downloads, but it’s something new to me, and I plan to continue to utilize it.
There is also one other option that could take the place of live server, and that would be if you have Python installed you could also run the command “python -m SimpleHTTPServer”. I’ve used this in the past, but there are two reasons that I prefer live server at this point. First, I do not believe that the Python server does live reloads if you change the code, and more importantly, I don’t have Python installed on my machine, and since I don’t have a whole lot of space on my Chromebook, I’d rather not install anything that I’ll only get limited use out of, although like I imagine most people, I’d certainly love to get a little more in-depth knowledge about Python programming!
