Building and deploying React Github Helper App to

React Github Helper App

Building and deploying React Github Helper App to

by John Vincent

Posted on August 14, 2019

Github Helper

Website Updates

For extensive discussions regarding, please see Overview of website

Website Validation Reference

Github Helper Application

Github Helper at Github

Github Helper at Digital Ocean

Balsamiq Wireframes

HTML Wireframes

Project Todos



GitHub API

Github Token

Accessing Github API requires a Token

  • Github
  • Settings
  • Developer Settings
  • Personal Access Tokens
  • Generate new token
  • Provide your github password
  • Note
    • Give it a meaningful name
  • Leave All scopes unchecked
  • Generate token

Copy and paste the Token into .env

GITHUB_TOKEN={github token value}


new webpack.EnvironmentPlugin(['HOME_URL', 'NODE_ENV', 'GOOGLE_APP_ID', 'GITHUB_TOKEN']),

which will pick up these variables from the environment.

Deploy React App to Subfolder

Deploy to subfolder mygithub of

Thus, home url is

This application is not using React Router.

The real work is to use absolute urls, not relative urls.


Change the public path for generated js files.

For production

	config.output = {
		path: DIST_FOLDER,
		publicPath: `${HOME_URL}/`,
		chunkFilename: '[name].[chunkhash].bundle.js',
		filename: '[name].[chunkhash].bundle.js'
	config.mode = 'production';
	config.devtool = 'cheap-module-source-map';

For development. Not strictly needed but might as well for consistency sake.

	config.output = {
		path: DIST_FOLDER,
		publicPath: `${HOME_URL}/`,
		chunkFilename: '[name].bundle.js',
		filename: '[name].bundle.js'


Do not use relative urls.

Preceed with <%= htmlWebpackPlugin.options.HOME_URL %>


For details, see Favicons

Made favicons as usual.

	<link rel="apple-touch-icon" sizes="180x180" href="<%= htmlWebpackPlugin.options.HOME_URL %>/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="<%= htmlWebpackPlugin.options.HOME_URL %>/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.options.HOME_URL %>/favicon-16x16.png">
	<link rel="manifest" href="<%= htmlWebpackPlugin.options.HOME_URL %>/app-manifest.json">
	<link rel="mask-icon" href="<%= htmlWebpackPlugin.options.HOME_URL %>/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#3071a9">
	<meta name="msapplication-config" content="<%= htmlWebpackPlugin.options.HOME_URL %>/browserconfig.xml">
	<meta name="theme-color" content="#ffffff">

Notice using HOME_URL from the environment.


Notice the subfolder

  "name": "MyGithub",
  "short_name": "MyGithub",
  "icons": [
      "src": "/mygithub/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
      "src": "/mygithub/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "index.html",
  "orientation": "landscape"


Notice the subfolder

<?xml version="1.0" encoding="utf-8"?>
            <square150x150logo src="/mygithub/mstile-150x150.png"/>

Create .env files


Create .env





Create /save-env/github-app/client.env




Async / await problem


Uncaught ReferenceError: regeneratorRuntime is not defined

Problem is caused by use of async/await.



Need to make changes to babel.

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime


  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false

Deployment Script

The script to deploy to required a few changes.


#  script to get, build and deploy MyGithub to nginx
# setup ssh to github
echo "setup ssh to github"
eval "$(ssh-agent)"
ssh-add -k ~/.ssh/id_github
cd tmp

echo "Removing clones directory $CLONES_DIR"
rm -rf $CLONES_DIR
echo "Creating clones directory $CLONES_DIR"
mkdir -p $CLONES_DIR
echo "Git clone desired repositories to $CLONES_DIR"
git clone $CLONES_DIR

#  Make MyGithub Client
# copy .env file
echo "Copy MyGithub client .env file to $CLONES_DIR/client"
cp -r $SAVE_ENV_DIR/client.env $CLONES_DIR/.env

echo "Make the MyGithub client"

echo "Npm install the MyGithub client $CLONES_DIR"
npm install
echo "Make MyGithub client production"
npm run production
echo "Minify $CLONES_DIR/dist/index.html"
cp dist/index.html dist/
html-minifier dist/ --remove-comments --output dist/index.html
rm dist/

# Delete files in nginx docroot
echo "Delete files in Nginx Docroot $DOCROOT_DIR"
rm -rf $DOCROOT_DIR/*

# Copy client files to nginx
echo "Copy client files to $DOCROOT_DIR"

# set permissions
echo "Setting permissions on $DOCROOT_DIR"
sudo chown -R jv:jv $DOCROOT_DIR
sudo chmod 0755 $DOCROOT_DIR
find $DOCROOT_DIR -type d -print0 | xargs -0 chmod 0755 # For directories
find $DOCROOT_DIR -type f -print0 | xargs -0 chmod 0644 # For files

echo "Restarting Nginx"
echo "Mongo Status"
echo "Completed"


cd bin

and restart nginx.


Website Validation

Update the OS, please see Maintaining Ubuntu Droplet

Website Validation Reference

Validation Results

Added github project to Snyk which reported no issues.

Ran the Favicon checker for No issues found.

Meta Tags are good.

Google Page Speed Insights reports all good.

Varvy Tools

Flag accessibility issues.



100 Performance
86 Accessibility
100 Best Practices
100 SEO

Is a Progressive Web App


  • Accessibility needs some work.
  • Check HTML for ARIA
  • Check HTML for Microdata
  • HTML5 Semantics

Coding Challenge Guidelines

Please organize, design, test, document and deploy your code as if it were going into production, then send us a link to the hosted repository (e.g. Github, Bitbucket...).

Functional spec

Create an application that allows for a user to search for a GitHub username.

On a successful search return, display:

  • the user's GitHub handle,
  • follower count,
  • a list of the user's followers (just the avatar is fine).

Since some users (e.g. mrdoob, holman, etc.) have many thousands of followers, GitHub only returns a portion of the followers with each request.

Create a "load more" button that, when clicked, fetches the next payload of followers. This button should persist until there are no more pages of followers to fetch.

The UX/UI is totally up to you. If you like, get creative and add additional features a user might find useful!

Technical spec

The front-end should ideally be a single page app with a single index.html linking to external JS/CSS/etc. Please take take this opportunity to demonstrate your CSS3 and HTML5 knowledge.

Please use ReactJS to complete the coding challenge

Host it!

When you’re done, host it somewhere (e.g. on Amazon EC2, Heroku, Google AppEngine, etc.).

Building and deploying MyTunes to johnvincent.ioRestricting Access with HTTP Basic Authentication