7thstring/cs50-expresstemplate

CS50xMiami Express Template

Table of Contents

• 1 Prerequisites
  • 1.1 Node.js and NPM packages
  • 1.2 Git
• 2 Setup
  • 2.1 Server Setup
  • 2.2 Git Setup
• 3 Express Server Anatomy
  • 3.1 View
    • 3.1.1 Public
    • 3.1.2 Views
  • 3.2 Controller
    • 3.2.1 App.js
    • 3.2.2 Routes
• 4 NPM
• 5 Authors
• 6 License
• 7 Acknowledgments

Prerequisites

You'll have to run through the prerequisites if you wish to follow along

Node.js and NPM packages

First, you'll need the latest LTS Node.js release installed in order to install these prerequisites.

$ npm install -g express-generator
$ npm install -g nodemon

Git

• Create a new git repository ("example.com")

Setup

Setup

Server Setup

• cd into your project (should be obvious by now ;))
  • $ cd example.com
  • $ pwd
• Rather than build an express server from a blank text file, we'll generate a very basic template using express-generator.
  • $ express --ejs
• Install node modules
  • ```$ npm isntall ``
• Start your server to see if it works
  • $ nodemon
• If nodemon doesn't spit out an error, check out localhost:3000 in your browser to double check everything is running fine

Git Setup

Before we can push our code to git, we need to create a ".gitignore" file inside the root of our git repo to prevent git from adding the following OS specific code, logs, etc.

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

Once the .gitignore file has been both created and committed to the repository, we can start committing the rest of our code without worry.

• First commit .gitignore
  • $ git add .gitignore
  • $ git commit -m "created .gitignore to filter unwanted nodejs files"
• Then commit the rest of your code
  • $ git add *
  • $ git commit -m "Express server templated generated"
• Push your commits to GitHub!
  • $ git push

Express Server Anatomy

The Express.js server we generated follows MVC structure. I'll cover setting up a basic view and transition into creating templates with the controller.

Directory structure:

example.com/
├── app.js
├── bin/
│   └── www
├── node_modules/
│   └── (╯°□°)╯︵ ┻━┻
├── package.json
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
│       └── style.css
├── routes/
│   ├── index.js
│   └── users.js
└── views/
    ├── error.ejs
    └── index.ejs

View

View

Public

Public

Views

Views

Controller

Controller

App.js

App.js

Routes

Routes

NPM

NPM

Authors

• Dylan Tackoor - CS50xMiami Teaching Fellow

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Express.js
• EJS
• Nodemon