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.
Related
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.
I am working on a react isomorphic app in which my express server is running along with the client app now I want to deploy this app but didn't know the proper way to deploy this kind of app.
this boilerplate of my project client folder contains react app and server.js contain express server. normally we run the build command and deploy our project's build. but in this case, if I run the build command then I lose my server.
my react app is running on 3000 port while my server is running on 5000.
if anyone has the solution or gives a bit of advice.
I need to get data from google bigquery and it is not possible from the client-side so use this approach
I have an IIS Server and a Next JS app which is mosty SSR. The problem is that I'm connected through a VPN and it was very easy to deploy a react-create-app, just moving the build folder and than all was working. Now it does not work the same and I do not find enough documentation for my problem.
If you want an easy way like react-create-app, you can use NextJS export function which doesn't have server side. Then you can just run next export and upload your next build folder to your server.
If you insist to have SSR on your NextJS app, then the way you upload your app might be more difficult than just a upload your build folder. Because your app now has a server side that you need to run in your IIS server.
The easiest way to run Next SSR app on your server is by copying the whole root folder of your app to the server and run the production mode.
Other than that is by using containerization, so you build your app's image and push to the repo, then your IIS server will get this image and run it in the container.
I use
"webpack": "3.8.1" ,
"react": "^16.5.2"
when start to yarn start app is working
but after the yarn build and serve -s build, not to call api. (but react-router is working)
In other words, it does not work for the http request. After the build
But as a yarn start, http request runs well.
(I use proxy in package.json. front-end is react, backend is spring boot)
I suspect your issue is like this. When you are developing you are using a proxy setup in your package.json as you have stated in your question.
When you have this proxy setting, webpack dev server will proxy your request from the client to the server. This is what allows you to leave the baseurl off your request in the app. In other words, because of this proxy you can simply write /api/endpoint/.
When you build and serve using the serve module however, webpack dev server is no longer the one serving your app the the browser, which means there is no more proxying requests from client to server. This means you are making a request to just /api/endpoint/ which means there is no server actually getting your request.
Without actually changing your react code to use the full url including the base url in requests, you would need to actually have the server be responsible for serving the build folder to the web statically. By doing this, your /api/endpoint will point back the server that served the app which is also your api.
I am new to React.JS and using react-create-app to setup the project.
I am wondering is there a way to use the same host and port to response for API requests, (the server serves both front-end and back-end, like in Django).
The doc mentions about this but does not go into details.
By same host and port I mean I only need one terminal and run npm start once.
If there is only for development you can simply add
"proxy": "http://localhost:8000/"
to your package.json.
This will proxy your API queries from React to your other app working on another port (there 8000).
After you finish, you need to build production code (npm build command), which result is an index.html which loads builded js and css bundles.
From Django you need only point your IndexView to this file (you can do this as TemplateView, but maybe simpler is only render like there:
class IndexView(View):
def get(self, request):
index = open(str(settings.BASE_DIR.path('build/index.html')), 'r')
return HttpResponse(content=index.read())
Then only use your API from React - from this point both will work on common port.
Back to development mode - you can also configure your Webpack to build your app everytime you save changes and only run them from Django (or Rails, or Node, or whatever is your backend), but I prefer to use proxy, which keep both apps in their native contexts until you finish development. One disadventage of this solutions is that you need always run both apps simultaneously.
Some usefull info and soultions about this I found there: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/