Combining Node.js with the Frontend

Now that we know about frontend frameworks and Node.js, let's wire together both the ends. We'll build three small applications for (almost) full-stack functionality to demonstrate our knowledge. After all, the frontend and backend want to know each other! It's going to be our first foray into working with these technologies together, so be sure to give yourself space and time to learn, because these are heavy but extremely important topics.

The following topics will be covered in this chapter:

• Understanding the architecture handshake
• The frontend and Node.js: React and image upload
• Creating a recipe book with APIs and JSON
• Making a restaurant database with Yelp and Firebase

Technical requirements

Be prepared to work with the code provided in the Chapter-15 directory of the repository: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-15. As we'll be working with command-line tools, also have your Terminal or command-line shell available. We'll need a modern browser and a local code editor.

Understanding the architecture handshake

Now that we've had experience with JavaScript both on the frontend and the backend with Node.js, let's discuss what it really means to have the two halves tied together. We know that JavaScript on the frontend is great for user interactions, visuals, data validation, and other user-experience related pieces. Node.js on the backend is a powerful server-side language that helps us do pretty much anything we need from most other server-side languages. So, what does combining these two ends look like in theory?

You may be wondering why there even are two ends of an application. We understand that PythonNode.js, and JavaScript all do different tasks and act in either the frontend or the backend, but what is the theory behind this? The answer is this: there is a principle of software engineering known as the separation of concerns, which basically states that each piece of a program should do one or a few tasks and do them well. Instead of...

The frontend and Node.js - React and image upload

Let's begin with tying together React and Node. Be prepared to follow along with the solution code at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-15/photo-album. We're going to build a photo album app that will look something like this:

Figure 15.1 - Our photo gallery

We'll begin by exploring the architectural layout, then we'll review the React code, and finally we'll examine the Express backend.

Architecture

This application will be built using Node.js on the backend to store our uploaded files and React on the frontend. But how do we do that? Conceptually, we need to tell React to use an Express app to feed React information and to consume the files that we have sent. To accomplish this, we use a proxy as defined in the package.json file. It basically looks something like this:

Figure 15.2 - Proxying

If you're not familiar with the idea of a proxy...

Creating a recipe book with APIs and JSON

Part of the beauty of using a backend is to facilitate communication between your application, the filesystem, and APIs. Previously, all the work we did was constrained to the frontend with no persistence. We'll now make a recipe book application that saves our information in JSON format. Don't worry, we'll get to using databases in Chapter 18, Node.js and MongoDB. For now, we'll use local files. Here's what we're going to build:

Figure 15.3 - Our recipe book

To get started, we'll be setting up credentials using a third-party API and then forge onward with the code.

Setting up the application

Clone the starter code at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-15/recipe-book/. Be sure to execute npm install both in that directory and inside client. We'll also need to do a few setup pieces to access our API. To access the Edamam API, sign up for a free...

Making a restaurant database with Yelp and Firebase

Our applications up to this point have been fairly simple, storing information on the filesystem. However, in most cases you'll want it to be some sort of database instead of static files. We're going to be using Firebase, a cloud-based NoSQL database that plays well with JavaScript, but first, let's set up our React scaffold.

The starting line - creating a React app

We've gone through this setup a few times before, so it should be no surprise:

1. Create a new React application with npx create-react-app restaurant-finder and we're ready to go!
2. Test your setup with npm start and access http://localhost:3000.

Getting set up with Firebase

The first thing we want to do is set up our Firebase account.

Please keep in mind that the user interface for Firebase (as with most websites) does change periodically, so I won't be showing you screenshots for the signup process. If you run into any problems with the setup...

Summary

We've covered a lot of ground in this chapter. The power of JavaScript on both the frontend and the backend shows us that we can truly replace Python for many of our application needs. We've used a lot of React, but keep in mind that any frontend can be substituted here: Vue, Angular, and even frameworkless HTML, CSS, and JavaScript are at our disposal to create powerful web applications.

One of the things to note when using JavaScript and APIs is that there are cases when we need a middleware layer, for example, when saving files or accessing REST APIs with keys. Combining Express for powerful routing with a basic Node.js script to interact with an API is just the beginning of what we can accomplish with JavaScript and Node.js tied together.

In the next chapter, we'll explore webpack, a utility that allows us to logically combine and package our JavaScript application for deployment.