Node JS & Express Tutorial — Restaurant Website, Part 1

The restaurant website tutorial is a top-to-bottom implementation of a website for an imaginary upscale restaurant in an urban area. This project would make a great portfolio piece and is reusable if you intend on working with restaurants regularly. After setting up a base template with UI and graphics, we incorporate additional elements from the restaurant’s online presence: Instagram, Yelp, and Youtube. We then add the ability for customers to reserve a table online via the OpenTable API.

This series is suited for beginner-to-intermediate developers who are looking to build their portfolio. You should have a solid understanding of HTML/CSS/Bootstrap as well as Javascript and jQuery as these concepts are not deeply explained in the tutorials. You should also have some experience with MVC and Node/Express though you do not need to be an expert.

The full tutorial including videos and downloadable code samples can be found HERE. This series is a preview of our Road to Freelance developer series which you can learn more about HERE.

Getting Started

In Terminal, navigate to where you do your programming — for this tutorial’s purposes, that will be the desktop.

$ cd ~/Desktop

Ensure you have Node version 6 or higher.

$ node -v

We need to make a few global installations before starting a Turbo project, so run the following commands:

$ sudo npm i -g gulp
$ sudo npm i -g webpack
$ sudo npm i -g turbo-cli

If you already have `turbo-cli` installed, you can run the installation command again to update it to the latest version. As of this tutorial, the latest version is 0.15.27.

Create a new Turbo project by running the following command:

$ turbo new base-restaurant

This creates a basic Node/Express project for you to work with. Run the following commands:

$ cd api-demo
$ npm install

This will install all of the dependencies required for the Node/Express project to run.

Head to https://www.turbo360.co and create an account if you don’t already have one. Create a new Vertex app called “base-restaurant”. Copy the **APP ID** from the right side of the window. This allows us to connect our local source code to the project we just created on Turbo. The following command tells the local app where it should deploy on Turbo’s hosting environment:

$ turbo app PASTE_APP_ID_HERE

Run Turbo’s devserver:

$ turbo devserver

Use your browser to navigate to **localhost:3000**. If you see a simple Turbo application, then everything is working properly so far. To stop the devserver, press **CTRL+C** on your keyboard.

Next, deploy your project to Turbo’s staging environment. If this is your first time working with Turbo 360, first connect to your Turbo account:

$ turbo login

And enter your login credentials. Then, deploy your project:

$ turbo deploy

The project will now be connected to the free staging environment provided by Turbo. When this command has finished running, you will see something like:

DEPLOY COMPLETE: http://YOUR_STAGING_URL.turbo360-vertex.com

Copy this URL and navigate to it using your browser. You should see the same page as earlier, so now we know that the project works on the live environment as well as local.

Source Code

If you look at the structure of the source code, you will see that it is a standard Node/Express project. Turbo projects use the Mustache templating engine by default. If you open `views/index.mustache`, you will see the source code for the web page you just viewed in the browser. The file `app.js` is the entry point of the project, and it connects all of the routes. The main route used for serving content in this project is `routes/index.js`, though we will be using `routes/api.js` later on as well.

Rendering Data

Open `routes/index.js`. We want to remove everything except one route that will serve our `index.mustache` file. We also update this route to ES6 syntax, and pass a simple data object to our template. At this point, `index.js` should look like this:

It is important to note that on line 12, ‘index’ corresponds directly to the `index.mustache` file. Now, we want to alter `index.mustache` to display the data it is receiving from our route.

Notice the change on line 9. With the devserver running, navigate to **localhost:3000** and you will see the data being rendered dynamically. Next, we add another field to our data object and render it using our template.

If you look at `index.mustache`, you will see that the double curly brace syntax is what allows us to render our data. If you look on line 3 however, you will see that we are including `{{>head}}`, which is called a partial. Partials allow us to include snippets of code throughout our page and help us to avoid repetition.

Theme Integration

The next step is to download a restaurant theme to give us a nice UI and get our front end off the ground. You can download the theme used in this tutorial here HERE. Unzip the folder and create a duplicate just to be safe.

Replace all of the contents of `index.mustache` with the contents of the `index.html` file from the theme. If you view the page with the devserver running, you should be able to see the new contents. It won’t have any styling yet, however. This means we need to port over all of the assets from our theme. Open the `public` folder of your Turbo project. You will see three directories: ‘css’, ‘images’, & ‘js’. To do this, complete the following steps

* Copy the files from `restaurant/css` into `base-restaurant/public/css`.
* Copy the entire folder `restaurant/fonts` into `base-restaurant/public`.
* Copy the files from `restaurant/js` into `base-restaurant/public/js`.
* Finally, copy the entire folder `restaurant/vendor` into `base-restaurant/public`.

Now, refresh the page in the browser and it should look just like the theme. Our next step is to move the head into a partial and reorganize it. The file `views/partials/head.mustache` should now look like this:

We also want to move all of the Javascript imports from the bottom of `index.mustache` into another partial. Create this partial by running the following commands:

$ cd views/partials
$ touch imports.mustache
$ cd ../..

Copy over all of the imports into this new file so it looks like this:

Now we make sure to include the head and imports partials in our `index.mustache` file. We also remove the “back to top” div, which is optional.

Notice that the purpose of moving these pieces into separate partials is so we can avoid having the same code on multiple pages. If you scroll down to the bottom of the web page, you will see that there is a footer that would be rendered on every page. To avoid repetitive code, we will make a footer partial.

$ cd views/partials
$ touch footer.mustache
$ cd ../..

Copy the entire footer from `index.mustache` into this new file:

We will also create a partial for the navbar.

$ cd views/partials
$ touch header.mustache
$ cd ../..

Grab the entire header tag from `index.mustache` and separate it into the new partial:

Make sure to include the new partials in `index.mustache`:

Reload the devserver and make sure that the footer and navbar still show up on the page.

Optimizing Assets

If you look at the source code for the homepage using your browser, you will see there are 11 imports at the top of the page. This means there are 11 requests being made every time the page is loaded. We are going to create gulp tasks that combine all of these CSS files into just 2 separate files. Run the following command from the root directory of your project:

$ touch gulpfile.js

For now, we want this file to look like:

Then, we have to actually install all of these modules.

$ npm i -D gulp
$ npm i -D gulp-minify-css
$ npm i -D gulp-autoprefixer
$ npm i -D gulp-concat
$ npm i -D gulp-rename
$ npm i -D gulp-uglify

Notice that we use the ‘-D’ flag, which specifies that we want to save these as devDependencies.

Now, we add our first gulp task:

This will grab the 3 files specified, minify them, add prefixes for browser support, concatenate them into a single file called `style.min.css`, and output this file into the directory `./public/dist/css`. Run the task:

$ gulp css-main

Ensure that the new file was actually created in the correct directory. Now, we replace the three imports in our `head.mustache` with the new file we created.

Restart the devserver and make sure the styling looks the same. You will notice that the social icons on the top right of the page are not displaying properly. To fix this, we need to create another gulp task:

Run the task with the following command:

$ gulp copy-fonts

Check the page and you should find that the social icons are now being displayed properly. Next, we create a gulp task that will run both of these tasks for us one after the other, so we don’t have to manually run each.

You can run this new task with the following command:

$ gulp style

Next, we will create another task for our vendor assets, and add it to the style task right away. This process can be a bit tedious, but it is important to understand the structure of the project so you can go back and make changes when necessary in your own work. This is what your gulpfile should look like at this point:

Run the style task again.

$ gulp style

And make sure the `vendor.min.css` file was created in the directory `public/dist/vendor/css`. Then, replace the vendor imports in `head.mustache` with the new file.

Check the page again and make sure everything looks correct. If you view the source code, you’ll see that we have reduced the 11 imports to just 2 imports. If you view the source code for these imported files, you will see that they are minimized, which is a more efficient way of delivering your assets.

In the next part of the tutorial, we will repeat this process to optimize our Javascript imports in `imports.mustache`. It would be a good exercise for you to try to do this on your own before continuing with the tutorial.