initial page immediately replaced by empty root div? #1144
Comments
|
Also seeing following errors in console: |
|
Did you forget to set config.devServer.public to 'apps.syntapse.co.uk:443' in razzle.config.js? 😀 |
|
Any CORS warnings? I'll do a razzle-plugin-proxy npm module when I wake up sometime later today. |
|
There are no CORS warnings. I changed my original configuration due to persistent CORS errors Now public and client paths are on the same domain as defined in .env file: result = no output at all after initial page load. I'm not sure if 'apps.syntapse.co.uk:443' is correct in my context I have set razzle.config.js=> devserver.public to match CLIENT_PUBLIC_PATH and my nginx routing. |
|
I will leave https://apps.syntapse.co.uk/razzle running. debugger shows that bundle.js and svg but the client is over-writing the output with a blank screen and throwing lots of repeated sock.js errors. The sockjs-node path looks wrong and https://apps.syntapse.co.uk/sockjs-node/info?t=1572338501760 returns a 404. |
|
https://www.npmjs.com/package/razzle-plugin-proxy easier to set up. But your proxy is down... |
|
sockjs-node path is hard coded in sockjs-node so it wont do well on a subpath. |
|
thanks what does the razzle plugin proxy do? im trying to avoid adding more complexity to work out why the basic create-razzle-app doesnt work. |
|
"sockjs-node path is hard coded in sockjs-node so it wont do well on a subpath". Does that mean i can't use create-razzle-app behind a proxy? I think this may be a WDS error as Ive seen lots of very similar reports for other frameworks and libraries. |
|
Fixes port in so https://github.com/jaredpalmer/razzle/blob/master/packages/razzle-dev-utils/webpackHotDevClient.js#L65 points to the port or non port in CLIENT_PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-dev' but I could add in fixing sockjs.. |
|
Thanks again for your help. Razzle is by far the most difficult React based app i've tried to run. I'm testing alongside hot reload dev versions of next, vue, nuxt, CRA, angular on the same server all ran first time behind the reverse proxy. |
|
server is running again at https://apps.syntapse.co.uk/razzle/ client making repeated calls to https://apps.syntapse.co.uk:4001/sockjs-node/... |
|
I dont have a UI or browser for my server and two levels of reverse proxy so I think I'm going to have to use URLs to address them from the browser. It was working ok(ish) using two separate domains for server and client bundles but then i had CORS issues. Ideally I would like to have to paths on the same domain for my app. e.g. domain.com/razzle (3000) Is this achievable with Razzle or am I going to need localhost and browser on same machine? |
|
Fixed sockjs.node issue in razzle-plugin-proxy now :) so just use the plugin. |
|
"Set CLIENT_PUBLIC_PATH=https://www.example.com/webpack and proxy port 3001 to the backend". (After installing plugin and adding to config.js) do I alter my .env CLIENT_PUBLIC_PATH from
and restart |
|
I still dont really understand if my problem is one of configuration or a bug with Razzle? Am I experiencing problems trying to proxy from .../paths to route to 3000 and 3001? |
|
yes :) razzle bug |
|
sorry missed a question by adding another one: You said: "Set CLIENT_PUBLIC_PATH=https://www.example.com/webpack and proxy port 3001 to the backend". to confirm my next steps.... (After installing plugin and adding to config.js) do I alter my .env CLIENT_PUBLIC_PATH from
to
and add location to server is that it? thanks |
|
what effect will this have on the https://apps.syntapse.co.uk/sockjs-node/... URL? |
|
Any client public path will work now if it is proxied :) |
|
ive installed the plugin but the path remains as before https://apps.syntapse.co.uk/sockjs-node and still the cause of errors resulting in a white screen after page content is (briefly) loaded. These are the ONLY changes I have made to the default create-razzle-app. .env file razzle.config.js nginx redirects: to confirm: |
|
Am I correct to assume Razzle development server has only been designed/tested to work with localhost:port and localhost:port+1? Will the plugin functionality be included in the main Razzle release? Its been a lot of trial-and-error to get to this point it would be great if it worked behind a proxy out-of-the-box. |
|
don't set |
|
razzle buillds both in dev |
|
ive removed new env file: restarted server. same problem persists. |
|
ill leave the site running until tomorrow. its defintiely loading the bundle and the image correctly. something is overwriting the entire page with an empty div.... |
|
pathname: '/webpack/sockjs-node', CLIENT_PUBLIC_PATH='https://apps.syntapse.co.uk/razzle-wds/' ?, env must be wring |
|
version: razzle-plugin-proxy@1.0.7 Results for running prod: Visually I am experiencing the same issue (rendered content loads briefly followed by a white screen and empty root div). Something is definitely overwriting content. jss and cs bundles load with 200 but the svg is a 404. looks like this may be related to the socket issue. the url path looks wrong. is it missing /razzle/ prefix? Request URL: https://apps.syntapse.co.uk/static/media/react.9a28da9f.svg = 404 |
|
re: prod The svg file is available at https://apps.syntapse.co.uk**/razzle/**static/media/react.9a28da9f.svg but the page is requesting https://apps.syntapse.co.uk/static/media/react.9a28da9f.svg and omits /razzle/ Could solving this also solve issue with https://apps.syntapse.co.uk/sockjs-node/... also missing a /razzle-dev/webpack/ prefix? |
|
for sake of clarity issue summary at this stage: for both prod and dev after initial content load page loads blank with empty root div. there are problems with URLs in prod: css and js bundles load ok. in dev all bundle.js file loads ok. |
|
In prod you might have built with wrong PUBLIC_URL, in dev the plugin is not loaded somehow. Post your razzle.config.js |
|
razzle.config.js .env file (uncommenting as appropriate) these are the ONLY changes made to the default output of create-razzle-app the nginx config is identical to #1144 (comment) with changed prod port to 3002 (and changed in the .env file) the results in #1144 (comment) are reproducible on each run. thanks |
|
there are errors generated on the dev server client page. console log
network errors
The first response is to the correct URL including /razzle-dev/webpack/ prefix. Failed to load resource: the server responded with a status of 404 () subsequent calls drop the /razzle-dev/webpack prefix... |
|
further discoveries: re: prod. If I remove the /razzle/ prefix the page and all its assets loads correctly. It seems that my use of URL paths are breaking things. Is this by design or should domain.com/sub-paths resolve correctly? re:dev This same approach doesnt work for dev because if i remove /razzle-dev/ i still have a /webpack/ path included to redirect to 3001 which breaks Razzle. I've also tried removing url paths entirely with .env PUBLIC_PATH=https://apps.syntapse.co.uk/ but this breaks too due to SSL_PROTOCOL_ERRORS which was the first problem I encountered before I tried to use url paths as a workaround.
Im not really sure if Razzle is designed to work with paths and this is a real bug or if I am trying to use it in ways its not designed for. I don't think the tests are exhaustive enough it would be great to see a few more tests included in the default create-razzle-app. |
|
quick update: this works ok! includes HMR working, but there are lots of errors see image at end of comment. .env and nginx
|
|
because of present limitations on use of domain/app format i cant hang multiple apps off a single domain which would be very useful but I've enough to work with for demos and testing. |
|
Maybe.. like this. But not quite sure :) server {
listen 80;
server_name apps.syntapse.co.uk;
location ^~ /razzle-dev/webpack {
proxy_pass http://0.0.0.0:3001/;
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 ^~ /razzle-dev/webpack/sockjs-node {
proxy_pass http://0.0.0.0:3001/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 ^~ /razzle-dev {
proxy_pass http://0.0.0.0:3000/;
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 ^~ /razzle {
proxy_pass http://0.0.0.0:8080/;
# use production port here
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;
}
} |
|
OO, found a new devserver option sockPath :) |
|
So, new version of the plugin up now. Should handle the paths correctly now. |
|
for clarity please can you summarise what the plugin does? is it specific use to enable multiple apps to hang off one domain using domain.com/app format like the approach i have been trying to take? |
|
Yes that is the specific use. :) |
|
It parses CLIENT_PUBLIC_PATH and sets webpack.devServer options
|
|
Brilliant is this published elsewhere on npm or in documentation? Apologies if i have missed it already. |
|
ive updated latest proxy plugin and after update im getting lots of dependency errors. I had to manually install express. before installation installation and errors |
|
The proxy plugin 1.1.0 is not working. I have tried installing express@^4.17.1 but it leads to a number of other dependency issues.
The exact steps taken to install site showing error above: config: env nginx |
|
Um? PUBLIC_PATH='https://razzle.syntapse.co.uk/razzle' |
|
my apologies the correct domain for this stage of testing is app.syntapse.co.uk. my greater concern is the missing dependencies. is this why its not loading in dev? i dont have sufficient knowledge to know if its been loaded. |
|
Try removing some parts of the path, where is the file really available at? |
|
I can't continue testing with such a large list of dependency errors on install. is there a way to fix this before i continue? i dont know if the package is even being loaded.... |
|
how can it be loading when dependencies are not installed? sorry perhaps i have basic misunderstanding of how this works? |
|
I only use yarn. |
|
ok. yarn. maybe this is the problem. i will scrap project and install latest with yarn see if it makes a difference. |
|
installed with yarn back to same situation i will close this issue and open a new one from latest starting point. too many changes require a new starting point. is there github repo and issue queue for the proxy plugin? |
I have configured nginx reverse proxy to redirect 3000 and 3001 for default create-razzle-app. The page loads but is immediately replaced with empty root div.
.env file
nginx server definition for the redirects:
The text was updated successfully, but these errors were encountered: