How to setup Django + React on hosting? - django

I've done Django + React application.
I build React code using 'npm run build' and moves that files to hosting together with Python files, I've set up static files in Django app, and now when I'm going to site URL, I see that all static files are loaded. But they don't run. And when on the local environment I saw pretty JS app, now on hosting I see a white screen and when I select compiled JS files in Network tab in Developers Tools (Preview response) I read message "You need to enable JavaScript to run this app." (for CSS too).
I know that this is a noob question. But can you help me to solve this issue?
Thank you.

Check this site out https://www.techiediaries.com/create-react-app-django/
And go down "Integrating React App with Django in production"
This will show you how your app should be structured with the correct settings in your django files.

Related

Why is my debug Django server takes so long to load on my localhost? I'm using Django, django-compressor, django-libsass and bootstrap

I have a problem with developing a Django website. I started out with using CDN Boostrap and JS as recommended in Boostrap 5 docs but then I wanted to customize the CSS, so I changed the setup to compile Bootstrap's source scss files with django-libsass. I followed the installation guides for django-libsass and django-compressor.
What I discovered is that while everything works, it works very slow on my local machine (5-6s per opening a new page). I'm not very experienced in web development so I'm not sure what could be causing this.
If it's relevant, I don't use a frontend yet and I'm sticking to Django's templates.
I tried to download a sample django libsass project and put bootstrap there and the outcome was the same.
I expected the time for loading the pages to increase slightly due to the fact that now it has to compile scss files but not so much.
Googling turned up no results:(
Is this an expected behavior when debugging from a local machine or am I missing something? Huge thanks!

how to integrate a vue js project within a django project?

I have an existing vue js project and for backend I want to use django, what came to my mind was to use rest api to communicate with the backend without any integration. is that what everyone is doing or my approach is old school and I have to put the vue project in django directory and go through the whole collectstatic thing?
sorry if my question is too basic.
i don't know hows people doing, usually me and my team did like the python just access the index.html from the Vue build folder when production mode.
but in development mode, we just separate two of them. the python running as the endpoint API (need to enable cors mode in dev), and the Vue run in development mode.

Unable to use gatsby website in offline mode

I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails
running in windows:
after installing gatsby , I did the following:
gatsby new sample
cd sample
gatsby build
then I went to file explorer and opened the sample/dist directory and double clicked on index.html (Chrome is my default browser, but IE behaves the same)
the result is a half-loaded webpage that is missing the style sheets, javascript, images, and links are broken.
For instance, the "about" link on the first page points to "D:/about" vs. ".\about.html".
Is there anyway to make gatsby work to create a truly off-line website?
I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails
Gatsby will create a React app for you when it is built, and because most React apps use client-side routing, your links won't work with file:// URLs.
After installing the Gatsby CLI and building your site with gatsby build you should run gatsby serve which will serve up index.html with a static file server on your own machine.
See a similar answer about create-react-app here
Try using gatsby serve from the root of your project. Serve spins up a web server to serve your prod build.
Look it up on the Gatsby CLI docs on their site.
Gatsby isn't really set up to do that, unfortunately. It's a site generator, not page generator, and it expects living on a server. The result is that while the files are static, the navigation isn't.
Because I spent some time experimenting, this is what DOESN'T work:
Setting . as pathPrefix in gatsby-config.js. Gatsby lets you set path prefix, which it then prepends to all generated urls. Unfortunately, this prefix always gets "absolutized" somehow. . gets converted to /., for example.
Setting the absolute path of the file on disk as pathPrefix. Same as above - file:///path/to/file doesn't survive the build (results in file:/) and /path/to/file breaks the JavaScript.
Setting the pathPrefix to a bogus value like /NOTAPREFIX and search-replacing it in the generated files. Breaks the JavaScript, again.
Something I haven't tried but might get you somewhere, would be to disable the Single Page App functionality. It's possible, reportedly, (or maybe with this plugin?) but no good step-by-step instructions anywhere.

Webpack prod config vs dev config issues

I am trying to reuse one webapp that's been open sourced a while ago that was written using some Django and ReactJS... Now I am a devops engineer so my skillset when it comes to JS and even Django are fairly limited so I am stuck .. My main problem is that this webapp can run just fine locally.. so I can start it and connect using http://localhost:8000 , but whenever I try and set it up on a server and make it "public" for the internal network it fails with accessing all the JS assets.
I know the problem comes with my webpack configs but I can't sort it out.. Been trying all day but I can't even find the proper documentation since it's using Webpack 2.5.
https://github.com/tsprasath/estate/tree/master/webpack
I am attaching the link to the webpack configs from the repo.. If anyone can at least point me to the right thing to look at, that would be helpful.
Thanks in advance!
I dont think its an issue with your webpack. You are trying to run your react app (which is at client side) from django server. I believe you will need to use some kind of middleware to let django know that it needs to use static files generated for react using webpack. I dont know exactly how its done, but same procedure is followed if react app needs to be served from node/express server.
Or see if this helps: https://github.com/nicholaskajoh/React-Django

Trouble keeping image path's consistent with WebStorm dev Vx production

I love using WebStorm for building html/css/JavaScript apps but one problem I have not been able to figure out is how to deal with paths to images on my src attribute of image tags.
I have (for example) a project path in WebStorm of /documents/myproj/index.html where I've opened the project at /documents/myproj. WebStorm sees the root of the project as /myproj but the URL created when I browse is localhost/myproj/index.html. When I publish the site it becomes localhost/index.html (on my public server).
Image src tags are a problem for me because in development, the WebStorm server wants src=/myproj/1.jpg and in production it wants src=/1.jpg.
Any suggestions for how to keep this straight between running in local mode with WebStorm's built-in simple web server and the published version?
You can edit the host accordingly to make WebStorm serve your files using a different URL. See https://devnet.jetbrains.com/message/5532366#5532366 for some hints