I have an application that uses React for frontend and Perl for the backend.
The previous developer created an NGINX config file that handles the communication between the built version of the React code and the backend with no issues.
However, since NGINX is configured to work with the built version, I have to do npm run build every time I want to see the changes I made on the frontend side and interact with the backend.
I was wondering if it is possible to configure the NGINX file so that I can just use npm start to see my changes. Can this issue be resolved by making modifications to the NGINX config file or is the NGINX config file irrelevant for the development build and I just need to modify the backend code to get it working with npm start?
I am unfamiliar with both Perl and NGINX services. So, I am not sure which part I need to focus on. Furthermore, I had some trouble communicating with the backend on development build (npm start) with no NGINX config file.
Related
I have developped the application with DJango + ReactJS
when in developpment,
using
$python manage.py runserver
and
$yarn start
which launche the two servers on localhost:8000 and localhost:3000
However in production environment, I need to launch two servers??
When I use webpack before I run two server in developpment environment, but in Production just building in advance and use only on one server uwsgi
Could run under one server directly, I'll share other ways too.
Have your yarn build done and serve under Django's static files + listen for js/css/image assets. Now about your routing, you need to capture frontend routes such a way that (when direct url is entered), Django responds back static assets itself.
The downside in above is that your APIs' urls have to be following some pattern which won't interfere frontend URIs (routes).
Running two servers + CORS
Pack your react build with expressjs and serve it with some production grade server like pm2/ could use nginx + static files too but to tackle routes issue (of React), you'll need to tweak nginx to listen to not only "/" but also other routes in frontend.
Now, calling django APIs, do enable CORS config to support calling APIs from your React site.
Can also use serverless to send your static files + CORS behind the scenes.
If you're not having access to root of server, would need extra one to spare in former case. Otherwise to spin up a frontend + backend process in same server machine won't do much weight.
Good luck!
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
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/
I have difficulties to understand the whole proces of an Angular-app in Docker.
So anguler needs a webserver to run (like nginx) but also needs nodejs to access the backend?
Do you have divide this in 2 containers or how do you have to perform this?
I have now 1 container which had as base image nodejs. There I performed the npm install, bower install and gulp build etc. Now I'm able to visit the localhost:8888/api to see that part of nodejs but I'm unable to visit my angular app. Probably because it's not hosted by a webserver?
NGINX is a front-end server, which doesn't do back-end stuff. This means, that you can separate your application across 2 environments (containers):
Node.js server with it's backend,
NGINX with Angular sites.
NGINX will route requests to node server and that's the whole communication.
From there, you can pull these separate container on your productions servers. You can also configure it in the same container and they should work fine together.
If you installed everything, then it should be a matter of proper configuration.
You can check out this post as a reference on how to set everything up:
Node.js + Nginx - What now?