vendors and node_modules not found with github pages

[chaiyuxin]

Hi everyone,

I've been trying to host my angular2 project with Github pages so i tried few tutorials using Angular-cli like this : http://developer.telerik.com/featured/quick-angular-2-hosting-angular-cli-github-pages Or with the last version of Angular2 using this setup : https://angular.io/docs/ts/latest/guide/setup.html and pushing my project.

For the first solution, angular-cli is supposed to handle gh-pages using the following command line : ng github-pages:deploy. It creates a new branch called gh-pages, build the project and upload the sources. index.html works but when it tries to load the vendors i get a 404 as you can see : https://chaiyuxin.github.io/website

For the second solution I got the same 404 error but with the directory "node_modules". I can get any single files of the depository except the vendors and the node_modules, do you have any ideas about why ?

Thanks ! :)

[cirosantilli]

Try to produce a minimal example without angular to find what part of gh-pages does not work as expected.

Likely some file is not being served at some URL, find which file and focus on it.

But off the bat: can Angular be of any use without a dynamic server behind it?

[Mottie]

From http://developer.telerik.com/featured/quick-angular-2-hosting-angular-cli-github-pages/

For instance your repo already includes a .gitignore file, which includes a list of files and folders that shouldn’t be included in the repository, such as node_modules.

and maybe related to #807?

[asottile]

this article might be useful! Add a .nojekyll file to get node_modules back?

Worked for me here: https://github.com/pre-commit/pre-commit.github.io/pull/117

[chase-moskal]

@asottile

the established solution, of using .nojekyll to allow node_modules in github pages, is unfortunately not working for my project

• github project https://github.com/open-history/sandbox
• github pages websites (broken due to 404s) https://open-history.github.io/sandbox/

[asottile]

you've got a typo, no c ;)

[asottile]

seems you fixed the typo -- I'm seeing your styles load. Probably need to wait for the cache to expire

[chase-moskal]

@asottile — seriously, you're able to load this css file? https://open-history.github.io/sandbox/node_modules/chillax/dist/chillax-styles.css

i'm suspecting you're seeing the page's inline styles loading — but not those from under node_modules?

i'm running with my chrome cache disabled, and i've never seen github pages take this long, plus the index.html looks fresh to me, and worse, it is serving the .nojekyll file

ps — thanks so much for taking a look at this, greatly appreciated!

[asottile]

yep, this is what it contains for me :)

$ curl https://open-history.github.io/sandbox/node_modules/chillax/dist/chillax-styles.css
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   461  100   461    0     0    461      0  0:00:01 --:--:--  0:00:01  2270[data-chillax] {
  margin: 16em auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  overflow: hidden;
  height: 0;
  /* enforce 16:9 aspect ratio */
  padding-top: 56.25%;
  background: white; }

[data-chillax] [data-chillax-layer] {
  display: block;
  width: 100%;
  position: absolute;
  /* offset layers so they are centered in the 16:9 view */
  top: -50%;
  left: 0;
  right: 0;
  bottom: 0; }

/*# sourceMappingURL=chillax-styles.css.map */

I've seen github pages caches take hours to refresh.

[chase-moskal]

ahah! thanks so much @asottile!

I too can access the forbidden fruit the same way as you, with curl!

i'd be really curious to know what kind of caching is causing this — i imagine it cannot be clientside caching by my web browser, as i cannot load the file in firefox either — then I suspect it must be serverside caching of some kind, which interestingly discriminates between curl and my web browsers

now I just need to sit back and have a rum

cheers!!

[asottile]

Since github pages is entirely static content it's served out of a CDN -- just have to wait for the changes to propagate through I guess :)

[ericprud]

I wasn't able to get some tracked filed buried deep in a gitignore'd node_modules to show up in gitub.io. I tried adding fancy exceptions to .gitignore a la:

node_modules/*

!node_modules/n3/
node_modules/n3/*
!node_modules/n3/browser/

!node_modules/@shexjs/
node_modules/@shexjs/*
!node_modules/@shexjs/parser/
node_modules/@shexjs/parser/*
!node_modules/@shexjs/parser/browser/

but nothing they were 404s (tested from browser and curl).

Eventually, I just moved them to a directory outside of node_modules/ and everything worked. Does github.io fail to co anything inside a .gitignore'd directory?

[asottile]

@ericprud did you try what I posted above? https://github.com/isaacs/github/issues/844#issuecomment-313738805

[chase-moskal]

@ericprud

i personally found success serving node_module files, in this weird old project of mine with the following .gitignore

/dist
/coverage

node_modules/*
!node_modules/chillax/

and a completely empty .nojekyll file

here's an example file, from that project, being served via github pages from under that path in node_modules: https://open-history.github.io/sandbox/node_modules/chillax/package.json

in order to be served, the files must be tracked in the github pages branch (not ignored), and if they are under a node_modules you also need the empty .nojekyll file to be present

edit: keep in mind that i had to wait more than an hour before i saw the working results, sometimes github pages takes awhile to roll over, so make sure you give it plenty of time

goodluck and godspeed :wave:

[ericprud]

OK, I'm willing to concede that it works (once i fixed my screwed-up name), but you'll never convince me that it should. /me savoring his sour grapes...

Apparently, jekyll's default behavior is to ignore certain files. An old github blog suggests that only affects files starting with '_'. @chase-moskal, did you figure out that it was also ignoring node_modules, or might it be anything included in .gitignore? Anyways, what may have been desperation on your part looks like genius to me. Tx!

[chase-moskal]

@ericprud

did you figure out that it was also ignoring node_modules

yes, from what i recall, jekyll's default behavior will exclude node_modules by default

the addition of a .nojekyll file is apparently the way to opt-out

i don't understand why jekyll is opt-out rather than opt-in — i guess somebody at github is a big jekyll fan, but i don't use it for many projects, so i find it annoying... i digress...

as far as i know, jekyll's behavior is not influenced by the .gitignore

so there are two requirements for something under node_modules to appear in gh-pages

1. add a .nojekyll file to prevent jekyll from trashing your node_modules
2. add your specific node_module packages to the gh-pages branch
   • this can be done with clever .gitignore's
   • i think this can also be added manually to a gh-pages branch without touching gitignore, with something like git add --force node_modules/coolpackage or something

cheers! :wave: Chase