Deploying a React project marks a big moment in sharing your work globally. DigitalOcean offers reliable hosting, while GitHub Pipeline automates the process. This guide dives into deploying React(Nodejs) on DigitalOcean using GitHub Pipeline, much like our previous Spring Boot project deployment. We’ll walk through each step, helping you master deploying your React apps to the cloud effortlessly.
First things first, ensure your Spring Boot project is GitHub-ready. Version control is a developer’s best friend, enabling collaborative development and easy deployment. Initialize a Git repository for your project and push it to GitHub.
DigitalOcean’s Droplets provide a reliable and scalable environment to host your applications. Here’s an overview of the deployment process:
Claim $200 credit for your DigitalOcean account here!
Create a Droplet: Access your DigitalOcean account and create a Droplet. Choose the specifications that align with your project requirements, select a data center region, and set up SSH keys for secure access.
To ensure compatibility with your React project, it’s crucial to have the correct versions of node installed on your DigitalOcean Droplet. Follow these steps to set up the environment:
1. Update the Droplet: sudo apt update
This command fetches the latest package information from the repositories.
2. Install npm:
sudo apt install npm
This command installs node providing the necessary tools and runtime environment to build and run your React application.
3. Validate Installations:
Once the installations are complete, verify the versions of npm to ensure they match your project requirements.
Automating the deployment process using GitHub Actions involves setting up a self-hosted runner on your DigitalOcean Droplet. Here’s a detailed guide:
1. Creating a Self-Hosted Runner:
- Go to Repository Settings -> Actions -> Runners.
- Create a new self-hosted runner for your repository. Select the Linux environment to align with your Droplet configuration.
2. Configuring the Runner on the Droplet:
Connect to your Droplet using SSH and follow the steps mentioned in the runner like this. Execute these commands in your droplet machine till config command.
If the config command requires a non-sudo user, create the user with the necessary permissions before executing the ./config.sh command.
After it run:
./svc.sh install
./svc.sh start
3. Creating Workflow for Deployment:
In your repository, create a workflow file (e.g., .github/workflows/deploy.yml) with the deployment steps. Here’s an example:
name: Deploy Reactjs site to dropleton:
push:
branches: [branch_name] // replace branch_name with your branch
pull_request:
branches: [branch_name]
jobs:
build:
runs-on: self-hosted
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "16"
cache: npm
- name: Debug Port 3000 Usage
run: |
PORT_IN_USE=$(lsof -i tcp:3000 -t)
if [ -z "$PORT_IN_USE" ]; then
echo "No process is using port 3000"
else
echo "Process using port 3000: $PORT_IN_USE"
echo "Killing process $PORT_IN_USE"
kill -9 "$PORT_IN_USE"
echo "Process killed"
fi
# Delete package-lock.json and node_modules
- name: Clean Up
run: |
rm -rf package-lock.json node_modules
- name: Install dependencies
run: npm install --force
- name: Build Project
run: npm run build
- name: Start server
run: sudo npm run start &
Once successfully created, commit this and push it into your repository. Your project will be successfully deployed and you will be hit query using ip4v of droplet with server port.
