Deployment and github actions

[mithi]

Deploy and setup continuous integration

[mithi]

I found out about this:

So you want to host your Single Page React App on GitHub Pages?

• https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

GitHub has this feature called GitHub Pages that converts a GitHub repository into a living, breathing website with a click of the button… as long as this repo is a) written in Frontend code only(Javascript, CSS and HTML) and apparently b) not written in React. If you’ve recently finished a React single page application like me that employs a heavy use of React’s Router Dom library to render certain components when users navigate to certain URLs then this guide is for you.

React-router problem with gh-pages

https://medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819

Gh-pages deployment problems with react-router

• https://github.com/facebook/create-react-app/issues/1765

  gh-pages does not natively support front-end routing. However I still am first being directed to my Page404 upon visiting the website.

GitHub Pages doesn't natively support single page apps

GitHub Pages doesn't natively support single page apps. When there is a fresh page load for a url like example.tld/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo. https://github.com/rafrex/spa-github-pages

References

• https://create-react-app.dev/docs/deployment/
• https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
• https://github.com/gitname/react-gh-pages
• https://blog.usejournal.com/how-to-deploy-your-react-app-into-github-pages-b2c96292b18e
• https://spin.atomicobject.com/2020/01/20/github-actions-react-node/
• https://dev.to/ajinkabeer/deploy-cra-to-github-pages-using-github-actions-44o7
• https://medium.com/@cmichel/how-to-deploy-a-create-react-app-with-github-actions-5e01f7a7b6b
• https://github.com/explooosion/react-build-with-github-actions/blob/master/.github/workflows/main.yml
• https://github.com/ruanyf/github-actions-demo/blob/master/.github/workflows/ci.yml
• https://github.com/actions/checkout
• https://github.com/actions/cache/blob/master/examples.md

[mithi]

Options on where to deploy

• netlify
• surge
• firebase
• zeit now

References

• https://jsramblings.com/what-options-do-you-have-for-deploying-a-frontend-only-react-app-to-production/
• https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/

[mithi]

Github actions examples

Install node dependencies

• https://github.com/actions/starter-workflows/blob/master/ci/node.js.yml
• https://github.com/actions/setup-node
• https://codyogden.blog/yarn-with-github-actions-ci-cd/
• https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions
• https://spin.atomicobject.com/2020/01/20/github-actions-react-node/
• https://medium.com/@cmichel/how-to-deploy-a-create-react-app-with-github-actions-5e01f7a7b6b
• https://github.com/marketplace/actions/cache
• https://help.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows
• https://github.com/marketplace/actions/github-action-for-yarn
• https://help.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows
• https://github.com/actions/cache
• https://github.com/ruanyf/github-actions-demo/blob/master/.github/workflows/ci.yml
• https://github.com/explooosion/react-build-with-github-actions/blob/master/.github/workflows/main.yml
• https://medium.com/@cmichel/how-to-deploy-a-create-react-app-with-github-actions-5e01f7a7b6b

[mithi]

Prettier

name: Format (prettier)

on:
    pull_request:
        paths:
            - '**.css'
            - '**.js'
            - '**.vue'

jobs:
    prettier:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v1

            - name: Install
              run: yarn install
              env:
                  CI: true

            - name: Run prettier
              run: yarn run prettier --write 'src/**/*.{css,js,vue}'

            - uses: stefanzweifel/git-auto-commit-action@v2.1.0
              with:
                  commit_message: Apply prettier changes
                  branch: ${{ github.head_ref }}
              env:
                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

https://stefanzweifel.io/posts/run-prettier-or-php-cs-fixer-with-github-actions/

[mithi]

https://github.com/mithi/hexapod/commit/fc765d81a6b65ca19dccea8196f88471f9580715