Host/Deploy your React.js Web-App on Atlas App Services

Atlas App Services Tutorial showing how to Host Websites and Single Page Applications like React.js in just 5 steps.

One of the things I enjoy the most is building full-stack apps using React.js, Node.js, and MongoDB. Whenever I want to host my side projects’ Frontend, 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) 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 & 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 part of the blog series, we will be looking at how we can utilize this website hosting facility provided by Atlas App Services. In just 5 steps we will have a live website with a URL that can be accessed from anywhere in the world.

Step 1: Create a Production Build of your React App

To create a build folder, execute the following command from the root directory of your React.js app:

npm run build

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.

Build Folder being added to the root directory.

Step 2: Enable hosting on Atlas App Services

Now click on Hosting in the left panel and then click on “Enable Hosting” as mentioned in the sequence in the image below:

Enable hosting in your Atlas App Services

Step 3: 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:

Please do NOT upload the build folder directly, instead upload all the contents of the build folder by selecting all the files and folders after opening the build folder in the file explorer.

Drag Build Folder’s contents into the hosting menu screen in the browser

Since React has created a 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:

Step 4: Review Draft & Deploy

Now review the draft and deploy. Once you get a “Deployment Successful” message in green on the top, click on the link as mentioned in the 2nd point in the image shown below:

Step 5: 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.

And if all goes well, you will be able to Login and see your expenses just like shown in the image below:

Conclusion

Finally, in just 5 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.