How to publish on Github Pages with create-react-app and react-router

Now I will be assuming a couple of things:

  • You have a GitHub account and you created a repository for your app.
  • You created a react app either with npx create-react-app <appName> or npx create-react-app <appName> --scripts-version=react-scripts-ts
  • Then let’s get started.

Add gh-pages

Run npm i -D gh-pages\

Configure your package.json

First, you need to tell the react app where it will be hosted. You need to add to your package.json the attribute ‘homepage’:

    { ...
    "homepage": "https://<UserName>.github.io/<RepositoryName>/"
    }

Additionally, you need to adjust the scripts attribute.

    "scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    },

Now you can run npm deploy and it will automatically create a branch, build the app and deploy it into your repository. It will even configure your github repository that the branch gh-pages will be now hosted.  So you can simply navigate to  https://<UserName>.github.io/<RepositoryName>/ and see the result. # Configure React-Router Before we can publish we probably have to change a couple of things in the configuration of the react-router.

  1. We need to set the basename. The basename ensures that all links of the Router are relative to this basename. To configure the basename you can use the variable process.env.PUBLIC_URL this ensures that you only need to configure the url via the package.json.
  2. We need to ensure that we are using aHashRouter instead of the typical BrowserRouter . The difference is that the hashRouter adds a ‘#’ into the url and upon a refresh of the page you will not see a 404 Github Error

Your index.js should look something like this:

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { Router } from 'react-router';
    import createHashHistory from 'history/createHashHistory';
    
    const hashHistory = createHashHistory({ basename: process.env.PUBLIC_URL });
    
    ReactDOM.render(
        <Router history={hashHistory}>
          <App />
        </Router>,
      document.getElementById('root') as HTMLElement
    );

Deploy

Now can simply run `npm deploy` and your site should be published on https://<UserName>.github.io/<RepositoryName>/

Note: Since the build is published on a separate branch, your main repository may contain different src than what is published. So you still need to ensure that you commit your changes to your repository.

CodeWars: 7kyu – The Highest Profit wins

I am exercising to get back into Python. Even though the solution to this exercise is quite straightforward, you could tweak the code a little bit so that it runs a little faster.

Basically, with min() and max(), the list would need to be iterated over 2 times. You could rewrite the code so that you only iterate once over the array. Overall I choose to stick with my initial solution as it is better readable, thus making it easier to maintain in the long run.

def min_max(lst):
    '''
    Exercise: https://www.codewars.com/kata/the-highest-profit-wins/train/python
    Example:
        min_max([1, 2, 3, 4, 5]) => [1, 5]
    Args:
        lst: A list of numbers
    
    Returns:
        A list with two entries of the min and the max value of the list
    '''
    return [min(lst), max(lst)]

CodeWars: 6kyu – Counting Bits

You got numbers, you want to know how many bits are flipped to a 1

Sourcehttps://www.codewars.com/kata/bit-counting/train/python

Approach:

Well, first we need to convert our number from an integer to a binary number.

There are two ways to do this:

Variant 1: String Formatting

"{:b}.format(number)"

Variant 2: Build In a binary converter “bin(number)”

Then well now we just have to count the occurrences of ones.

def count_bits:
   return bin(number).count(str(1))

Note: It is important to count the instances of ones as strings of “1” instead of integers of 1. This is the case because we converted the int to a string and are now looking for strings instead of numbers.