We have a React app that's embedded and served in .NET CMS project.
App is bootstrapped with Create React App and webpack config tweaked with craco.
Webpack dev server is running at default location http://localhost:3000 and CMS is running at https://localhost:5000
When I open https://localhost:5000, I correctly see React app. However, console is full of errors
WebSocket connection to 'wss://localhost:3000/ws' failed:
Is there a way to configure it to work with hot reload from external server?
I have tried setting dev server to https and adjusting webSocketURL, but did the error persists.
Related
I have create created a react app for ticket management and for connect with backend i have defined proxy in package.json as shown in the figure. this is finely working in local host. when i publish to github page, it not able to connect to backend and get 404 error since the proxy in package.json is not considering now. So how i define a proxy as like in the packag.json to github page i have hosted
github ripo: https://github.com/pranavmappoli/supportdesk
hosted page: https://pranavmappoli.github.io/supportdesk/
backend URL: https://pranavhelpdesk.herokuapp.com/
how could i resolve this issue other than putting the path in .env file
The webpack proxy is designed to be used as a hack during development.
In production you are supposed to configure CORS on the API or deploy the app to the same origin as it so you don't need a proxy.
An an alternative (not one I'd recommend) you could build a production ready proxy. If you do that then it will need to support CORS and cannot be hosted on Github pages which only support statics files.
I deployed my react app to Heroku and it is running in development mode so redux-logger is shown in the console. Not sure if it's important, but I used create-react-app. Also, I didn't manually create a server.
Here is my package.json.
App is Here.
Is it possible to build react app for production using npm run build without it making the site offline? I am using nginx to serve the react app and when I run the above command, I get Internal server error until the build is finished. It would be nice if the old version of the app is served until the build is finished.
You shouldn't be building your application on the production server. Build it locally, then deploy it to production and this won't be an issue.
I'm trying to build a react app starter that suits my needs. I've read, downloaded, tested countless react boilerplate to try to understand how to add SSR but I'm kind of stuck right now.
The github repo is here
So far I've got React running with hot reload. Webpack 4 bundles the client code. I use a proxy with webpack-dev-server (WDS) to serve my backend express api as well as my client for development.
WDS hot reload change when I update app client code. The express server doesn't restart that way.
I use nodemon to watch the change of the server so that only the backend restarts when I'm coding api features.
For production I simply build the server and client to the dist folder and serve the application with node.
Later I plan to add React router, redux, etc but this is the easy part.
So what I'd like to add now is server side rendering (SSR) for the production mode as I don't need it for development.
Any idea on how I could implement that ?
Thank you
I'll post a further analysis.
Right now I start a webpack-dev-server that allows me to serve and hot reload the client app on localhost:3000
I also launch an express server on localhost:8080 and connect it to the client using the proxy attribute of the devServer
If I modify code on the client app only the hot reload is triggered
If I modify code on the express api only the server api is restarted
From what I understand of SSR and hot reload being put together is that webpack now needs to be compiled in the express server and I add a dev server and a hot reload middleware.
But if I do that each time I modify code of the api nodemon will restart the server and then webpack will compile the client code but I don't need that since I only modified the api.
What I think I need to do is leave things as they are for the development part (because I don't need SSR for dev) but add a production code that will be executed only if NODE_ENV=production, add a template dedicated to serve the html for production with all the renderToString logic
How's that sound ?
Check out Paragons. It has Webpack 4, router, redux, and more all working with SSR. Plus it has both development and production modes.
Any idea how to deploy a React app or angular app to JBOSS webserver ?
I was working on a POC project using React and webpack-dev-server and now I have a bundle.js. Is it possible to deploy the bundle.js under a JBOSS directory (webapp.war)
Or will I need somehow run my react application on a separate server and port using npm/node/express and then somehow redirect JBOSS requests to this url ?
Please help.