Build a Native(ish) React App in 5 Minutes

Photo by Bagus Hernawan on Unsplash

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

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:

Login to your github account. Create a new repo titled ‘my-awesome-app’.

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

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

replacing <username> with your github username.

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

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:

Thanks for reading!

Creator of Goalsmash.net. Help others achieve their goals. Get paid.