I just started a new little project for learning purposes and I want to try out Vue js with Django (with DRF). I'm trying to use vue loader (webpack-simple template).
The problem is that I don't know how to synchronize npm run dev and python manage.py runserver. I don't know how to access a template that is rendered by django in webpack-dev-server.
I mean I have a template with django-template specific keywords like {% load static %} that is not handled by webpack-dev-server, obviously.
I know I can build it everytime npm run build, but that's kinda annoying and boring to wait for it everytime I want to make a little change.
In webpack, it's specified to run on a default index.html file, how can I make it work on the template that is actually rendered on 127.0.0.1:8000 with python manage.py runserver running? I know it doesn't make any sense to run 2 dev servers, but I don't know how to explain in other way.
Is there an alternative?
Thanks in advance for answers!
Run your Django server as normal. webpack shouldn't serve your files. It should just build them (use webpack development settings and webpack --watch) and let webpack put them in the static directory of your Django project, e.g.
// in your webpack config
output: {
path: path.resolve(__dirname, 'project/static/js')
}
That way Django can serve the files that are run through your webpack pipeline.
On top you can use the webpack live reload plugin and the live reload browser extension to auto-reload when your assets change.
When you are ready to commit your changes, build your files in production mode and commit the build files in the static dir.
Related
I developed a django application to handle requests from angular application. Now, should I collect static files for django application while deploying it?
python manage.py collectstatic
Will my django respond to the requests without staticfiles? Because, I found in many documentations that collectstatic is being performed in the steps to deploy django application.
It depends on how you are going to run your Django application. If you are putting it anywhere public, you should have Debug set to False in your settings.py and as such you will need to do the collectstatic step, but not necessary every time you make a change; only if you've added more static files.
The 'Serving the files' section of the documentation (https://docs.djangoproject.com/en/3.1/howto/static-files/) is clear on using runserver in production:
This method is grossly inefficient and probably insecure, so it is
unsuitable for production.
Determine what sort of volume your site is going to have to decide if you want something like nginx being your webserver and proxying requests to your Django app being run by Daphne, Gunicorn or uvicon while nginx (or other fav web service) serves up your static content. If it is too much for the one connection or the server it may make sense to host your static files elsewhere - it really all depends on your use case.
To understand what I'm talking about, I call GitHub stat this line:
I have my Django project on GitHub repository and, I use Heroku to deploy this project. To deploy my project to Heroku, I need first to run python manage.py collectstatic that will generate a lot of CSS and JS like on screenshot above.
I want to hide this folder not ignore, because Heroku needs it to work properly.
UPD 1:
So, I created new branch called debug. debug branch is identical with master, but, without staticfiles folder. And when i start Heroku with this branch, as i said, it gives me an 500 Server Error. Ofcourse, I runned python manage.py collectstatic before start.
UPD 2:
After restarting all Heroku dynos (heroku ps:restart in CLI), all works fine without pre compiled staticfiles.
This:
To deploy my project to Heroku, I need first to run python manage.py collectstatic
is not true. Heroku will run collectstatic for you when you deploy. You do not need to run it before deploying, and you definitely do not need to add the destination directory to git.
So I have a Django project that acts as a backend REST server, and I would like to integrate that with an existing React project that makes AJAX calls to this REST server. Again, both of these projects already exist, I just want to connect them. Let's say the root of my Django project is DJANGOROOT and that is where manage.py is located. My Django project has a couple of Django apps that are part of the project. Let's say my Django project is called "mydjangoproj", the two Django apps are called "myapp1" and "myapp2" and the React project is called "myreactproj". Each of these two projects (the Django project with the two apps, and the React project) is stored in a separate GIT repo and to connect them on my server I have the following directory structure:
DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc
Note that the React app root folder is inside DJANGOROOT and is parallel to my django project and app folders.
The React app uses an npm module called react-scripts (see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build) that has a build script that will build all the stuff in DJANGOROOT/myreactproj/src (staring with index.js) and will put all this in a folder called DJANGOROOT/myreactproj/build. When I run the build (using "npm run build") it fills up the folder DJANGOROOT/myreactproj/build like this:
DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media
So it appears that to connect Django to my React app, I have to find a way to have the root path for Django (mydomain.com/) point to DJANGOROOT/myreactproj/build/index.html. I understand that I must create a "home" template that is launched by the Django view that runs at mydomain.com/, and that home template has to launch the React app something like this:
{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}
But I'm not sure how exactly I need to tell Django where to look for main.js (or is it index.js) and I'm not sure how to get Django to see all the static stuff in DJANGOROOT/myreactproj/build/static.
I also ran "npm list webpack" inside DJANGOROOT/myreactproj to get the version of webpack, and it shows this:
└─┬ react-scripts#1.0.11
└── webpack#3.5.1
I assume this means that webpack 3.5.1 is being used and is somehow bundles with react-scripts v 1.0.11
Also note that the Django app is already running under HTTPS under NGINX and UWSGI, so this is a real server not a dev server.
Can someone who has been through this process shed some light on what I need to do to hook this all up properly?
If your react app is using django just to get data via REST, why you want to use react in django templates? I think preferred approach here is separation not integration. Create standalone react app with its own server (both can run on one physical server of course) - this way your react app and django app will communicate only by rest calls and nothing else needed. If you have some assets in django app - move them to frontend react app.
I have added react js in django using webpack loader
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles4/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
First time all things are OK.
But when I change any code in react then don't change application with new code.
Is it cache problem?
It is not a cache issue. You need to compile your bundle with your current settings in order to get the new bundles reflecting the changes.
You can run this on your command line to compile your new bundle:
./node_modules/.bin/webpack --config webpack.config.js
This should create a bundle at assets/bundles/main-{XXXX}.js where {XXXX} is a hash.
But you don’t want to create bundles manually every time you make changes to your code.
You can run on your command line:
./node_modules/.bin/webpack --config webpack.config.js --watch
This will leave the compiler running and compile bundles automatically when you change any of your source files. You’ll need to restart it if you make any changes to the webpack configuration though.
To go further, you can look at webpack-dev-server and react-hot-loader for hot reloading your components:
npm install --save-dev webpack-dev-server react-hot-loader
I personally prefer create-react-app, they do everything for you, you don't have to worry about the webpack configurations. I've created a sample github gist to show you how simple it is to integrate django with create-react-app.
https://gist.github.com/ibrahimawadhamid/dd4091196b0c7b25cca33d72b044efaf
How can I correct the basic html display I get when I load the Django admin page, just as shown in the snapshot attached?
This is because your static files aren't set up properly. Typically Django's development runserver will take care of this for you, but in production, you need to run python manage.py collectstatic after ensuring your static files settings are correct: https://docs.djangoproject.com/en/1.11/howto/static-files/#configuring-static-files
Good luck!