Deployment and Final Touches of Our Rock Paper Scissors App

By now, you’ve built a complete Rock Paper Scissors game using React and Vite. Your app lets users play against the computer, keeps track of scores, and even has a simple interactive design. The final step is making it available online so that anyone can try it out.

In this module, we’ll walk through deploying your app to GitHub and then hosting it on Netlify. We’ll also take a quick look at how all the files and components in your project come together.

1) Pushing Your React App to GitHub

Before deployment, your code should be stored safely online in a version control system. GitHub is perfect for this.

Step 1: Initialize Git
Open a terminal in the root folder of your Rock Paper Scissors app (where package.json is located), then run:

git init

git add .

git commit -m "Initial commit"

Step 2: Create a GitHub Repository

• Go to GitHub
• Click the + icon and choose New repository
• Name it something like rock-paper-scissors-react
• Keep it empty (no README, .gitignore, or license)
• Click Create repository

Step 3: Push Your Project
Back in your terminal, connect your local app to GitHub:

git branch -M main

git remote add origin https://github.com/your-username/rock-paper-scissors-react.git

git push -u origin main

If this is your first Git push, you may need to configure your username and email:

git config --global user.name "Your Name"

git config --global user.email "your@email.com"

Once done, your code will appear in your GitHub repository.

2) Deploying to Netlify

With your project on GitHub, the next step is putting it live with Netlify.

Step 1: Build the Project
Vite bundles your code into optimized files for the browser. In the terminal, run:

npm run build

This creates a new folder named dist/. That folder contains everything Netlify needs to serve your app.

Step 2: Sign Up or Log In to Netlify

• Go to Netlify
• Sign up for a free account (or log in)
• Click Add New Site → Import an Existing Project

Step 3: Connect GitHub

• Authorize Netlify to access your GitHub account
• Select your Rock Paper Scissors repository

Step 4: Configure Build Settings
Netlify will ask how to build your app. Use these settings:

• Build Command: npm run build
• Publish Directory: dist

Click Deploy Site. After a short build process, Netlify will give you a live URL like:

https://random-rps-game.netlify.app/

You can rename this under Site Settings → Change Site Name to make it personal, for example:

https://jaishree-rps-game.netlify.app/

Your app is now live on the internet.