Parcel with gh-pages

[stychu]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "parcel-react-example",
  "license": "MIT",
  "scripts": {
    "start": "cross-env NODE_ENV=development parcel index.html ",
    "build": "cross-env NODE_ENV=production parcel build index.html --public-url ./",
    "predeploy": "yarn build",
    "deploy": "gh-pages -d dist"
  },
  "homepage": "http://stychu.github.io/testAldente",
  "dependencies": {
    "autoprefixer": "^7.2.1",
    "babel-preset-react-app": "^3.1.0",
    "gh-pages": "^1.1.0",
    "parcel-bundler": "^1.4.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "postcss": {
    "modules": false,
    "plugins": {
      "autoprefixer": {
        "browsers": [
          ">1%",
          "last 4 versions",
          "Firefox ESR",
          "not ie < 9"
        ],
        "flexbox": "no-2009"
      }
    }
  },
  "devDependencies": {
    "cross-env": "^5.1.1"
  }
}

{
  "presets": ["react-app"]
}

🤔 Expected Behavior

Basically, I wanted to publish simple react app to the GitHub pages with a usage of a parcel. Unfortunately, each time I try, app doesn't get published. I mean it does get published correctly to the repo and gh-pages branch but I can't see the app on homepage screen. I can't find a solution to this. Im not sure if this is related strictly to the parcel build or I did something wrong.. After running parcel build I can open my index.html from /dist and the app is working fine so it should work also on the gh-pages but it doesn't...
When I try this with the react-app-cli which is using webpack everything works just fine.

😯 Current Behavior

App doesn't update/run correctly after publishing to gh-pages.

💁 Possible Solution

---

🔦 Context

I want working app on gh-pages that is build with a parcel.

🌍 Your Environment

Software	Version(s)
Parcel	1.4.1
Node	v6.10.0
npm/Yarn	5.3.0/1.1.0
Operating System	Linux

[seifsg]

@stychu Hello! Have you tried adding adding the public url option?

Example:

parcel build entry.js --public-url ./

Source:

https://parceljs.org/production.html

[stychu]

@seifsg hmmm I did parcel build index.html --public-url ./ because doing

parcel build entry.js --public-url ./
does build only js and css and there is no index.html so cant access my site.

But with parcel build index.html --public-url ./ I got this files

But site doesn't working.. I can run this build localy and its working but not on gh-pages...

[seifsg]

@stychu sorry that was just an example brought from the official Parcel website.
Looking further on what you posted, I think the argument for the public-url option should be something like http://stychu.github.io/testAldente/

Please try this:
parcel build index.html --public-url http://stychu.github.io/testAldente/

[stychu]

@seifsg Doesn't work either. I've noticed that this is added to the index.html so I;ve also tried with adding
https://github.com/stychu/testAldente/tree/gh-pages but this also doesnt work

[seifsg]

@stychu I've looked into your repo at https://github.com/stychu/testAldente/tree/gh-pages
Please check the settings that this branch 'gh-pages' is the one for github pages to serve from.
Then try again with parcel build index.html --public-url /testAldente/
I hope it works.

[stychu]

@seifsg Awesome it works !!! Thank you for help !

[AlberErre]

Thank you @seifsg - I was facing the same issue and parcel build index.html --public-url /my-folder-name/ has solved it!

[rhvdbergh]

Thank you guys so much! I ran into the same difficulty with parcel, but @seifsg's solution worked for me too.

[ashlink11]

Thank you so much! Worked for me as well!!!
My work: https://github.com/hashbangash/dojo

[philldev]

@stychu

@stychu sorry that was just an example brought from the official Parcel website.
Looking further on what you posted, I think the argument for the public-url option should be something like http://stychu.github.io/testAldente/

Please try this:
parcel build index.html --public-url http://stychu.github.io/testAldente/

thanks so much.

[OxiBo]

Has anyone had an issue with loading styles to github pages? I am using scss and styles won't load, only html

[fawazahmed0]

This worked for me:
parcel build index.html --public-url ./

[shikhars]

Has anyone had an issue with loading styles to github pages? I am using scss and styles won't load, only html

I am facing the same issue. Can you share the solution if you found it ?

[stcorbett]

tldr: shut down your parcel dev server (aka: npm start) while you deploy.

I found this thread for a similar issue: deploying to github pages where sometimes my image would load from the proper paths, sometimes I would get all 404 responses as the paths were off in my index.html as deployed on github.

The parcel dev server will write files to /dist with paths for your development env which can be different than the needed paths for prod. My deploy script was removing /dist before running parcel build but my dev server, parcel ./src/*.html, would re-write the dev version of index.html with local paths before the build script wrote the deploy versions. The rest of the script then deployed the dev version of index.html.