- Home
- Javascript
- Deploying the React Countdown Timer on Netlify
Deployment of the Project
Deploy the React Countdown Timer on Netlify
Once the app works locally, we deploy it so it’s live on the web.
Upload Files to a GitHub Repository
First, initialize a local Git repository for your project (if you haven’t already) and push the code to GitHub. For example:
git init
git add .
git commit -m "Initial countdown timer project"
git branch -M main
git remote add origin https://github.com/YourUsername/countdown-timer.git
git push -u origin main
Replace YourUsername and the repo name as needed. After this, your code is on GitHub.
GitHub Link: Countdown Timer App
Deploy
Now deploy to Netlify:
- Create a Netlify account (if you don’t have one) and login.
- New Site from Git: In Netlify, choose to link a new site from GitHub. Authorize Netlify to access your repos. Select the countdown-timer repository. Netlify should automatically detect it as a React app (created with Create React App) and set the build command to npm run build and the publish directory to build.
- Build Settings: Keep the defaults (build command: npm run build, publish directory: build). If needed, Netlify’s docs suggest these settings for CRA.
- Deploy: Netlify will pull your code and run npm run build. Once the build is ready, Netlify deploys the app to a live URL (it may generate a random subdomain, or you can set a custom name). If everything is set up, your React app is now live on Netlify.
- Continuous Deploy: Whenever you push new commits to GitHub (the main branch), Netlify will auto-deploy the latest version.
After deployment, Netlify will provide a URL for your project, e.g. https://your-site-name.netlify.app. Make sure to test it: open that link and verify the countdown timer works in the live environment.
ReactJS Projects Handbook
L










