Join Morten Rand-Hendriksen for an in-depth discussion in this video Putting it all together, part of Web Programming Foundations.
- [Instructor] To put all this together, you need two things, a code editor like Visual Studio Code, and a modern browser like Firefox, running at the same time, often side by side, and often with the browser developer tools open. As you develop your project, you work on the code in both applications, sometimes writing code in the code editor, other times either interacting with the live site in the browser, or manipulating and editing the code directly in the browser developer tools. The out-of-the-box way of doing this is to open up the editor to the project folder, and run the files natively from your computer in the browser.
However, this process has some significant limitations. On the surface, you have to manually reload the browser every time you make a change in the editor, and that can be really annoying. But more importantly, running an HTML document from your computer like this, directly in your browser, is not the same as running an HTML document from a web server. You miss a bunch of the web functionality, and many features will not work. To accurate replicate the web environment on your computer, you need to run a local web server.
These extensions add functionality to the code editors, to spin up a small, local server environment that syncs to the code editor and the browser. In Visual Studio Code, you can use the extension Live Server, which adds a button to the bottom of your editing environment that says Go Live, and when you click on that button, a web server is spun up, and your browser is synced to the current live environment that's also synced to the editor. This Live Server environment will now behave exactly as a live server somewhere else on the web, replicating the experience of publishing the site to the web.
But there's more. Now, anytime you make an edit to a file in the code editor, the server updates and the browser reloads the site on the fly. So if I go into my editor here and change this title, A Hotel on the Moon?!? that you see right here, and change it to Your Sanctuary in Space, and then save, the server updates and forces the browser to immediately reload, and you can see the effect of the code edit immediately in your browser.
Effectively, what we have here is true what you see is what you get editing, in the native environment of the browser. If you want to supercharge this process, you can also set up the command line tool Browsersync, which allows you to not only sync the code you write in an editor to a browser on your computer, but also access the same code from any other computer or device on your network, using their browsers. Effectively, this means writing code once and testing it everywhere on your entire network. This is especially useful when you do cross browser and cross device testing, and when you want to test responsive design and interaction.
What's cool about using Browsersync is, once you sync the website across a multitude of different devices, if you interact with one device, you can see those interactions take place across all the other devices as well, because you are effectively working on the same site across all devices at the same time. This makes for great cross browser user testing, and it makes for a better and more streamlined development process.
- From URL to website
- Structure of a web document
- Dual-purpose code
- Browsers and editors