Is it possible to serve …

2 minute read

Is it possible to serve an additional html page with an nx app? And if so, how can I get about doing that? Note this is for a React app.

Responses:

you can reference any static assets/html pages using the assets  prop in your angular.json

I am sure the build config for react apps also contains something similar

I supposed this is then going to be in the workspace.json

Ok let me try look into that…

MY separate html page also has file.min.js that it runs. If I stick both the html and file.min.js file in my assets folder it doesn’t work…

so I’ve tried adding the html file to the assets path and the file.min.js to the scripts path but it’s still not recognized :confused:

what is file.min.js?

this is how it should look like, at least for angular apps… I am unsure about react…

Ok let me try that… Basically it’s for silently renewing my OIDC auth token. So the html is a silent_renew.html which runs a function from client-oidc.min.js This works fine in my normal react projects when I just place those 2 files in a public directory. But I’ve been having trouble with it since moving to nx.

Whenever I hot-reload (while coding), my token doesn’t renew anymore and that’s pretty inconvenient.

yeah it’s not working :disappointed:

I’ve got my silent_renew.html which looks like this:

<!DOCTYPE html> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;script src="./oidc-client.min.js"&gt;&lt;/script&gt; &lt;script&gt; new Oidc.UserManager().signinSilentCallback().then() &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; And my oidc-client.min.js file sitting in my apps/my-app/src/assets folder.

Then in the workspace.json I have the following:

"assets": [ "apps/my-app/src/favicon.ico", { "input": "apps/my-app/src/assets", "glob": "**/*", "output": "dist/apps/my-app" } ], This is in the projects > my-app > architect > architect > build > options > assets on that workspace.json file…

is the html file in the same folder?

Yes, both files are in apps/my-app/src/assets

and when you do production build, both files should end at dist/apps/my-app

That might be the case (I’ll check quick), then I guess follow up question… Is it possible to have those files available when I run nx serve my-app?

also - at least in angular app - that output porperty is relativ to the general outputPath prop

Yeah I’ve got that too: "outputPath": "dist/apps/my-app"

so outputPath is probably already set to dist/apps/my-app

in options

so the output in the assets config should be .

Ok let me rerun and see if that solves anything

and yes, those files should also be there in dev mode

Ok great, the files are there :tada: Still not working with the app functionality. But this is at least progress. Guess I have to dig into the config of my auth component now.

Thanks for your help, I really appreciate it!

ok good luck

another stupid question while I’m at it, where you could save me loads from a headache… For the oidc-client.min.js I obviously don’t need/want typechecking to be done on that file. But it’s freaking out.

I have the following error:

> Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. The file does not match your project config: apps\my-app\src\assets\oidc-min.js. The file must be included in at least one of the projects provided. Is it possible to set ts to ignore this file anywhere?

PS: I found the remaining piece of the solution to my auth stuff not working :tada:

Updated: