Web Development Setup
September 30, 2020
The primary thing that I do with my laptop is web development. There are a few other things that I use my laptop, or a full fledged computer for, like some light gaming, surfing, etc., but first and foremost is web development and learning. Most of the classes I take, and what I see the most in web development is MacOS, and some with Windows; however, I use Ubuntu. Setting Linux up with a great workflow for development is easier than a lot of people may think, and because of the Bash Shell, it is easier than one might think to follow along with a class where the instructor is using a Mac. There are some places where it is actually easier. Below will be a continually updated list of what I do to set up my web development environment.
Programs That I Install
Visual Studio Code
I use Visual Studio Code by Microsoft. Understandably, many that use Linux would look at this choice and wonder why I would use it over something like Sublime Text or Atom, given that it is made by Microsoft and contains some telemetry data being sent back to Microsoft. Let me explain. Visual Studio code is very easy to use, from installing extensions like Color Highlight. These are in an easy, searchable store that can be visually combed through. You can see snapshots of them and easily install with the click of a button.
There are three easy ways to install Visual Studio Code.
- On Ubuntu, you can just go to the Software Center and search for it. This will give you the Snapd version by default.
- Because I am using Ubuntu, I can also go to the website, and download the .deb package. Once you have the .deb package, navigate to the folder where it downloaded to and double click to install. (https://code.visualstudio.com/)
- Install through the command line
- sudo apt update
- sudo apt install software-properties-common apt-transport-https wget
- wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
- sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
- sudo apt update
- sudo apt install code
NodeJS and NPM
NodeJS, and subsequently NPM, opens up a lot of great command line tools that make web development easier, including SCSS/SASS and Live-Server. So many of the additional tools that I use stem from NodeJS.
NodeJS can be installed through a Snapd package in the Ubuntu Software Center, but this can make installing packages globally a little more challenging. So I prefer installing through the command line.
- curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
- sudo apt-get install -y nodejs
Once NodeJS is installed, I use npm to install Live Server. This allows me to navigate to my project folder, run the command, and have a live versions of the webpage open in my default browser. It will continuously watch for updates and apply them.
sudo npm install -g live-server
Once I have my project folder created, I navigate to the folder and create the package.json with an npm script. If using a NodeJS express server for the project, I need to ensure that the default .js file has been created as the entry point for express.
Then follow the prompts in the terminal. Once the package.json is created, it is time to install SASS/SCSS compiler. For this, I use the command:
npm install node-sass --save-dev
Next, if I am going to use an Express Server for the project, I install Express by using the script:.
npm install express --save
The following is a link to the ExpressJS documentation for getting started with using it in a project. http://expressjs.com/en/starter/installing.html. In order to have the express server look for updates to the .js file, I install nodemon. To so this, I use the script:
sudo npm install -g nodemon
Then, to use it, I just need to be in the project file where it the .js file is located, and run:
In my learning, I have begun using MongoDB for storing blog posts. Below are some of the steps needed to install and then use it. What I have found is that starting MongoDB is different from what is done in Windows and MacOS. I am including a link to the official MongoDB site for installation, but the way to start it, I have included the specific directions.
MongoDB Ubuntu Install
sudo systemctl start mongod