DEV Community

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

Posted on • Edited on

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

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 
Enter fullscreen mode Exit fullscreen mode

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}`); 
}); 
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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();  
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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')));
Enter fullscreen mode Exit fullscreen mode

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')); 
}); 
Enter fullscreen mode Exit fullscreen mode

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}`); 
});
Enter fullscreen mode Exit fullscreen mode

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!

Sources:

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay