Deploying React App to Github Pages (gh-pages)

[Intelliflex]

I have looked at posts regarding deployment to gh-pages but these do not work. I get a blank page (which has the title defined in my index.html - so I know it is there) file and can see 404 errors in the console where page is unable to open react.js and react-dom.js. If I unpack the gh-pages branch in my repository to a local test machine it works fine. I have no problems achieving the same with react app created using create-react-app.

GET https://intelliflex.github.io/iflex-lib-snowpack/_snowpack/env.js net::ERR_ABORTED 404
index.js:5 GET https://intelliflex.github.io/iflex-lib-snowpack/_snowpack/pkg/react-dom.js net::ERR_ABORTED 404
index.js:4 GET https://intelliflex.github.io/iflex-lib-snowpack/_snowpack/pkg/react.js net::ERR_ABORTED 404

Is someone able to provide guidelines to publishing a react app using Snowpack to gh-pages?

My process has been
npx create-snowpack-app mylibraryname --template @snowpack/app-template-react
Add home Page to package.json
"homepage": "https://intelliflex.github.io/mylibraryname",
Add Scripts to package.json

 "predeploy": "snowpack build",
    "deploy": "gh-pages -d build"

deploy using yarn deploy

PS: I have also tries adding <base href="%PUBLIC_URL%" /> to head of index.html and creating a .nojekyll file

Help appreciated

[Intelliflex]

OK I managed to get this partially working. Gh-Pages serves its pages relative to the root of the git hub user name. This meants that /build refers to the build directory in the users main github page and not the repositiry. AddingbuildOptions: {baserUrl: '/library-name'}fixes this. I still have a problem that images had relative references are given a proxy name eg: logo_svg_proxy_default = "/build/library/assets/logo.svg" . The /build cannot be resolved however manually removing the leading slash fixes the problem. Any suggestions of how this can be done, I have tried using Alias and Proxy API paths without any success.????

[melissamcewen]

Hi @Intelliflex thanks for reporting. I don't know why this is happening. I can ask around our community to see if anyone has any experience working with gh-pages.

[joepio]

TL;DR for people looking for a solution

• set buildOptions.metaUrlPath to something without an underscore (e.g. dist)
• set optimize.bundle to true to create a single .js file, hopefully without underscores
• manually change the index.html file to set some absolute URLs: <script type="module" src="https://joepio.github.io/atomic-react/dist/index.js"></script>

TL;DR for Snowpack maintaners

• GithubPages hosts sites on paths (which break relative URLs), and ignores _underscores (which break the _snowpack folder and some other files).
• The baseUrl setting does not work (as far as I can tell)

Longer version

Had a similar problem with my repo. My issue was that that the script tag in index.html linked to the relative path without the github project name in it of the index.js. So it linked to https://joepio.github.io/index.js instead of https://joepio.github.io/atomic-react/index.js.

Luckily, there's a snowpack build option for this:

buildOptions: {
    baseUrl: '/project-title',
    /* ... */
  },

Unfortunately, this didn't work for me (I guess that's a bug), so I ended up manually setting the absolute path in index.html.

Second issue was that the _snowpack directory is ignored by github pages, because of some conventions in Jekyll. To undo that, you could add a .nojekyll file to /build, before publishing... Which is what I did, before discovering yet another build option:

  buildOptions: {
    baseUrl: '/atomic-react',
    metaUrlPath: `dist`,
    /* ... */
  },

That worked. I suggest renaming the _snowpack to snowpack or dist or something by default to prevent this [issue.

Almost all my files seem to resolve, yay!

But there's a new problem... There's one file with an underscore:dist/pkg/common/_commonjsHelpers-913f9c4a.js... Which seems to be blocked by Github, since they respond with a 404.

So... I decided to bundle my app into a single .js file. And that worked!

[AsaAyers]

I got mine to work by removing the leading slashes in public/index.html, but when I bundle it injects a CSS file that isn't referenced. Using buildOpertions: { baseUrl: './' } got it to inject the CSS file with a relative path so I didn't have to hard-code the name of my project in the URL.

[Devorein]

@AsaAyers Thank you for that solution, but unfortunately, it only works for the CSS as you said. Any idea how to make that work for the generated js file as well <script type="module" src="/dist/index.js"></script>?

[melissamcewen]

Just saw this blog post and thought it might also prove helpful: https://blog.kaiser.lol/snowpack-github-actions/

[gpatarin]

Hello,
Using the react-typescript template the logo.svg gets 404.
Seems like baseUrl is not used as a prefix in .proxy.js output files :
logo.svg.proxy.js

export default "/dist/logo.svg";

We should be able in our code to do

import React from 'react';
import logo from './logo.svg';

const App = () => (
  <img src={logo} className="App-logo" alt="logo" />
);

and not have to do when using github-pages (can also be valid for front-end served on a subdirectory)

import React from 'react';

const App = () => (
  <img src="dist/logo.svg" className="App-logo" alt="logo" />
);

[ndom91]

Just wanted to pop in here for others coming across this in the future, I had some extraneous values in my snowpack.config.js which were breaking the bundling step when I had optimize: { bundle: true }.

My whole snowpack.config.js looks like this:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-typescript'],
  workspaceRoot: '../../',
  routes: [],
  optimize: {
    bundle: true,
  },
  devOptions: {
    open: 'none',
  },
  buildOptions: {
    metaUrlPath: 'snowpack',
    baseUrl: './',
  },
};

(The workspaceRoot setting is only because this is an example webapp for a package where it has to grab the actual package code out of the directory a few levels above - full usage example: ndom91/react-timezone-select - see example directory for snowpack stuff)

And works well in Github Pages finally 👍