All Projects → bnb → step-by-step-express

bnb / step-by-step-express

Licence: MIT license
Step-by-step evolution of a lightweight Express web app that will serve XKCD comics

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Dockerfile
14818 projects
CSS
56736 projects

Step by Step Express

The intent of this project is to take you step-by-step through the process of building an Express app, documenting the changes as bite-sized chunks that you'll ideally be able to pick up and iterate upon rapidly.

Step Zero

  • Initalize the repo with the universal documents that we should have in every project

Read more in the Step Zero README.md

Step One

  • Set up a very basic HTTP server + add the dependencies

To run the Step One code:

# make sure your current working directory is the main directory of this repo
cd step-one
node app.js

Read more in the Step One README.md

Step Two

  • Set up a very basic HTTP server + add the dependencies

To run the Step Two code:

# make sure your current working directory is the main directory of this repo
cd step-two
node app.js

Read more in the Step Two README.md

Step Three

  • Start parsing the querystring passed to the web app and – if the querystring id is present – passing that value to the API we're hitting, via the request module.

To run the Step Three code:

# make sure your current working directory is the main directory of this repo
cd step-three
node app.js

Read more in the Step Three README.md

Step Four

  • Add view rendering with handlebars (via express-handlebars)
  • Create our first view
  • Start rendering comics with handlebars on the /comic path

To run the Step Four code:

# make sure your current working directory is the main directory of this repo
cd step-four
node app.js

Read more in the Step Four README.md

Step Five

  • Call Express's static method to serve CSS
  • Create the /static directory + add our CSS file to it

To run the Step Five code:

# make sure your current working directory is the main directory of this repo
cd step-five
node app.js

Read more in the Step Five README.md

Step Six

  • Add Added error handling
  • Add port detection (process.env.PORT) that allows us to ship it to Auzre
  • Add favicon.ico to make browsers happy

To run the Step Six code:

# make sure your current working directory is the main directory of this repo
cd step-six
node app.js

Read more in the Step Six README.md

Step Seven

  • Dockerized
    • Add Dockerfile
    • Add .dockerignore
  • Add host variable to detect if HOST environment variable is defined, defaulting to 0.0.0.0 if not.
    • Express now listens to the host as its host
  • Add start npm script, which can be called with npm start

To run the Step Seven code:

# make sure your current working directory is the main directory of this repo
cd step-seven
node app.js

Read more in the Step Seven README.md

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].