1Push Code to GitHub
First, upload the frontend code to GitHub.
1.1 Create GitHub Repository
- Go to github.com/new
- Enter Repository name:
my-admin - Select Public (for free hosting)
- Click "Create repository"
1.2 Push Code
Run in the frontend folder (my-admin):
# Initialize Git
git init
# Check .gitignore (node_modules should be excluded)
cat .gitignore
# Add all files
git add .
# First commit
git commit -m "Initial commit"
# Connect to GitHub (replace YOUR_USERNAME with your account)
git remote add origin https://github.com/YOUR_USERNAME/my-admin.git
# Push
git branch -M main
git push -u origin mainNew to Git?
Just copy and paste the commands above.
Only replace YOUR_USERNAME with your GitHub username.
Term Tip: Repo / Branch / Push
- Repository: A place where your code and history are stored.
- Branch: A separate line of work. Deploy usually tracks
main. - Push: Upload your local commits to a remote GitHub repository.
- Deep dive: Git Basics
2Deploy with Cloudflare Pages
Cloudflare Pages hosts static sites for free.
2.1 Cloudflare Dashboard
- Log in to dash.cloudflare.com
- Click "Workers & Pages" in the left menu
- Click the "Create" button
- Select the "Pages" tab
- Click "Connect to Git"
2.2 Connect GitHub
- "Add account" then connect your GitHub account
- Select the
my-adminrepository you just created - Click "Begin setup"
Term Tip: Domain / DNS
- Domain: The human-readable address users open in a browser.
- DNS: The system that maps domain names to actual server addresses.
- Deep dive: DNS Basics
2.3 Build Settings
2.4 Set Environment Variables
Set the API URL in the "Environment variables" section. For now, leave it empty since we're using the local backend.
After Backend Deployment
After deploying the backend to Cloud Run or similar, set the VITE_API_URL environment variable
to the backend URL.
Click the "Save and Deploy" button to start the build.
3Verify Deployment
Once the build is complete, a URL will be generated:
Your site is live at
(Your actual URL may differ)
You can now share this URL with your friends!
4Backend Deployment (Next Step)
Currently only the frontend is deployed.
The backend still only runs locally (localhost:8000).
Backend Deployment Options
To deploy the backend, choose one of the following:
- Google Cloud Run - Free tier available, auto-scaling
- Railway - Easy deployment, starting at $5/month
- Render - Free tier available, slow cold starts
For a detailed guide, see the Cloud Run Deployment Guide.
For now, test the frontend deployment while running the backend locally. Backend deployment will be covered in the next learning cycle.
Getting 404 on Page Refresh?
If you use React Router, refreshing the page may result in a 404 error.
Create a public/_redirects file and add the following:
For detailed solutions, see the SPA 404 Troubleshooting guide.