I've put my wagtail site into production. I setup a separate static site to serve my static files. After collectstatic, everything works except fonts inside the admin site. I'm assuming it has something to do with cross site scripting as I see this in the web developer tools:
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
It appear on all the fonts. I have pip installed django-cors-headers and set this variable:
CORS_ORIGIN_ALLOW_ALL = True
However, it does not fix my issue. Any idea how to get the fonts to work in a production environment?
You need to configure the webserver serving the static files to output a valid Access-Control-Allow-Origin header, such as
Access-Control-Allow-Origin: *
Exactly how to do this will depend on the server platform you're using. Installing django-cors-headers will not help here, as this will only add the header to requests served through Django.
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!
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 have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
I have a typical Ubuntu VPS setup (20.04LTS) where I have installed the Nginx Server.
I have two local repos with front-end reactJS code repo and back-end ExpressJS code repo.
I will start the ExpressJS on the 3000 port with forever start. I have also a mysql db.
I have configured Nginx to server the static files with the root /var/www/[Your repo name]/build; and I can open the html files and it is working.
The question is, do I need to start on another port for an example the ReactJS npm run start or is Nginx enough? Could you help me out with some links or best practices?
Thanks in advance.
If you're using CRA (create react app), it ships with a build script, so after running npm run build the whole app is built into static files including a index.html and some js and css files. all you need to do is to config nginx to serve that index.html. so nginx is enough for that. if you're using react-router in your app keep in mind that you may need to use try_files directive of nginx for serving that index.html for any incoming requests.
for more information about react-router and nginx see this.
If you're doing SSR (Server Side Rendering) you need a process manager like pm2 or forever to serve your app internally and proxy_pass directive of nginx to reverse proxy incoming requests to your app. More info
All the static files like index.html and assets will be served from your "root /var/www/[Your repo name]/build" folder, when the user opens your base url and sent as response for the get call. From your code, make sure to append '/api/' to all your backend requests from ui, so that it will get forwarded to your service running on port 3030.
I'm working on an Angular 2 project. I need to use restful services that cannot be exposed as CORS (the local setup is a docker container that emulates the live server), thus I need to create the angular project under the same domain.
Lets say the local domain is project.dev that already has a main web site at the root.
I was asked to build an angular 2 admin section in a sub directory (say /admin) so that it can be accessed at project.dev/admin.
When the project is done it will be easy to just copy the build in that subdirectory and have it working.
The problem is while developing it.
I'm using ancular-cli with ng serve but the site is served at localhost:4200, not the same domain, thus CORS issues.
I've tried changing it using the arguments --host and --port but the ones I need, obviously, are already used by the main site.
The partial solution was to use ng build --watch --base-href /admin/ --deploy-url /admin/ and configure outDir in anglular-cli.json to built the site in the proper location, but even if --watch is correctly rebuilding on every file changes, the browser is not refreshed as it is with ng-serve.
Unfortunately changing the server to support CORS is not an option. It is a docker container that uses JAVA as server that I'm not able to edit. Furthermore the versioned code is constantly updated by other developers.
I would like to know if it is possible to manage such a situation in a better way, mainly if is possible to serve the angular project under a local domain name while developing.
Thanks