DEV Community

loading...
Microsoft Azure

Step by Step Express: Evolution of an App Beyond "Hello, World"

bnb profile image Tierney Cyren ・1 min read

Over the past few weeks, I've been working on a project to show students at Princeton how to build and deploy a Node.js application.

My intent was to focus on the build part of it – for students and solo developers, deployment should be as invisible and painless as possible. As such, I build a tiny web app – step by step – that starts from the "hello, world" you've already seen a thousand times and builds it into something more functional.

Basically, it's the guide to building a real app (not just "hello, world") I wish I'd had when I started learning Node.js.

GitHub logo bnb / step-by-step-express

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Read more in the Step Two…

Each step in the project is its own Node.js application, with its own README.md that describes what changed from the previous step. Additionally, there's a step zero which is effectively "how to initialize a project" that often goes unsaid.

I'm thinking about building a long-form guide from this, with each step as an individual post, here on dev.to. If you'd be interested in this definitely comment or ping me on Twitter to let me know 🤗

Discussion (13)

pic
Editor guide
Collapse
hashimwarren profile image
Hashim Warren

Absolutely fantastic! Thanks for this.

Collapse
bnb profile image
Tierney Cyren Author

No problem – glad you like it!

Collapse
anduser96 profile image
Andrei Gatej

I'm interested as well! Thank you! :)

Collapse
jay97 profile image
Jamal Al

Definitely interested. Willing to help as well

Collapse
bnb profile image
Tierney Cyren Author

Yay! Glad to hear you're interested 💖

Collapse
nkwochidubem profile image
Nkwo Chidubem Ambrose

I'm interested in as well

Collapse
bnb profile image
Collapse
obyno profile image
obie

Interested as well.....

Collapse
bnb profile image
Tierney Cyren Author

Yay! Keep an eye out.

Collapse
sdcaulley profile image
sdcaulley

Just finding this? Did you write the series? If not, I think it would be a huge benefit for the community.

Collapse
paziz001 profile image
Philippos Aziz

Count me in too :)

Collapse
fatimatariq25 profile image
Fatima Tariq

Great article! very insightful and helpful.

Collapse
bnb profile image