在没有互联网连接的 Windows 服务器上托管静态反应应用程序的最佳方法是什么

Question

I created a React application using Create-React-App and npm. I intended to simply build it with npm run build, and somehow host the produced build in a windows server.

This windows server doesn't have any internet connection (but I have admin right so I can install offline packages), then I tried :

• Hosting the built folder wihth IIS which didn't work (I couldn't find any good documentation on that)
• Packing the "serve" npm package to install it in the server (serve having a huge amount of dependencies, it's really difficult to get an offline package)

None of this seems to work... Any suggestion ?

Answer 1

One way of doing it:
1.Install NodeJS on Win Server that has Internet connection.
2. Install Express on that server and get your React app to work with Express. You might want to look for Express-React boilerplate to save time. I wrote such a boilerplate though it's written in TypeScript. There are others.
3. Copy NodeJS installer and Express installation to the server without Internet connection. Install Node. Then you can optionally use IIS as a proxy for better security.

Another (and more involved) way:
Instead of copying the Express installation, create a Docker container out of it. Then enable Hyper-V on the server without Internet connection and run the container there.

Yet another way (I don't recommend it):
Let IIS create NodeJS run-time environment while serving incoming request using iisnode as described here .

PS
Using Express won't add SSR to your React app. An SPA needs some server-side logic from the server. That's what I meant when suggested get your React app to work with Express . The logic includes mapping and redirects.

IIS has very powerful and flexible configuration and both mapping and redirects could likely be done declaratively by typing the configuration settings including regex(es). I never tried but have feeling this is possible. However it might be a challenge to find instructions about that online. The other way to do the mapping and redirects is programmatically rather than declaratively. Instead of writing it in C# for example, you can do it in JS or TypeScript, utilize Express and add IIS as a proxy.

What mapping and redirects are needed?

Mapping: Map the path /static/js/*.js to the physical folder where the script bundles are. CRA puts the bundles into my-cra-app/build/static/js directory. Note 1: You might want to double check that in the index.html file generated by CRA the path to script bundles (found at the bottom of the file) is indeed /static/js/<bundle>.js . Note 2: Better security would be achieved if the mapping is not wildcarded, rather more restricted eg it checks for a pattern match that includes the bundle name(s).

Redirects: Needed to implement the fallback required by all SPAs. The fallback is automatically added by CRA to webpack-dev-server. When people do deployment then in cases when they move from webpack-dev-server to Express or other server, they frequently skip the fallback which is mentioned here as the 3rd pitfall of React-Express integration.