serving create-react-app behind a proxy with .env file giving white screen, errors and false positives
Question
I am trying to serve a CRA app from behind a nginx reverse proxy. I am getting a white screen and React is reporting false positive http fetch results, and unhelpful console log in the browser. The domain/static folder doesn't exist on the server and isnt created by created by react-scripts 3.3.
working (broken) example here:
https://react.syntapse.co.uk/rewired
.env file
PUBLIC_URL="https://react.syntapse.co.uk/rewired"
PORT=3120
WDS_SOCKET_HOST="https://react.syntapse.co.uk/rewired"
WDS_SOCKET_PORT=3121
nginx config:
server {
listen 80;
server_name react.syntapse.co.uk;
# rewired
location ^~ /rewired/sockjs-node/ {
proxy_pass http://0.0.0.0:3121/sockjs-node/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location ^~ /rewired {
proxy_pass http://0.0.0.0:3120/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
browser error log:
Uncaught SyntaxError: Unexpected token '<'
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
0.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
main.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map
network history on load show 200 on all bundles.
rewired 200 document Other 1.1 KB 112 ms Script
bundle.js 200 script rewired 1.1 KB 48 ms Script
0.chunk.js 200 script rewired 1.1 KB 52 ms Script
main.chunk.js 200 script rewired 1.1 KB 53 ms
Manifestmanifest.json 200 manifest Other 1.1 KB 145 ms
Otherfavicon.ico 200 text/html Other 1.1 KB 96 ms
The bundle files are referencing a static directory which just doesnt exist in the file path on my server. Where are the bundle files meant to live.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/rewired/static/js/bundle.js"></script>
<script src="/rewired/static/js/0.chunk.js"></script>
<script src="/rewired/static/js/main.chunk.js"></script>
</body>
the static location doesnt exist on my system and i can find the bundle files. where are they meant to be located for a default CRA app?
thanks
1 answers
solution1
0 2020-02-28 13:38:37
create-react-app in development allows you to disregard the backend while you develop the front end, and it does this by running a development server locally. When you're finished developing and ready to deploy the app, you're meant to run the build script and it will make you a folder of static files to serve from your server.
https://create-react-app.dev/docs/deployment/#other-solutions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.