Deploying React.js Application on DigitalOcean App Platform

Introduction

• Learn to deploy React.js app on DigitalOcean App Platform.
• Like, comment, share, and subscribe to the channel.

Prerequisites

• Computer - Must have a computer.
• Node.js - Ensure Node.js is installed.
• DigitalOcean Account - Sign up if you don't have one.
• GitHub Account - Sign up if you don't have one.
• Code Editor - Use an editor such as VS Code.

Steps to Deploy

Create GitHub Repository

1. Log into GitHub.
2. Click the plus icon (top-right) > New Repository.
3. Name the repository and click 'Create repository'.
4. Follow the instructions to check out the repository.

Setting Up React App

1. Confirm Node.js installation.
2. Open the terminal and navigate to the desired project directory.
3. Install Create React App globally: npm install -g create-react-app.
4. Create the project: create-react-app [app-name].
5. Change to the project directory: cd [app-name].
6. Initialize Git: git init.
7. Add files to Git: git add ..
8. Commit changes: git commit -m "Initial commit".
9. Add remote repository: git remote add origin [repository-URL].
10. Set branch to main: git branch -M main.
11. Push code to GitHub: git push -u origin main.

Deploying to DigitalOcean

1. Log into DigitalOcean and navigate to the Apps page.
2. Click on 'Create App'.
3. Select GitHub and manage access, then authorize DigitalOcean.
4. Select the repository and keep the branch as main.
5. Configure the build phase:
   • Change resource type to 'Static Site'.
   • Set build command: npm run build.
   • Set output directory: build.
6. Click through the prompts and finalize by clicking 'Create Resource'.
7. Wait a couple of minutes for deployment to complete.
8. DigitalOcean provides a custom domain which can be customized.

Conclusion

• DigitalOcean automatically deploys changes pushed to the main branch.
• You can now focus only on coding.
• Successfully deployed a React.js application on DigitalOcean.

Outro

• Like, comment, share, and subscribe to the channel.
• Thank you for watching!