Let's take a quick break from the main Express tutorial to practice what we've already learned. At this point you should know enough to use Express to make some fun interactive web apps! We're going to create a super simple message board.
-
Use
express-generator
to set up a basic project using whichever templating language you prefer. If you prefer you can set it all up manually -- it doesn't really take that much longer. -
We are going to have 2 routes, the index (
"/"
) and a new-message form ("/new"
). The generator already created a router for our index so find that file and open it up. It can be found atroutes/index.js
. There is already an router.get for"/"
that should be rendering your index view, so lets add some messages to it. -
Create an array at the top of your index router called
messages
and put a couple of sample messages inside of it like this:const messages = [ { text: "Hi there!", user: "Amando", added: new Date() }, { text: "Hello World!", user: "Charles", added: new Date() } ];
-
Next, in your index template (in the
"views"
folder) loop through the messages array using which ever templating language you selected and for each one, display the user, text and the date the message was added. Don't forget to make your messages available to your template by including it in the res.render 'locals' object (e.g.res.render('index', { title: "Mini Messageboard", messages: messages })
. -
Next lets set up the new message form. In the router add an
router.get()
for the"/new"
route and point it to a template named"form"
. In the views directory create yourform
template. Add a heading, 2 inputs (one for the author's name and one for the message text) and a submit button. To make the form actually make a network request you will need to define it with both a method and an action like so:<form method="POST" action="/new"> put your inputs and buttons in here! </form>
-
With your form set up like this, when you click on the submit button it should send a POST request to the url specified by the action attribute, so go back to your index router and add an
router.post()
for"/new"
. -
To actually get and use the data from your form you should be able to access the contents of your form inside
router.post()
as an object calledreq.body
. The individual fields inside the body object are named according to thename
attribute on your inputs (the value of<input name="messageText">
will show up asreq.body.messageText
inside therouter.post
function). -
In your
router.post()
take the contents of the form submission and push them into the messages array as an object that looks something like this:messages.push({text: messageText, user: messageUser, added: new Date()});
-
At the end of the
router.post()
function useres.redirect('/')
to send users back to the index page after submitting a new message. -
At this point, you should be able to visit
/new
(it might be a good idea to add a link to that route on your index page), fill out the form, submit it and then see it show up on the index page! -
Now you're almost ready to deploy your application on Heroku, but before doing that you need to specify a couple of things, just to make life easier for your deployment. First, you need to specify the exact version of Node that you're using in your
package.json
file; if you don't remember the version number, just find it usingnode -v
. Then, add it to yourpackage.json
file, so that it will look similar to this:"engines": { "node": "10.x.y" },
-
Heroku usually requires a
Procfile
, which specifies all the commands that need to run on the startup. With node.js, this file isn't obligatory since Heroku searches in thepackage.json
file for a start script, which is already defined in your app, but it's still good practice to add it to your project. Create it in your root directory, and add this single line to it:web: node ./bin/www
-
You're finally ready to deploy to Heroku! You can first try it on local, using
heroku local web
This will run your app locally using Heroku at http://localhost:5000/. Test it, and if everything works fine, you can finally create it and push it to your Heroku repository with:
heroku create git push heroku master
To add your solution to the list below, edit this file. See the section on Contributing for more instructions.
Show Student Solutions
- Add your solution below this line!
- charliefinos's Solution
- benjamin-gambling's Solution - View in Browser
- azrilhafizi's Solution - View in Browser
- vonhoro's Solution - View in Browser
- Leo Holanda's Solution - View in Browser
- Andres Ruiz's Solution - View in Browser
- Angelo's Solution - View in Browser
- Morgan's Solution - View in Browser
- Kevin's Solution - View in Browser
- Randolph's Solution - View in Browser
- filipni's Solution - View in Browser
- sodip's Solution - View in Browser
- yldrmali's Solution - View in Browser
- Julio's Solution - View in Browser
- Katarzyna Kaswen-Wilk's Solution - View in Browser
- Braxton Lemmon's Solution - View in Browser
- Hammad Ahmed's Solution - View in Browser
- Igorashs's Solution - View in Browser
- autumnchris's Solution - View in Browser
- Obylisk's Solution - View in Browser
- Kris Tobiasson's Solution - View in Browser
- Zakariye Yusuf's Solution - View in Browser
- Henrique Sousa's Solution - View in Browser
- tracy2811's Solution - View in Browser
- Alain Suarez's Solution - View in Browser
- Slashflex's Solution - View in Browser
- Vollantre's Solution - View in Browser
- MikkRou's Solution - View in Browser
- Ryan Lewin's Solution - View in Browswer
- Eljoey's Solution - View in Browswer
- Vedat's Solution - View in Browser
- Henry Kirya's Solution - View in Browser
- djolesusername's Solution - View in Browser
- tbmreza's Solution - View in Browser
- Morgan's Solution - View in Browser
- JamCry's Solution - View in Browser
- Agnieszka's Solution - View in Browser
- Jake's Solution - View in Browser
- Andrécio's Solution - View in Browser
- Ifeanyichukwu's Solution - View in Browser
- Ryan Floyd's Solution - View in Browser
- Aron's Solution - View in Browser
- Siegmeister's Solution - View in Browser
- Christian's Solution - View in Browser
- 0xtaf's Solution - View in Browser
- Emil Dimitrov's Solution - View in Browser
- mmboyce's Solution - View in Browser
- Scott Bowles's Solution - View in Browser
- barrysweeney's Solution - View in Browser
- ranmaru22's Solution - View in Browser
- Joe Thompson's Solution - View in Browser
- Vorelli's Solution - View in Browser
- Tulio Vieira's Solution - View in Browser
- elijahjorell's Solution
- Nijepa's Solution - View in Browser
- KungFuPhil's Solution - View in Browser