So we have NodeJS and ExpressJS working and we've added a templating engine middleware to render HTML templates. So now we need to create a homepage for our Giphy Search app.

Adding a Root Route to your Gif Search

Let's add a root route (a url endpoint that goes to the root path: /). And let's render a template called home.handlebars.

app.get('/', function (req, res) {
<h1>Search for GIFS</h1>

Adding a Search Form

Let's add a search form to your html.

<!-- home.handlebars -->
<h1>Search for GIFS</h1>
<form action="/">
  <input type="text" name="term">
  <button type="submit">Search</button>

Navigate to localhost:3000 and let's look at your form. Pretty plain but it will work!

Enter something into the input field and hit enter or click on Submit.

Your form should navigate you to /?term=YOUR+SEARCH+TERM. This means that their will be a url query string available called term inside of your root route.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more