How to Deploy a Dockerized React App to Doprax

Introduction to Doprax

Doprax is a cloud hosting platform that allows you to deploy your websites, web applications, and APIs to the cloud. Doprax supports deployments of applications built with various languages and frameworks such as JavaScript, Python, PHP, React, .NET, Laravel, and so on.

In this tutorial, you’ll learn how to deploy a React app on Doprax, making it easy for you to share your app with the rest of the world by following 3 major steps. The steps involved are Dockerization, Hosting, and Deployment.

Dockerizing your React App

This stage is a very crucial one when trying to deploy an app to Doprax. This is because you can’t deploy an app on Doprax without dockerizing it.

Docker is a platform where you can package your application and all its dependencies into a single container to ensure the app runs on any machine across different operating systems.

Dockerizing your application before deployment offers several benefits that can speed up deployment, improve consistency, and improve scalability.

Installing Docker and Creating a Dockerfile

Install Docker on your local machine by visiting the Docker website and selecting the operating system you’re using. You can verify that Docker has been successfully installed on your machine by checking the version using this command into your terminal:

docker -v

To create a Dockerfile, create a file named “Dockerfile” in the root directory of your React app on your code editor. This file will define the instructions on how to build the Docker image. Paste these lines of code in your Dockerfile:

# Use an official Node.js runtime as the base image
FROM node:18-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the rest of the application's files to the container
COPY . .

# Build the React app
RUN npm run build

# Specify the command to run the app when the container starts
CMD ["npm", "start"]

Each line of code in this Dockerfile has its function and they have been briefly explained with the comments above each of their respective code lines.

Building the Docker Image and Running the Docker Container

The next step in this stage is to build the Docker image. Open up a terminal in your code editor and navigate to your app’s root directory containing the Dockerfile. Run this command in the terminal to start the Docker image build:

docker build -t my-react-app

What this command does is that it basically tells Docker to build an image with the tag name "my-react-app". Feel free to replace the “my-react-app” with whatever name you want to give to your Docker image. Hit enter and this will execute each instruction in the Dockerfile one after the other. To see a list and details of the images you created in your system, run the docker images command.

The last step in this stage is to run a Docker container from the built image. On your terminal, run this command:

docker run -p 3000:3000 my-react-app

This command will start a new container that is based on the “my-react-app” image and map port 3000 from the container to port 3000 on your host machine. If your React app is running on a different port, adjust the port number to match the port your app is running on.

To access your React app running on the container, open your web browser and go to http://localhost:3000 or the port you specified. Here you’ll see your React app running on a Docker container. To stop running the container, use this command:

docker stop my-react-app

That’s it. You’ve successfully dockerized your React app. It’s time to move on to the next stage of this tutorial.

Hosting on GitHub

Hosting a project on GitHub is simply the process of storing and sharing the source code and associated files for your project on the GitHub platform. GitHub uses Git, a version control system, to help developers manage and keep track of their code changes over time. So in this section, you’ll need to host your React project on GitHub using some Git commands before you can move to the deployment stage.

Visit Your GitHub account

Go to your GitHub and click on the plus icon dropdown at the top right-hand corner of your profile. A list of options will drop down; select the New repository option and a new page will open up where you’ll have to choose a repository name.

Scroll to the bottom of that page and click the Create repository button there. The page that comes up will be an empty repository waiting for codes to be pushed to it.

Push Your Code

The next step is to push your code to the GitHub repository you just created. Open up your project in the terminal of your preferred code editor. E.g Vscode. Here you’ll be making use of the Git command line interface (CLI) to commit and push your work to GitHub.

The first command you’ll run in your terminal is the git init command to initialize git in your project.

Type in this command to add your code to the initialized project:

git add .

Next, commit your code using the first command below, and use the second command to rename the default branch of your repository to main.

git commit -m “write your commit message here"

git branch -M

You need to tell Git to connect your local repository with the hosted repository hosted on GitHub at the specified URL and to do this, you need to enter in this command:

git remote add origin your-repo-link

The last step in hosting on GitHub is pushing the project to the repository. Enter the command below on your terminal to push your code to your created GitHub repository:

git push -u origin main

Refresh the repository page on the browser window and you’ll see that all the code from your editor has been imported into your repository.

You might notice that there are some files or folders missing in your GitHub repository, like the node-modules folder from your root directory. This is because the node-modules file contains all the dependencies required for your project to run and by default, while creating your React app, git has been instructed to ignore that folder to manage the project size on your GitHub.

This won’t be an issue during hosting and deployment, so you shouldn’t worry about it.

Deploying on Doprax

This is the final stage in this tutorial. Here you’ll get to finally deploy your dockerized React app on Doprax to enable other users access your application with a deployed URL.

Sign up on Doprax

The first step in this stage is to sign up on Doprax. Visit the Doprax website and click on the Sign up button on the navigation menu at the top-right corner of the website. Doprax provides you with two options to sign up. You can sign up manually by inputting an email address and a password or you can sign up using your Google account. Sign up with whatever method you prefer.

After a successful sign-up, you’ll be navigated to your dashboard.

You’ll need to connect your GitHub account to Doprax and add credit to your Doprax account. Add credit to your account, as without this, you won’t be able to deploy your app.

There are various payment methods you can use to add credit to your account like; credit cards, different cryptocurrencies, and so on. Click the Add credit button to proceed with your payment. You can also do this by clicking on the “Billing” dropdown located at the left-hand side bar and selecting the “Add credit” option.

Doprax, just like any other hosting and deployment platform, requires authorization to access your GitHub account so that you can select a repository from your GitHub account to deploy.

To do this, go to your My Account option in your dashboard, click on the Connect to GitHub button on your dashboard, and a page will come up requiring you to grant authorization access to Doprax to connect and access your GitHub account. Click on the Authorize dopraxcom button to authorize Doprax.

After completing this process, you’ll be redirected to the authorized application, Doprax.

Now we already have a ready Dockerized React app on Doprax to make it easy for you to deploy by using the one-click installation feature. So there'll be no need for you to import the source code from the main repository of the app.

What you'll need to do is create an app space for your app, which is readily available in the app market.

Creating an App Space

To create an app space, click the Container Platform dropdown located in your dashboard’s left-hand panel and choose Create App Space. You must give your app space a name, choose a location, and select its size. The available size determines the price options.

Click the Create app space button at the bottom of the page once you’ve finished. After successfully creating your app space, you’ll be taken to a page where you can view all of its details.

The next step is to add an app.

To add an app on Doprax, click the Add New App button located in the "Apps" box in that same app details page. This will take you to the app market, where you'll see a list of all available apps on Doprax.

Click the App Space tab to see only the list of apps for app spaces. Select the React app option.

A page will open up containing details of the app and prompting you to select the app space you want to deploy the Dockerized React app to, select the one you recently created and click the Deploy button.

You'll get a success message letting you know that your app was successfully deployed and you'll be directed to a page like the one below:

This page shows you details about the deployed app, like the RAM storage and CPU but it isn't running yet.

Click on the blue play icon at the top to start the build process. The terminal at the bottom will show you the build process.
This shouldn’t take long to complete, depending on the size of your application. Once this is done, you should see a message “Main is now running" on the terminal, indicating that your app’s deployment process is complete.

On that deploy dashboard page, you can see the “Recent actions” table with the status of "succeeded,” meaning that the deployment was a success. And that’s it. The deployed URL for your app is now visible at the top and it takes you to the React application when you click it.

Seamless right? These are the steps involved in deploying a React app on Doprax.

Adding a Domain or Subdomain to your Doprax App

Adding a domain or subdomain to a deployed app simply means giving your application a familiar web address that people can use to access it online. For example, www.example.com is a domain. Subdomains come in this format: blog.example.com.
One cool feature that Doprax provides is the ability to add your own domain to your deployed application.

Add a domain or subdomain to your Doprax app

Click on the settings tab in that same app page on your dashboard.

Click on the Add domain button and a dialog box will pop up requiring you to enter in your domain or subdomain name in the input field.

Let’s say “codergirl.com” is your domain name. Enter it there.

If you want it to have a www version of your domain, toggle the Also add www version button. Once you’ve done this, click the submit domain button to submit.

After that, a new dialog box will open up where you’ll be asked to create a DNS record of type A. Click on the VERIFY button and this should connect your domain name to your deployed application.

Go back to the Deploy option on your dashboard to see that you’ve been provided with a new app URL consisting of your domain name.

If you wish to stop the app from running for any reason, click the small-squared stop icon, and your deployed app will stop running on Doprax.

You can start it up again anytime you want by clicking the blue play icon.

Conclusion

In this tutorial, you learned how to dockerize your React application to get it ready for deployment, how to host your app on GitHub, and finally, how to deploy the dockerized React app on Doprax.

With Doprax's easy-to-implement features, your app is now accessible and scalable to end users. Doprax not only provides hosting functionality for your web applications but also makes it simple to manage your web applications.