Build and Host Backend and Frontend with Next.js, Parse Server, Back4App and Cloudflare
Setting Up Your Development Environment
Creating an app in Back4App
Creating a Basic Frontend with Next.js
Connecting Next.js Project to Back4App
Deploying the Next.js Frontend with Cloudflare Pages
Example Project Repository and Live Demo
1. Introduction: In this tutorial, we will guide you through the process of creating a full-stack web application using Next.js for the frontend, Parse Server for the backend, hosting the backend on Back4App, and deploying the whole application with CloudFlare Pages. We will cover setting up your development environment, creating frontend project, setting up the Parse Server backend, hosting it on Back4App, deploying the Next.js frontend, and integrating them. Let’s get started!
2. Prerequisites: Before we begin, make sure you have the following:
• Node.js and npm installed.
• A Back4App account (Free to create).
• A Cloudflare account (Free to create).
• Familiarity with React and Next.js.
• Some understanding of Node.js.
3. Setting Up Your Development Environment: First go to the directory where you want to create the project.
Then run the following command:
After running that command, you have to answer several questions about your project. For the sample project, it will be sufficient to make the following selections:
Testing the Setup Locally
npm run dev
Visit http://localhost:3000 in your browser to see your Next.js app running locally. If you see the following page, your Next.js project is ready to use:
Now we can move on to the backend preparations.
4. Creating an app in Back4App: To register a Back4App account, first go to the Back4App website.
After registration, on this screen we select the Backend as a Service option.
Then on this screen, you can give your application the name you want and continue.
After a short loading screen you will see this screen. Congratulations, you have created your Back4App application!
5. Creating a Basic Frontend with Next.js: Now we will create a simple project consisting of CRUD operations.
First, let’s install the react-icons package required for the icons in our project:
npm install parse
// Import Parse minified version
import Parse from "parse/dist/parse.min.js";
// Your Parse initialization configuration goes here
const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID_HERE";
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.serverURL = PARSE_HOST_URL;
Code Samples for Basic CRUD Operations
We can write our Create, Read, Update, and Delete operations in the parseService.js file.
After running your project with the npm run dev command, add a new person with the Add Person button.
You’ve saved a data object from Back4App. You can also check the data on your App Dashboard and clicking on Person class.
Now our app is ready to deploy.
7. Deploying the Next.js Frontend with Cloudflare Pages: Before deploying your frontend, set up a Git repository for your project. After setting up your project and pushing it to GitHub or GitLab, the next step is to deploy your website using Cloudflare Pages. Here’s a step-by-step guide on how to do this:
A) Log in to Cloudflare: Visit the Cloudflare dashboard and log in to your account. If you don’t have an account, you’ll need to create one.
B) Navigate to Cloudflare Pages: On your account’s homepage, go to Workers & Pages from the left menu. Then go to the pages section. This is where you will manage your deployments.
C) Connect to Git: Click on the “Connect to Git” button and connect your GitHub or GitLab account. You’ll need to authorize Cloudflare Pages to access your repositories.
D) Select Repository: Choose the git repository that contains your project. Then click the Begin Setup button.
E) Set up builds and deployments: All we need to do in this step is to select Next.js from the Framework preset section and then click the Save and Deploy button.
F) Congratulations! : After a short wait, your website will be deployed. You can go to your website by clicking on the link.
Note: If you see this error when your site opens, don’t worry.
• Select Workers & Pages and in Overview, select your Pages project.
• Add the nodejs_compat compatibility flag to your Preview and Production deployments.
• After saving both with the save button, go to the Workers & Pages section again. Click on the View Details button at the bottom right of your project.
• Click on the Manage Deployment button at the top right and select the Retry Deployment option. After a short wait, your site will be deployed again and you will no longer see any errors when you go to your site.
8. Example Project Repository and Live Demo To explore the code and experience the example project live, you can access the following links:
Conclusion In this tutorial, you have learned how to build a full-stack web application using Next.js, Node.js, Parse Server, Back4App, and Cloudflare. You now have the knowledge to create and deploy your projects. Consider extending your application’s features and sharing your creations with the community.