Build nav issues

[msimonc]

Hi, thanks for this,

Before I could yarn build then run a local server I had to change servedPath to ''

Now it works except for the subroutes which break because 'about/' is inserted into the chunk fetches:

http://localhost:8080/about/static/js/Team.3a8694e2.chunk.js

[jknanda78]

Hello Mark,

First of all, thank you for taking some time looking into my GitHub.

Regarding the issue that you are seeing is because of changing the servedPath. You need not have to do that. The base path has been taken care of in here: https://github.com/jknanda78/code-splitting-dynamic-routing/blob/master/sample-app/src/app/store.js#L16. And if you click the live-demo URL i.e., https://jknanda78.github.io/code-splitting-dynamic-routing/, you will find the base path has '/code-splitting-dynamic-routes/' and it works with sub-routes.

Please let me know if that didn't work for you. I would love to hear from you.

[msimonc]

Hi JK, no worries, but if I revert my change: On a mac, in the sample-app folder, running yarn build; http-server build/ when I browse to localhost:8080 I get: http://localhost:8080/code-splitting-dynamic-routing/static/js/main.bd3b2fb9.js

Thanks mate,

[jknanda78]

Hey Mark,

Thanks again for your quick response.

Just to confirm you should be using either "npm start" or "yarn start" (which internally executes node scripts/start.js) based on https://github.com/facebook/create-react-app.

I just tried "yarn start" and it's working as expected.

I would love to hear back.

[msimonc]

Hi JK, Yes but npm/yarn start are for dev only right (I hope)? npm run build should work stand alone to create the production version.

Thanks and where are you BTW? I'm visiting Japan from Australia.

[jknanda78]

Hello Mark,

Ah! now I get it now. Sorry about that.

Please revert all your changes. Open package.json file and look for "homepage" property. Change the property value from "https://jknanda78.github.io/code-splitting-dynamic-routing/" to "./". Then "yarn build" and "http-server ./build".

I tried and it's working as expected. Kindly let me know.

BTW I am from San Fransico, Bay Area.

[msimonc]

Thanks JK, it runs now but I still see the original subroute issue,

[jknanda78]

There is something weird. When I ran the first time it worked as expected (also checked the logs). But subsequent build, I am seeing the same issue.

Will keep you posted. Thanks for your patience.

[jknanda78]

Hey Mark,

Could you please change the "homepage" property value from "./" to "http://localhost:8080" in package.json and try again?

[msimonc]

Thanks JK, fixed. But if I make that field an empty string I still get the same url which of course won't work in production.

It's actually been quite hard to find a template with everything you're doing, so nice project!

One more thing is that if you refresh the page to: http://localhost:8080/about/team it renders what you would see if you naved to http://localhost:8080/about

[jknanda78]

Thanks Mark for checking. I will keep you posted on the refresh issue.

Meanwhile, I published an article on HOC's.

[jknanda78]

Hello Mark,

I have a small update for you. I fixed the browser refresh issue for the dynamic sub-routes, but it's a hack till I find a better fix.

window.onload = function() {
  const pathname = window.location.pathname;
  const ifprod = process.env.NODE_ENV !== 'development';
  const prodpath = pathname.replace('/code-splitting-dynamic-routing', '');
  const path = ifprod ? prodpath : pathname;
  const len = path.split('/').length;

  if (len > 2) {
    store.dispatch(navigateToScreen(path));
  }
};

Ref: https://github.com/jknanda78/code-splitting-dynamic-routing/blob/master/sample-app/src/utilities/dynamicImport.js#L9

Let me know your thoughts.

[msimonc]

Thanks for that work around. So the advantage of having separate route specs for each component is keeping everything together or anything else that won't happen by using a single root level spec?