Deploy and Host Your React Web App on MongoDB Atlas App Services
Rate this tutorial
One of the things I enjoy the most is building fullstack apps using React, Node.js, and MongoDB. Whenever I want to host my side projects’ front end, I find myself hosting a Netlify site or maybe uploading it on AWS S3. But I use them only to host my front end (client app), and this adds a lot of operational overhead, as I have to manage my front end on one tool and my back end and database on the other.
Wouldn’t it be convenient if there was a tool where I could manage my database, back-end, and front-end hosting in a single place? Atlas App Services provides website hosting out of the box in the same dashboard, which we used to create and configure authentication and GraphQL APIs for our app.
And, in this final part of the blog series, we will be looking at how we can utilize this website hosting provided by Atlas App Services. In just five steps, we will have a live website with a URL that can be accessed from anywhere in the world.
To create a build folder, execute the following command from the root directory of your React app:
Once the build process is finished, take a look at the folder structure of your app and you will be able to see a build folder in the root directory.
Open your App Services application in the Atlas UI.
Now, select Hosting from the left panel and then click on Enable Hosting, as mentioned in the sequence in the image below:
Open the build folder we just generated in your File Explorer and drag all the contents of the build folder to the hosting menu’s screen on the browser as shown in the image below.
Do not upload the build folder directly. Instead, upload all the contents that are inside the build folder by selecting all the files and folders after opening the build folder in the File Explorer.
Since React has created an index.html file of its own, accept the overwrite warning for index.html by clicking on Upload in the prompt, as shown in the image:
Now, review the draft and deploy.
Once you get a “Deployment was successful” message in green at the top, log on to the URL provided by Atlas App Services, as shown in the image below, and test if the app is working as expected.
And if all goes well, you will be able to see the login and your expenses, just like shown in the image below:
Finally, in just five easy steps, we were able to deploy our app using MongoDB Atlas App Services static hosting. You can switch to the setting tab at the top and point your custom domain to this hosted web app.