Giter Club home page Giter Club logo

step-by-step-express's Introduction

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

step-by-step-express's People

Contributors

bnb avatar enbrown avatar johnpapa avatar lethenju avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

step-by-step-express's Issues

Help users manipulate git by versioning the steps

I think it could be super cool to start from master, then create a first branch called step-1 perhaps, then another for step-2, etc.

So that users are forced to experience git commands they might never have used such as checkout or cherry-pick.

Indeed, another possibility would be to create a commit for each step, and then tell users to cherry-pick the next commit to advance.

Finally, it would make you rename your step-X folder into something closer to a real usecase. For instance src ๐Ÿ˜Š

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.