Utilize baseURL to allow for easy local development and alternative gh-pages

[Oatelaus]

Currently there exists an issue where certain resources are required in from static locations or links to pages only work in certain environments.

Currently I notice HTMLWebpackPlugin's publicPath is being used, it would be best to use baseURL as this would accomodate the issue which github pages poses to relative links.

This change would require the removal of the html-loader, but I believe this is currently not in use anyway.

This would allow setting baseURL based on options.mode in the webpack config. In localhost, this can be set to localhost:8080 and all relative links will point towards that, whereas github pages would allow for https://ceadoor.github.io/cea.ac.in/ and this would allow us to drop links such as /cea.ac.in/about to /about.

[abhijithvijayan]

@Fedelaus It is considered to be a good enhancement.

[Oatelaus]

Thanks for the response. I will test if these changes have the desired effects and submit a further pull request.

[abhijithvijayan]

@Fedelaus publicPath was set in a way that main.js was available to files locally and while pushed to gh pages

See if your commits find the solution

Thanks

[Oatelaus]

@abhijithvijayan by setting <base> to localhost:8080 and removing publicPath as a definition this should also solve that issue. I believe this also fixes the issue with always pointing at this repos github pages, rather than the current builds repo too.

I will update you.

[abhijithvijayan]

@Fedelaus okay.

[ashikmeerankutty]

@Fedelaus May be we can use an environment file to set the base_url so that we can use travis to set the variable in the production. I never thought this was a big deal but now may be I can also have a look at the config file so as to fix the issue with the path in the production and the development environment.

[Oatelaus]

@ashikmeerankutty that is what I was thinking.

The current proposed changes are:

• Add <base> to every HTML file (this can be done manually, or done via another webpack plugin.
• Create an environment.js file of which will be populated with values used within the build process.
• Remove html-loader to allow for HTMLWebpackPlugin to insert variables into templates.
• Utilize the variable within the
• Drop publicPath.

I have yet to attempt this and is just theorized currently.

[ashikmeerankutty]

@Fedelaus I found an alternative solution for this rather than messing up with the webpack config. All these issues are caused because of the link in the production https://ceadoor.github.io/cea.ac.in/ as there is a cea.ac.in/ in the base url but if we don't specify that in the html the browser normally check for the origin path https://ceadoor.github.io/. As HTMLWebpackPlugin does not change the path in the html files it is hard to work in the production and the development environment.

In your approach of adding a public path in the HTMLWebpackPlugin and specifying it requires a lot of manual work as we need to change all the html files to add a public path to the urls with lodash.

Rather than going for that we can actually do the whole thing using javascript so that if the env is production we can append cea.ac.in/ to all the urls. This is just a work around for now.

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    window.location.assign("http://ceadoor.github.io/cea.ac.in/"+element.getAttribute("href"))
    return false;
  }
};