Tag: github

Posted on

GitHub Action npm i fails when package.json includes fsevents

I’ve added a GitHub Action to a project, and when it runs on a push I get this error:

Run npm ci
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin"} (current: {"os":"linux","arch":"x64"})
npm ERR! notsup Valid OS:    darwin
npm ERR! notsup Valid Arch:  undefined
npm ERR! notsup Actual OS:   linux
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2022-09-11T23_52_20_527Z-debug-0.log
Error: Process completed with exit code 1.

fsevents is installed/added when doing ‘npm i’ as a dependency when building on MacOS, but it is MacOS specific, and since it’s included in my package.json it’s causing the build on GitHub to fail. Apparently according to this post, it can be optionally included on platforms where it’s available/needed by moving it from the dependencies section in package.json to optionalDependencies instead:

  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }

This resolved my issue, my GitHub Action now runs.

Posted on

Free hosting for React apps: GitHub Pages and gh-pages

I work primarily with AWS and so my first choice for deployment of personal React projects is either a public S3 bucket with Static Website Hosting option enabled, or CloudFront with an S3 origin.

While costs for a site with low traffic will typically cost you < $1 a month with these options, there’s other options available that can be used for personal projects for free. Many of these are covered in this LogRocket article. If you’re already using GitHub, using GitHub Pages to host a React app is pretty easy with the gh-pages utility.

Assuming you have an exising React project, add gh-pages to your app:

npm i --save-dev gh-pages

Edit your package.json and add a couple of scripts:

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

When you run ‘npm run deploy’ predeploy will run first to build your prod app, and then upload it to the remote origin for your git project. Note – this util assumes your GitHub remote repo is called origin, and it will fail with this error if it is called something else:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

If you name your remote GitHub repo something else, just add it again with the name origin ‘git remote add origin remote-repo-url’

When gh-pages runs, it uploads the built React app from ./build to a new branch on your repo called gh-pages. If you check the settings for your project, you should see the GitHub Pages settings for your app is configured to use this branch as it’s source:

If it’s using another branch change it to use gh-pages. Hit the url shown in the settings above to load your app from GitHub Pages!

Posted on

Deploying to github pages with gh-pages

Using gh-pages npm module to build and deploy a React app to github pages I get this error:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

According to this answer to an issue logged on the project, gh-pages expects your remote repo to be named ‘origin’ and doesn’t work if you use any other name when you ‘get remote add’ you repo for a project. Add the same repo with the name ‘origin’ and then it works as expected.

Posted on

Creating a static website with GitHub Pages

I have a bunch of note as html files and want to easily host them somewhere. I’m looking into using GitHub Pages. GitHub pages provide themes, but for html files you need to add a header to the start of each file in markup format using Jekyll Front Matter.

---
layout: default
---

Add a sample test page with a couple of headers and you end up with a page rendered with your selected theme:

Access your site with the url: https://[your-github-user-id].github.io/[repo-name]

Proudly powered by WordPress