Categories
Development Technology Tutorials type-recorder

Let’s Build a Web App

A step-by-step tutorial on building a cool web application using Node.js and Express 4.

type-translator-tutorial
The type-translator-tutorial

Want to build a web application using Node.js? Let’s dive right in and build one from a template (that I created from another template). This tutorial will show you how to quickly clone and launch a Node.js web application locally and how to deploy your application to Heroku.

We are using Node.js because… well, because I like Node.js! Node is designed with modularization in mind, and the Node package manager, npm, is an incredibly powerful tool. It really makes getting projects started a breeze once you know the basic framework.

Heroku allows you to deploy an application super quickly and share it with others. To learn more about why I like Heroku, see my previous post, Heroku and Other Cloud Services.

After this tutorial, you should have a simple, cool web application that you can customize, enhance, or totally scrap and rebuild. If you are a more junior developer, this can be a great learning experience, and it could result in something fun to add to your portfolio. All I ask is that you

  1. Change the name and the styling within your application if you plan to share it with others or use it for other purposes.
  2. Give type-recorder LLC credit somewhere on your website! Link to our blog and the original site!

Let’s get started!

Take a look at this! This web app is what you are going to build! type-translator is a Node.js application using the Express framework and the EJS template engine that performs real-time translation of text to a specified language. Nothing out-of-this-world these days, but it’s still pretty cool, and it requires a few different pieces of technology: Node.js, Microsoft Azure, and Heroku.

This tutorial assumes that you have a basic knowledge of the command line interface, source control, and of general software/development principles. Don’t let that scare you off though! Most of this stuff is straightforward and simple to pickup. I encourage you to work along and Google what you don’t know!

Step 1: Install the basics

Node.js

Our web app is a Node.js app – it runs on Node.js. In order to run and test our application locally, Node.js needs to be installed.

  1. Download Node.js: https://nodejs.org/en/download/
    • Choose the installer appropriate for you.

Downloading and installing Node.js also installs npm (Node Package Manager). npm is critical for installing and updating modules and libraries that our application relies on.

Git

Git is necessary to clone our source code, but it is also necessary to have if you plan to do future development and utilize source control.

  1. Install Git: Follow the instructions for your operating system.
  2. Confirm Git is installed:
    1. Open the terminal/command-prompt.
    2. Type git --version
    3. If you do not receive an error, you are in good shape!

Heroku Account

If you intend to launch your test application on Heroku as part of this demo/tutorial, you will need to create an account on Heroku. Don’t worry, it’s free. This step is optional – you don’t have to host/launch your app on Heroku to create the web application on your machine locally. You will not be able to share a link to your app, though, without hosting your application on a publicly accessible web server (be it Heroku or something else).

  1. Create account on Heroku: https://signup.heroku.com/

No further steps needed on Heroku at this point.

Heroku CLI

The Heroku CLI (command-line interface) is utilized for deploying your application from your local machine to Heroku. If you do not intend to launch your application on Heroku, you do not need to install the CLI. That said, I recommend doing it if you are trying to learn more about development because it is a fun learning experience (and it is fun to share the link with your friends and say, “I put this web app together!”).

  1. Install the Heroku CLI: https://devcenter.heroku.com/articles/heroku-cli
  2. Confirm the installation by running heroku --version on the command terminal.

Visual Studio Code

Visual Studio Code is an all around great editor, and it has been embraced by much of the developer community. This is a matter of personal preference, but if you don’t already have an editor for code development, I recommend using VS Code!

  1. Install Visual Studio Code: https://code.visualstudio.com/

Basic command-line navigation

If you don’t know how to get around in the terminal, check out my post, The Most Basic Command-Line Commands.

Step 2: Setup Azure

Microsoft Azure’s Translator Service (part of Microsoft Azure’s Cognitive Services set of tools) allows for real-time language detection and translation of text via API. We use Azure’s Translator Service to perform translations on type-translator, and it is, therefore, what I will show you how to use in your app!

  1. Set up a free Azure account: https://azure.microsoft.com/en-us/free/.
  2. Log in to the Microsoft Azure Portal after account setup.
  3. Create a New Resource
Create a resource in Microsoft Azure
  1. Type Translator and select the suggested result:
Translator resource in Microsoft Azure
  1. Click on Create.
  2. Select or create a Resource Group.
  3. Choose the “Global” Region (or another region suitable for you).
  4. Enter a name for the resource (ex. MyTranslatorResource).
  5. Select the F0 (free) Pricing Tier.
  6. Click on Review + create.
  7. Click on Create.
  8. Open your new Translator resource once it is ready.
  9. Click on Keys and Endpoint to access important subscription key and endpoint information:
The Keys and Endpoint section of the Translator resource. These keys will be important for accessing the Translator service via API.

We should be good to move on to the next step for now.

To learn more about Microsoft Azure’s Translator, check out the Quickstart.

Step 3: Clone repository

Good to go with Git? Here is the Install Git link if you still need it. I’ll do another post explaining Git, but in the meanwhile, we’ll get on with this.

You need to clone (copy) my project from GitHub. This will serve as your template. You won’t be building the site from scratch, but you will instead be taking my site, modifying it, and deploying to Heroku (or wherever you want).

  1. Open the type-translator-tutorial GitHub repository: https://github.com/lsaggu/type-translator-tutorial
  2. Click Clone or Download.
  3. Copy the Clone with HTTPS link.
  1. Open your terminal (command-line interface).
  2. Navigate into the directory that you want to save this project.
  3. Clone the repository using Git:
git clone https://github.com/lsaggu/type-translator-tutorial.git
  1. Navigate into your local project/repository
cd type-translator-tutorial

Nice. Now you have a local copy of the web app on your machine. At this point, you can change the name of the parent folder from type-translator-tutorial to something that you prefer. You can also set up your own git remote using your preferred git provider (GitHub, GitLab, etc.). I’ll leave that to you.

Step 4: Update Keys

In order for your instance of type-translator-tutorial (or whatever you’ve decided to call it) to work properly and interact with Microsoft’s Translation services, you will need to update some information in the app. Specifically, you will need to specify your Subscription Key (from Step 2) in order to make callouts to the Translator service.

  1. Open Visual Studio Code (or your preferred editor), and open the type-translator-tutorial folder that you cloned.
    1. Type Alt
    2. Click on File > Open Folder…
  2. Once the type-trasnlator-tutorial is open in VS Code, create a new file in this top-level app folder – do not put the file in a subfolder.
    1. Right click in the bottom (empty space) of the Explorer in VS Code.
    2. Click on New File.
    3. Name the file .env
  3. Copy the following content into the file:
TIMES=2
AZURE_TRANSLATION_SUBSCRIPTION_KEY=<Replace with your Microsoft Azure Translator Service Key>
AZURE_SERVICE_REGION=global
  1. Add your Key (either Key 1 or Key 2) where specified in the content above. See step 13 in Setup Azure for reference as to where to find your keys.
  2. Save the file as “.env”.
    • The file should not have any other extensions… .env.txt is not going to work.

The Heroku system uses the .env file that we just created to reference global environment variables specific to the app that we are running.

Step 5: Run Locally

Okay! We have the application code on our computers, and we have Node.js, Git, and Heroku CLI installed.

  1. Open the terminal.
  2. cd into the directory that contains the application.
  3. Run npm install

This will install all dependencies that the app requires to run!

  1. Run heroku local

The heroku local command emulates a Heroku web dyno (server) locally on your machine, and it runs your app.

heroku local

After running heroku local, you should see that the server is “Listening on 5000.” This means that the server is listening for requests to the web application on port 5000.

  1. Open a web browser.
  2. Navigate to localhost:5000 in the browser.

Boom! We should see type-translator up and running locally on your machine.

Step 6: Change Styling

Now, we can’t have you parading around, sharing and/or using my app as your own. Let’s change the styling to something that is original and unique. Also, I’d like a bit of credit on your site!

  1. Open Visual Studio Code (or your preferred editor) and open the directory containing your web app.

I suggest making the changes below one at a time, saving, and checking. This way, you can easily identify the cause of any issues that you might face.

Change Jumbotron Color

  1. Open the ./public/stylesheets/main.css file.
  2. Change the background attribute in the .jumbotron block.
    • Choose a color that you like that is different from the one that I am using.
    • If you are unfamiliar with hex color codes, Google “hex color”, and use the color picker to find a color that you like. Copy and paste the HEX value into the CSS file.
  3. You can change the text color of the main heading by changing the “color” attribute in the .jumbotron block.
  4. You can change the text color of the subtitle by changing the “color” attribute value in the .jumbotron p block.

Change Names

Let’s give your app a new name. Come up with something that you like. Or name it after yourself (e.g. “John’s Translation App”).

Note: You may notice that the pages have a .ejs extension (instead of .html as you might expect). This is because this Node.js app uses Embedded JavaScript Templating (EJS) to allow for the injection of code and data from the application framework.

Header
  1. Open ./views/partials/header.ejs.
  2. Change the text between the <title> tags from type-translator-tutorial to whatever you’ve decided to call your app.
  3. Save.
Footer
  1. Open ./views/partials/footer.ejs.
  2. Change type-translator-tutorial to whatever you have decided to call your app.
  3. Remove Copyright 2020 type-recorder LLC.

If you want to create your own Privacy Policy and/or Terms & Conditions, the app includes template Privacy Policy and Terms & Conditions pages in the ./views/pages folder. You will need to update these pages.

Body
  1. Open the ./views/pages/index.ejs page.
  2. Type Ctrl+f and search for type-translator-tutorial.
  3. Change all instances of type-translator-tutorial to your app’s name.
About Page
  1. Open the ./views/pages/about.ejs page
  2. Type Ctrl+f and search for type-translator-tutorial.
  3. Change all instances of type-translator-tutorial to your app’s name.

Give Credit 😁

See the Build this App section on the About page? If you leave that section in your app (or maintain a section that says the same thing with the same links), then you are giving me and the open source community credit! Thank you!

Save and Verify

Make sure to save all of your changes!

Refresh the browser window that contains localhost:5000. If you don’t see all of your changes, you might need to restart your local (Heroku) webserver.

  1. Open the terminal where you are currently running heroku local.
  2. Type Ctrl+c.
  3. Type Ctrl+c again to confirm that you want to terminate the job.
  4. Run heroku local to restart the app.

You should now see all of your changes, and you should be able to continue making and testing changes in the same way.

Step 7: Deploy to Heroku

Are we doing okay so far? Awesome!

Finally, let us deploy our application to Heroku so that we can share it with the world! Or at least one or two of our friends…

  1. Open the terminal.
  2. Navigate to the directory containing your application.
  3. Log into Heroku via the command line:
    1. Type heroku login
    2. Follow the instructions to log in to and authenticate your Heroku account.
    3. See here for more information.
  4. Type heroku create
  5. Type git push heroku master

You should see a bunch of information print to the console. This is the output of Heroku building and deploying your application.

We use the git push command to deploy to Heroku because Heroku is acting as a remote Git repository for our application. For more information, see Creating a Heroku Remote.

Let’s open our Heroku App:

  1. Type heroku open

Voila! This should open a browser window containing your app. The URL is the app’s address on Heroku. If you continue working on your own app and want a custom domain name, Heroku let’s you associate your own domain with an app.

The End

Thanks for reading!! Hopefully this gave you some tangible skills and some practice using Node.js, Heroku, and Git! Hopefully you had some fun!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.