Fix redirect to accommodate sub-directory deployment

[hangler]

As requested by @robinwn, provide a solution to fixing the callback URL. This will involve an .env with a setting.

[hangler]

@robinwn See 10eb3b6. There is now a new setting in ClientApp/.env: REACT_APP_CALLBACK_LOCATION. This needs to be set to the path the application gets deployed to, including the /callback endpoint.

Let me know if this fixes the problem!

[robinwn]

@hangler - Hi Frank - that should resolve the callback url. There is also the 'authority' and 'silent_redirect_uri' the need to be set in the deployment environment. When possible we like to create a deployment artifact that picks up settings in the context of where the app is deployed, eg. web.config with settings for a URI prefix of the app so it knows how to construct URLs when the app is proxied. The dotnet core api has a mechanism for this ie appsettings.<deploy_env>.json. However, for the front end (React, Angular, Vue etc) it looks like the only option is compiling the app with the final deploy settings. This means a build for every deployment environment we have - minimally, DEV, TEST and PROD. not ideal.

[hangler]

Ah, great, will factor those out as well and update when done.

Yes, I don't know of a better solution than building a different artifact for each environment, though maybe there are some floating around out there... But, building each separately is how I've always done it on other projects. At the end of the day, with these front-end apps, it's a problem of getting certain values (e.g. URLs to various APIs) into the client's browser without them hitting a back-end server to retrieve them. The cleanest way is to bake those settings into the JS file they're getting served.

[hangler]

Discussion here (caveat lector, I have only skimmed it): facebook/create-react-app#2353

[robinwn]

@hangler I had a read through both facebook/create-react-app#2353 and andrewmclagan/react-env (several times). This looks like a good way to go. I'll be able to run the same 'react-env' as shown here in the TFS deploy which is the logical equivalent of static content deploy or the Docker startup.

Since changing homepage in package.json, having the hosting root url in the REACT_APP_* env vars would be preferable from the perspective of the TFS build/deploy. eg. REACT_APP_PUBLIC_URL.

Let me know if you have any concerns about this.

[hangler]

@robinwn I do not in principle, the main question is how to implement it, which I will try to figure out now!

[robinwn]

@hangler the create-react-app example looks like a good starting point

[hangler]

Well that was easy 😄 I have it working locally. I added a bunch of environment variables to .env.; see f91cd2c. Also, I added the build artifact env.js to .gitignore, as of course it will vary depending on the environment it's built for.

[robinwn]

@hangler react-env does successive defaulting of various .env, .env.development etc so leaving in say .env.local would be useful for anyone else (say me :-) ) checking out the code.

[hangler]

@robinwn Definitely! The actual .env input file is still in the repo; it's just the env.js file that gets built from it that's been gitignored.

[hangler]

Resolved; now working on dev.