Overview
Web development comes in many different forms and can mean many different things. This is a simple technical guide to beginning web development using some of the technologies of the currently popular "full stack": Node.js, Express, and MongoDB. Node.js provides a server-side JavaScript runtime environment; Express provides a web server built on Node.js; MongoDB provides document-based persistent data storage; finally, Git is used for version control.
This guide is designed for use on Ubuntu 18.04 (a Debian based Linux distribution), and utilizes HTML5 and JavaScript ECMAScript 6. This guide assumes the reader already has rudimentary knowledge of HTML, CSS, and JavaScript fundamentals. The following are resources that can be used to gain a solid background in those fundamentals:
- freeCodeCamp: a robust curriculum of lessons and projects covering all of the web development fundamentals
- W3Schools: a popular web site for learning web technologies online, including tutorials and references
- MDN JavaScript Reference: a repository of facts about the JavaScript language, including documentation of all features
- CSS-Tricks: tips, tricks, and techniques on using Cascading Style Sheets
- CodePen: an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets
- repl.it: a powerful and simple online compiler, IDE, and interpreter for 30+ languages, including JavaScript
- Cloudinary: a cloud-based image and video CDN (content delivery network) with free hosting
- Glitch: a collaborative code editor and hosting site for "full stack" web apps
- mLab: a fully managed cloud database service that hosts MongoDB databases
Git
Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. Git can help you determine exactly what files changed, who changed them, and why. It can be used for coordinating work among multiple people on a project, and for tracking progress over time by saving “checkpoints”. Git isn’t the only version control system out there, but it’s by far the most popular. Git projects can be hosted on many websites, including GitHub.com.
Git Installation
- Install Git:
$ sudo apt-get install git-core - Verify installation:
$ git --version - Configure Git:
$ git config --global user.name "[yourusername]"
$ git config --global user.email "[youremailaddress]"
$ git config --global color.ui auto - Create a new repository in Git in new folder [project-name]:
$ git init [project-name]
$ cd [project-name] - Create a new repository on GitHub: Log in to GitHub.com and go to the GitHub home page. Click on green '+ New repository' button, providing name and brief description
- Push your first commit with a new readme file:
$ echo "# first readme commit" >> README.md
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin https://github.com/[username]/[project-name].git
$ git push -u origin master
Git Usage
- List all new or modified files to be committed:
$ git status - Show file differences not yet staged:
$ git diff - To snapshot a file in preparation for versioning:
$ git add [file] - Unstage file, but preserve its contents:
$ git reset [file] - Record file snapshots permanently in version history:
$ git commit -m "[descriptive message]" - Group Changes:
- List all local branches in current repository:
$ git branch - Create a new branch:
$ git branch [branch-name] - Switch to specified branch and update working directory:
$ git checkout [branch-name] - Combine specified branch's history into the current branch:
$ git merge [branch] - Delete the specified branch:
$ git branch -d [branch-name]
- List all local branches in current repository:
- Synchronize Changes:
- Download all history from the repository bookmark:
$ git fetch [bookmark] - Combine bookmark's branch into current local branch:
$ git merge [bookmark]/[branch] - Upload all local branch commits to GitHub:
$ git push [alias] [branch] - Download bookmark history and incorporates changes:
$ git pull
- Download all history from the repository bookmark:
- For more tips on Git usage, download a cheat-sheet
Node.js
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side. Previously, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage's HTML and run client-side by a JavaScript engine in the user's web browser. Node.js lets developers run scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web application development around a single programming language, rather than different languages for server side and client side scripts. This guide deals with Node.js 4.x (version 9.11.1).
Node.js Installation
- Add NodeSource repository, install Node.js:
$ curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
$ sudo apt-get install -y nodejs - Verify installation and check version:
$ which node
$ node --version - Install build tools to compile and install native addons:
$ sudo apt-get install -y build-essential - Verify installation:
$ which npm
$ npm --version
Node.js Usage
- Create package.json to initialize Node.js package:
$ npm init - Start Node.js VM:
$ node [project-main].js
Express
Express is a web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. This guide deals with Express version 4.16.3.
Express Installation
- Install Express locally and save as a dependency in package.json:
$ npm install express --save
Express Usage
- Include Express in project files:
# const express = require('express') - Create an instance of Express to use:
# const app = express() - Define behavior for routes:
# app.get('/', (request, response) => {
# // behavior for default route
# }) - Start server listening on [port-number]:
# app.listen([port-number], function() {
# console.log('Server listening on [port-number]')
# })
MongoDB
MongoDB is a free and open-source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemas.
MongoDB Installation
- Import public key for Official MongoDB Package:
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5 - Add Official MongoDB Package repository to Ubuntu:
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list - Install the MongoDB packages:
$ sudo apt-get update
$ sudo apt-get install -y mongodb-org - Install the MongoDB module locally and save as a dependency in package.json:
$ npm install mongodb --save
MongoDB Usage
- Include MongoDB in project files:
# const mongodb = require('mongodb') - Create a client instance of MongoDB to use:
# const mongoClient = mongodb.MongoClient - Connect to the client:
# mongoClient.connect(mongoUri, (err, client) => {
# // access the database
# let db = client.db('[database-name]')
# }) - Add item to collection:
# db.collection('[collection-name]').find({[search-fields]}).toArray( (err, res) => {
# // error handling and callbacks on data in res
# }) - Search collection:
# db.collection('[collection-name]').insertOne(item, (err, res) => {
# // error handling and callbacks on data in res
# }) - Close connection:
# client.close()