Let's build and deploy a full stack MERN web application
I am sure that when you first begin learning full stack web development using the MERN stack, you will have questions like "What is it like to build a full stack application?" What exactly are frontend and backend? How do we connect them? Is there any magic? etc., So I'm writing this tutorial to address your queries and show you how to build a full-stack web application.
Note: The goal of this tutorial is to provide you with a high-level overview of what it's like to build a full stack application, rather than a detailed explanation of MERN stack technologies.
Let's get started
To keep things simple while covering more concepts, we will create a simple mini-project. We will create a simple Productivity Tracker application in which you can record what activities you accomplished during the day and for how much time. So that we may see how we are spending our time. We can also see all of the stuff on the home page.
How does this work?
- You enter an activity and the amount of time you spent on it.
- The data is then submitted to the NodeJs backend.
- That information will be stored in the MongoDB database.
- All activities are displayed on the homepage.
We know what we need to do; now let's figure out how to do it.
What is a Frontend/Client application?
Client application refers to the frontend part of a full-stack application. The client sends requests to the server and receives responses. That request could be the client sending information to the server or asking for information. The client is the visible part of a full-stack application.
Let's start by making a client.
Make a new folder and label it "productivity-app."
Create a react app called "client" using create-react-app.
Start your coding editor/IDE and open the project.
This is how your folder structure will look.
For the time being, we are only interested in the
Remove all existing code from the
App.cssfiles. Let's make a react component.
Add the App component to the
The above code creates and renders the App component.
Run the following command in the terminal and navigate to http://localhost:3000.
Design the app.
We want the user to enter the name of the activity as well as the time it took. Then we'll display all of the activities on the homepage.
Copy and paste this HTML code into the App component.
Our app will now look like this.
Let us now add some CSS. Copy and paste the CSS code from this file into the
Our app now appears as follows.
The activities are currently hard coded. So let's save and use activities in a state.
But, Where do we get our activities? How do we add an activity to the list? A backend is required to handle all of this.
The backend component of a full stack application is frequently referred to as the Server. A server's job is to continuously listen to requests, implement some business logic, and return the results.
Let's create a database first before we create a server. To record and add our activities, we need a database. We can use a cloud database instead of hosting a database. MongoDB offers a free cloud database (atlas) that may be used for small/hobby projects.
- Log in to your MongoDB account.
- Create a project.
- Then go to "Browse collections" and create a database. For the collection name, write "activities".
Click on "Overview" and then in the overview tab click on "CONNECT" -> "Connect your application". Copy the connection string. Your connection string should look like this.
Save this string somewhere safe.
We now have a database. Let us now build our application logic and connect it to the database.
Make a folder called "Server" in your project folder.
In the terminal, open the folder and type
npm init. Fill in all the details.
Install the following packages.
- express: Used to create a server.
- mongoose: Used to work with MongoDB database
- dotenv: Used to load environment variables.
.envfile and save your connection string in a variable called "MONGODB URI".
server.jsfile and paste this code.
This means the server is running successfully.
Create a schema model to store activity.
Create a folder called "models" and in that folder create a file
activity.model.js. Copy and paste the below code.
Implement application logic in controllers.
Create a folder called "controllers" and in that folder create a file
We need to implement two things - 1) Get all activities to show on the homepage and 2) Add an activity.
Register routes to handle requests.
Create a folder called "routes" and in that folder create a file
activity.route.js. Copy and paste the below code.
Final folder structure will be like this.
Use the above routes in the app.
server.jsfile and use the registered routes.
Our backend is now wholly operational; we can add and retrieve data. Let's look at how to connect the backend to the front end.
Connecting client and server
It is not difficult to connect the client and server. It's as simple as adding a URL.
Navigate to the client folder and create a
.env.localfile. Paste the backend URL into a variable.
Navigate to the client folder and open
App.js. When the user clicks the Add button, we must make a POST request to the server via the
Create a function called
handleSubmit()and add the
onSubmitattribute to the form element.
In this function, we must send a request to the server, passing the activity name and time through the body.
Enter an activity name and time, then submit. (Ensure that the server is also up and running.)
An error message will appear in the browser console.
Access to the server is banned by CORS (Cross-Origin Resource Sharing) policy, which means your server does not allow access to its resources. We may avoid this problem by using the cors npm package.
Open the server folder and install the cors package.
Then use this package in
Restart the server.
Try to add activity. It will work this time.
You can see the data that has been added to the database.
- Now we must display the list of newly added activities.
We must display activities as soon as the component renders. We can accomplish this by using
useEffect()hook. Fetch the data from the server and save it to the state.
Now you can see all the activities on the homepage.
Hosting full-stack application
Before hosting, we must keep secrets safe and avoid committing unnecessary files/folders.
- Open the server folder.
- Initialize git, create a
.gitignorefile and paste the following stuff.
Heroku will be used for the backend.
- Create a GitHub repository for the server application and push server code to it.
- Access Heroku.
- Select "New" -> "Create new app."
- Give your app a name, choose a region, and then click "Create app."
- Navigate to Settings -> Config Vars -> Reveal Config Vars -> Add Environment Variables Here.
- Go to Overview and select GitHub as the deployment mechanism. If you haven't already, sign up for GitHub.
- Select your repository.
- Select "Enable Automatic Deploys" if you wish to create a deployment every time you commit to the repository. Finally, click "Deploy Branch."
- Make a note of the URL of the deployed site.
Netlify will host our client/frontend part.
- Create a GitHub repository for the client application and push client code to it.
- Sign in to Netlify.
- Select "Add Site."
- Select "GitHub."
Give GitHub permission.
Select your repository.
In "Basic build settings",
- For base directory - Leave empty.
- For build command -
npm run build
- For publish directory - "build"
Select "Show advanced" -> "New variable" In the key field, enter the
REACT_APP_BACKEND_URLand the previously copied backend URL in the value field. Put
/apiat the end of the URL.
Select "Deploy site."
That's all! Open the URL in your browser and have fun 🎉🎉.
Add your own features and share the URL in the comments.
- The flow of building a full-stack web application
- Different ways to connect react frontend and node backend
I hope this has given you an idea of how to develop a full-stack MERN application.
Don't forget to subscribe to my Newsletter.
LEAVE A COMMENT OR START A DISCUSSION
5 min read
Hiring Angular Developers in 2023: Insider Tips & Strategies
Does your company struggle to create a modern, high-performance, cross-platform web app? Do you desire cost-effective development without compromising future software quality? Many web development teams utilize Angular to build complicated single-page apps. Hiring Angular programmers is difficult.
8 min read
How Feature Flags Can Help You Ship Faster and Smarter?
Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.