Leveling Up with Node.js and Express: Adding a Server to My Yoga Pose Library

After getting comfortable with React through building a simple Yoga Pose Library, I wanted to take my project to the next level by adding some backend functionality. That’s where Node.js comes in. Node.js is a runtime environment that allows us to run JavaScript code on the server side. In this blog post, I’ll walk through how I added a Node.js server to my Yoga Pose Library app. It was a fantastic way to practice working with both frontend and backend technologies, and it gave me a much deeper understanding of how full-stack applications work.

Why Add Node.js to My React App?

The main motivation for adding a Node.js server to my Yoga Pose Library was to serve the React app and prepare for more advanced features later on, like retrieving pose data from a database or handling user authentication. For now, I wanted to focus on setting up the server and serving my static files (the React app) from it. This way, I could host the app in a way that could easily scale later on.

Getting Started with Node.js

Before diving into the code, I installed Node.js and initialized my project with npm, the Node package manager. If you don’t have Node.js installed, it’s as simple as heading over to the Node.js website and downloading the latest version. Once that’s done, I set up a basic Node.js server.

npm init -y 
npm install express

I used Express.js, a minimalist web framework for Node.js, to handle routing and serve static files. It's perfect for lightweight applications like this one.

Introducing server.js

Now, let's take a look at my server.js, which is responsible for setting up the server. Here's the completed code:

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

Breaking Down the Code

Now, let's break it down one step at a time.

Importing Dependencies:

const express = require('express'); 
const path = require('path');

Here, we import express, which is a web framework for Node.js, and path, a built-in Node.js module that helps us work with file and directory paths, so that the server can correctly locate the files that we want to serve.

Creating an Express Application:

const app = express();

We create an instance of an Express application, which will handle our server requests and responses.

Setting the Port:

const PORT = process.env.PORT || 3000;

We define the port number that our server will listen to. We check for an environment variable PORT, which is useful for deployment with a hosting service, and fall back to port 3000 if it’s not set.

Serving Static Files:

app.use(express.static(path.join(__dirname, 'build')));

This line tells Express to serve static files from the build directory, which contains our React app's compiled files.

Catch-all Route:

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
});

This catch-all route ensures that any request not handled by previous routes will respond with index.html. This is important for client-side routing to work correctly with React Router.

Starting the Server:

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

Finally, we start the server and listen on the defined port, logging a message to the console when it's ready.

Conclusion: A Solid Foundation for Future Features

Adding Node.js to my Yoga Pose Library app has given me a solid foundation to build more advanced features down the line. By serving the app from a Node.js server, I’ve set myself up to easily handle more dynamic data, user input, and even real-time functionality in the future. This was a great exercise in combining front-end and back-end technologies, and I’m excited to explore more of Node.js and Express as I continue building.

In my next blog post, I plan to go deeper into how I can extend this setup with a database, but for now, I’m thrilled with how much I’ve learned by getting hands-on with Node.js!

Blog

Leveling Up with Node.js and Express: Adding a Server to My Yoga Pose Library

wendyver