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

npx create-react-app my-awesome-app
cd my-awesome-app
npm 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:

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:

"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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store