Reading: None!
In this lab, you will set up a basic Apache server for use in later labs.
Start by following the instructions in my web development notes for Windows or macOS (depending on your system). You only need to do the first part on setting up Apache. You can skip (for now) the sections on setting up PHP and a database server.
If you are a Linux user, you can install Apache using the package manager for your distribution. For example, on a Ubuntu system, use sudo apt install apache2.
Start the server in whatever way is appropriate for your system and put a simple index.html> file in the document root directory. Access that document via the server at localhost to verify that your server works.
For this course, I recommend one of two development tools: Visual Studio Code, or WebStorm. Feel free to experiment with both (or even other tools entirely).
For now, you can use your development tools to operate directly on the files that are being served by your Apache server (i.e., the htdocs folder). In a more realistic scenario you would have (at least) two distinct servers, one for development and one for deployment. You wouldn't normally edit files on the deployment server directly since that would risk breaking your website while people are trying to use it. Instead, you would use your development server while you work on your site, and then, once your site is fully tested, you would deploy it to the deployment server.
We may experiment with having separate development and deployment servers later.
Visual Studio Code is a free, open-source code editor that is available for Windows, macOS, and Linux. You can download it from here.
After installing Visual Studio Code, open the folder containing your web documents (typically htdocs in the case of an Apache server). Try making some simple edits to your index.html and then refresh your browser to see the changes.
Visual Studio Code puts project-specific settings in a .vscode folder in the project folder. You would normally want to inhibit the web server from serving those files, but we can ignore this issue for now.
TODO: Talk about which VSCode extensions would be useful to install.
WebStorm is a commercial product from JetBrains, so you will need a license before you can use it. Fortunately, you can get a student license for all of JetBrains's tools. Follow the instructions in my WebStorm document to do that. Note that it takes a day or so for JetBrains to process your application for a student license. The license is good for one year.
Start WebStorm from the JetBrains Toolbox app. Select "Open a Project" and specify the folder containing your website (htdocs). If this is the first time you've opened the folder, WebStorm will see the existing files and create a project from them. Try making some simple edits to your index.html> and then refresh your browser to see the changes.
WebStorm puts project-specific settings in a .idea folder in the project folder. You would normally want to inhibit the web server from serving those files, but we can ignore this issue for now.
There is no submission for this lab. The lab is worth 10 points.
Last Revised: 2024-08-24
© Copyright 2024 by Peter Chapin <peter.chapin@vermontstate.edu>