BETAThis is a new service – your feedback will help us to improve it.

  1. DDaT Codelabs
  2. Web servers
  3. Build your app in Express

Build your app in Express

It's time to revisit the Codepen prototypes we created in an earlier module, and turn them into a real, functioning Express app.

Based on what you've learned, you might want to change your app's design to fit better with the way Express and nunjucks work.

Writing routes

Remind yourself how many views your app needs. This is probably the equal to the number of prototypes you made in Codepen.

You will need to add a route in server.js for each of these views.

The general code for a route is:

server.get('', function(req, res){
  res.render('')
})

To avoid confusion, we recommend making the URL the same as the name of the view template file. For example, /about should lead to a file called about.njk.

Build views

Once you've checked how many views your app needs, create an empty .njk view template file for each one, in the /views folder.

Take the HTML code from each of your Codepen prototypes and copy it into the relevant view template file.

Templating language

Try passing some data into your views and displaying it using nunjucks tags.

You could start with something simple, like your app's name or a welcome message.

Includes

Consider which parts of your prototypes will be reused across multiple views, and make these includes.

If you have the same code in more than one place in your view code, this can probably be replaced with an include.

Never repeat code unnecessarily.

CSS

In Codepen, each of your prototypes had a seperate CSS window.

We're now going to combine all of these into a single .css file, and link to it from every view.

This is helpful because:

  • We can edit the way all our views appear in the same place
  • We use less duplicate code

In the /static folder, create a new file called style.css. Copy the CSS you've written across all your prototypes into this file. Delete any obvious duplicate code.

Javascript

We need to do the same for our Javascript.

Again, create a file called client.js in the /static folder. Call it this to avoid confusion between the browser Javascript written here, and the server code written in server.js.

Combine all the Javascript code you've written to accompany your Codepen prototypes and put it all in this file. Get rid of any obvious duplication.

Link everything together

Codepen automatically linked our HTML with our CSS and Javascript, without us needing to do anything.

Now, we now need to do this ourselves by adding some extra HTML tags to every view: <link> and <script>.

Along with these tags, we're also going to include some extra HTML at the top and bottom of every view. These tags must be in every HTML webpage. Before, Codepen was adding these for us automatically.

We want to include the following code at the top of every view.

If you don't already have a header.njk include at the top of every view, create one now. Put the following code at the very top of the file:

<html>
  <head>
    <title>My App</title>
    <link href="/style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>

We also need to place some code in our footer.njk file. If it doesn't already exist, create it now and put the following code right at the bottom:

  <script src="/client.js"></script>
  </body>
</html>

Browsers read HTML pages from the top to the bottom. If we put something inside <head>, like our CSS, the browser will wait until it downloads before showing the HTML below it. We don't mind if our Javascript loads slightly after the HTML has appeared, so it's okay to put this right at the bottom of the page.

Check your work

Once you've built your routes, views, CSS and Javascript files, you can test the app.

If the app is already running, restart it and check the browser.

You can use the browser's developer tools to check your work:

  • Check that the HTML markup of each view is as you'd expect using the elements tab
  • Look for Javascript errors in the console tab
  • Check that your client.js and style.css files are present in the network tab

To-do

Using this guidance, turn each of your Codepen prototypes into a view. Make sure you:

  1. Use includes for any reused design elements
  2. Serve all your CSS from a single .css file
  3. Serve all your client-side Javascript from a single .js file
  4. Check everything using your browser's developer tools

Consider leaving feedback for this module.

When you're ready, proceed to the next module.

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Web servers
  1. Create your serverP
  2. Create your appP
  3. Node and the terminalP
  4. More about the terminalP
  5. Web frameworksP
  6. Using ExpressP
  7. Serving static files
  8. Views and templates
  9. Routing
  10. Real data
  11. Includes
  12. Get confident with Express
  13. Build your app in ExpressP