MongoDB Developer
Atlas
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

Deploy and Host Your React Web App on MongoDB Atlas App Services

Sourabh BagrechaPublished Nov 15, 2022 • Updated Nov 15, 2022
GraphQLReactAtlasJavaScript
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
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.

Create a production build of your React app

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.
Code Editor's file explorer highlighting the Build folder.

Enable hosting on Atlas App Services

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: Atlas App Services Screen highlighting how to Enable Website Hosting

Upload the contents of your app’s build folder

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.
Drag the build folder’s contents from your computer's file explorer into the hosting menu of the Atlas App Services in the browser.
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: Overwrite Files popup highlighting the Upload button

Review draft and deploy

Now, review the draft and deploy.
Atlas App Services screen highlighting the "Review Draft & Deploy" button

Testing: Access your hosted website

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.
Atlas App Services Hosting screen highlighting the URL that can be used to access our Web App from anywhere in the world.
And if all goes well, you will be able to see the login and your expenses, just like shown in the image below:
Expengo app's home page that was deployed using Atlas App Services Static Hosting.

Conclusion

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.

Copy Link
facebook icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

How to Set Up HashiCorp Vault KMIP Secrets Engine with MongoDB CSFLE or Queryable Encryption


Nov 14, 2022
Tutorial

ELT MongoDB Data Using Airbyte


Nov 16, 2022
Tutorial

Bringing your data to your Wrist with the MongoDB Atlas Data API and Fitbit


Sep 02, 2022
Quickstart

How to Connect MongoDB Atlas to Vercel Using the New Integration


Jun 14, 2022
Table of Contents