1

I'm working on an angular 2 TypeScript project built off of Angular 2 Webpack Starter. I am having trouble hosting the site live. It's working great when I use npm run server and check localhost:3000

enter image description here

and also it works great when I run npm run server:prod and check localhost:8080

enter image description here

Nice!

I then go to host the site through the Github gh-pages branch. My project is named "SafeFoods" and gh-pages adds an extra SafeFoods into the path here in the address bar. The problem with this is that I have files looking to be loaded at a path that doesn't have SafeFoods (but is otherwise identical).

Doesn't work when hosted live

I have tried changing "baseUrl" in the webpack.common.js file, but this breaks the site when I run the dev server and prod server!

Does anyone know how I can make it so that the site works in all three situations? thanks.

live hosted site: https://jimtheman.github.io/SafeFoods/ original repo: https://github.com/JimTheMan/SafeFoods

Jimothy
  • 87
  • 1
  • 8

1 Answers1

0

I see your index.html only include url with an absolute path

 /assets/icon/apple-icon-57x57.png

You should use relative paths only: assets/icon/apple-icon-57x57.png

See "GitHub pages and relative paths"

In an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.

Of course, using Jekyll would be easier:

In _config.yml, set the baseurl option to /project-name -- note the leading slash and the absence of a trailing slash.

Now you'll need to change the way you do links in your templates and posts, in the following two ways:

When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css -- note the slash immediately following the variable (just before "path").

When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} -- note that there is no slash between the two variables.

Community
  • 1
  • 1
VonC
  • 1,129,465
  • 480
  • 4,036
  • 4,755
  • That is how my project builds. How can I change it to output relative paths instead of absolute? – Jimothy Sep 10 '16 at 15:00
  • Is there a way to do it without using Jekyll? – Jimothy Sep 10 '16 at 17:44
  • @Jimothy From your project `AngularClass/angular2-webpack-starter/`, you can try a `css-to-string-loader` for webpack: https://github.com/AngularClass/angular2-webpack-starter/issues/730#issuecomment-229682254 – VonC Sep 10 '16 at 17:57
  • My issue is not that css is not being loaded. Please check my question. – Jimothy Sep 11 '16 at 12:06