Deploying a web app to the cloud or to a third-party server makes it accessible to everyone with the deployed URL. It is also a way of saving your app on the cloud. Learning how to deploy applications is very important for developers and businesses and Doprax offers you a seamless way of doing this.
Introduction to Doprax
Doprax is a 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, 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 the git add . command to add your code to the initialized project. Next, commit your code using the git commit -m “commit message" command and the git branch -M main command to rename the default branch of your repository to main.
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 git push -u origin main command on your terminal to push your code to your created GitHub repository. 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 and 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 hand 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. Now this dashboard as shown below contains some details that you’ll need to follow to enable you deploy your app to Doprax successfully.
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 pay with 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, 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 and this is the page that will be shown next on your screen.
Importing Source Code and Creating an App Space
The next step is to import a source code from your GitHub. Keep in mind that to do this, you must already have a GitHub repository created for the project you wish to deploy and you must have pushed your React app to the GitHub repo. If you’ve been following these steps from the beginning, it means you’ve already done this during step one and two.
To import a project from your GitHub account to deploy, you need to create an app space and an app on Doprax. I’ll walk you through how to do this.
To create an app space, click the “App Spaces” dropdown and choose “Create new app space” from the dashboard’s left-hand panel. You must give your app space a name, choose a location, and select its size. The available pricing for each determines the size 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.
Next step is to create an app. To create an app on Doprax, click the “App” dropdown on the left-hand panel and select the “Create new app” option. A page will open up where you’ll be required to give your app a name. In this example, I named my app “Doprax React App”. You’ll also need to select an app space for it. Select the app space you recently created. Once this is done, click the Create app button and you’ll be directed to your dashboard page.
Recent Apps
On your dashboard page, you’ll see the app you just created listed under “Recent apps”. Click the app box and it will take you to the Main dashboard of your app where you get to import a repository from your GitHub account to deploy. This is how the Main dashboard page looks like:
Click on the Import from my GitHub account button. This will bring up a list of repositories from your GitHub account and here you can select the one you want to deploy by clicking on the Import button at the far end of the repository’s name.
It can take a short while for the page to load once you click the import button since it needs to import the source code from the repository. After it has successfully imported your repo’s source code, this is the page that will come up:
Deploy Using Imported Source Code
Next step is to deploy your app using the imported source code.
On your left-hand panel, under the opened app name dropdown, select the “Deploy” option to open up the deployment page. This page shows you some details about the source code you’re about to deploy like the RAM storage and CPU. Click on the blue play icon at the top to start the build process. A terminal opens up from the bottom of the page showing 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 app you developed 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” option on the left-hand panel of 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 panel to see that you’ve been provided with a new deployed URL consisting of your domain name.
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 the power of Doprax hosting platform, your app is now accessible and scalable to end users. Doprax not only provides hosting functionality for your web applications, but it also makes it simple to manage your web applications.