Build a Native(ish) React App in 5 Minutes

2 min readOct 30, 2020

So you have a great idea for an app, but you don’t want to have to go through the App Store or the Google Play Store to get it on your phone. Here’s a quick (and free) way to do it, by hosting the app on github pages and then adding the link to your phone’s home screen.

We’re going to be usingcreate-react-app and gh-pages

npx create-react-app my-awesome-app
cd my-awesome-appnpm i --save-dev gh-pages

After typing all of this, you should have a folder named my-awesome-app and associated files.

Now, let’s set up the publishing to github pages:

Now, in your package.json file, add the following to the scripts section:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Below the scripts section, add the link to your page:

"homepage": "https://<username>.github.io/my-awesome-app",

replacing <username> with your github username.

Now, in your terminal, add the link to your github:

git remote add origin https://github.com/<username>/my-awesome-app.git
git push -u origin master

Next, to deploy your site, type npm run deploy

And voila! Your site should now be live at <username>.github.io/my-awesome-app/

(don’t forget to include the trailing ‘/’)

To make the web app feel like a native app, add to your phone’s home screen:

iPhone/Safari: when on a page, click the share button in the lower left, then ‘Add to Home Screen’
Chrome/Android: when on a page, click the menu button (3 dots in upper right corner) and then ‘Add to Homescreen’

You should now have an icon for your new web app on your home screen.

Interested in adding a custom domain? Check out my tutorial here: https://joelmasters.medium.com/how-to-build-and-deploy-a-react-website-with-custom-domain-in-10-minutes-17d953d2a715

Beyond the 5 Minutes

To change the icon that appears on the homescreen for your app, edit themanifest.json file that comes with create-react-app, icons property.

For iOS, use icons that are 180x180 or 192x192 pixels, without a transparent background. For example:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "images/icon180x180.png",
      "sizes": "180x180",
      "type": "image/x-icon"
    },  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Thanks for reading!

Build a Native(ish) React App in 5 Minutes

Written by Joel Masters