Uploading and Deploying the Emoji Search App
Deployment of the Emoji Search App
Once the app works locally, we deploy it so others can try it. We will use GitHub and Netlify.
Upload Files to a GitHub Repository
In your project folder (emoji-search-app), initialize a git repo:
git init
git add .
git commit -m "Initial commit"
Create a new repository on GitHub (e.g. named emoji-search-app).
Add the GitHub repo as a remote and push your code:
git remote add origin https://github.com/yourusername/emoji-search-app.git
git push -u origin main
Now all your code is on GitHub.
GitHub Link: Emoji Search App Project in React
Deploy
To make the project live, first build the production bundle by typing the following command in the command prompt:
npm run build
This creates optimized static files in a build/ folder.
Prerequisites for Netlify:
- You have a working React app (e.g. random-joke-generator/)
- You've successfully run npm run build
- You have a free Netlify account
- You have the project in a GitHub repo
Go to Netlify and log in
- Click “Add new site” → “Import an existing project”
- Choose GitHub and connect your account
- Select the repository (e.g. random-joke-generator)
Configure Build Settings
When you deploy your React app (whether via GitHub or drag & drop), make sure Netlify settings are:
Setting | Value |
| Build Command | npm run build |
| Publish directory | build |
You can find this in:
Netlify Dashboard → Site Settings → Build & Deploy → Build Settings
Click Deploy Site
Netlify will build and host your site
After a minute or two, you’ll get a live URL like:
https://emoji-search-app.netlify.app/
After deployment, Netlify provides a live URL (like https://emoji-search-app.netlify.app). You can customize the site name if desired. The site is now live!
ReactJS Projects
