django-webpack-loader | Transparently use webpack with django | Frontend Framework library
kandi X-RAY | django-webpack-loader Summary
kandi X-RAY | django-webpack-loader Summary
Transparently use webpack with django
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of django-webpack-loader
django-webpack-loader Key Features
django-webpack-loader Examples and Code Snippets
Lines of Code : 2License : Permissive (MIT)
Copynpm run start
npm run build
sudo pip3 install -r requirements.txt
TemplateView.as_view(template_name="main.html")
WSGIPath: ../saleor/wsgi.py
- css
|- main.e0c3cfcb.css
|- main.e0c3cfcb.css.map
- js
|- 0.eb5a2873.chunk.js
|- 0.eb5a2873.chunk.js.map
|- 1.951bae33.chunk.js
|- 1.951bae33.chunk.js.map
pip install django-webpack-loader
pip install django-webpack-loader
$ pip install git+https://github.com/ezhome/django-webpack-loader.git
$ ./manage.py shell
Python 3.5.3 (default, Jan 29 2017, 01:40:30)
[GCC 5.4.0] on linux
Type "help", "copyright", "credits" or "license" for mor./manage.py collectstatic --noinput
./manage.py collectstatic --clear
./manage.py findstatic js/bundle.js
{% load render_bundle from webpack_loader %}
.
.
.
{% render_bundle 'react_app' %}
Community Discussions
Trending Discussions on django-webpack-loader
QUESTION
I am using Django as backend and Vue3 as frontend in my application. In development server i did not have problem but now in production i am having problems to render the page. I have followed all the documentations but cannot find a solution.
I am using django-webpack-loader to render the bundle which I formed using webpack5. But now i am getting an error hence thinking that django is trying to render fallback page.
ANSWER
Answered 2022-Mar-10 at 14:51The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.
To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what your server sends.
That said, check your configuration and maybe examples of integration on github like this one https://github.com/tmpbook/django-with-vuejs
QUESTION
I have a Django project with 2 apps. I want to use the Notion API in one of the apps, so I have to install it's NPM module. However, I have never use NPM nor a bundler (I understand I have to use one for the import statement).
I have no idea on how to do it. Where should I install the module? Should I install Webpack or something similar? How can I integrate both of this technologies with Django?
Can someone please explain this to me, or reffer to an article/video explaining?
I have been trying for hours now and I can't find anything detailed.
I have checked the following links:
- Django how to use npm modules with static/ templates
- https://gist.github.com/brizandrew/685a588fbefbd64cd95ed9ec4db84848
- https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
- https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
- https://www.techiediaries.com/django-webpack-react/
- https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
- https://pythonrepo.com/repo/owais-django-webpack-loader-python-developing-restful-apis
And a lot more.
They either don't have what I need (they are for react), or I can just not understand them. I know there are probably a lot of articles on this, but either I just can't find them, or they are too complicated for me (sorry I'm dumb).
If anyone can help me, it would make my day.
Thanks!
P.S. I am using Typescript, but I can use vanilla JS if necessary.
...ANSWER
Answered 2021-Nov-24 at 01:01You have two things to do in order to get your app working the way you want.
- Install, configure, and run a module bundler
- Use
collectstatic
Module bundler:
You have a few choices, but most use webpack because it is the most popular. I prefer rollup but it is all up to preference.
rollup quickstart: https://rollupjs.org/guide/en/#quick-start
webpack: https://webpack.js.org/concepts/
Since you are using Typescript, see the plugins for bundling Typescript
https://webpack.js.org/guides/typescript/
https://github.com/rollup/rollup-plugin-typescript
After you bundle, you should have a main.js file or equivalent. Make sure that main.js is in its own folder. Bundlers will typically do this for you.
Add that directory to your STATICFILES_DIRS in settings.py.
Note that you will need to set a STATIC_ROOT for this to work. This will be a folder that you will store your collected static files at.
Run python manage.py collectstatic
Sidenote: if you are using python manage.py runserver to start your application, you don't need to run collectstatic
QUESTION
My question concerns programming a full-stack app.
On the frontend, I have a Next.js React app. I want to render it on the client-side and probably use SWR. On the backend, I have a Django app with a PostgreSQL database.
I have seen two approaches to make all of these work together.
The first one is to use Django to serve Next.js React app with django-webpack-loader and then to load React app within Django template.
The second one is to build two separate apps - frontend (Next.js) and backend (Django + PostgreSQL) and deploying them on two servers (e.g. Docker container). I have read this article and it makes me lean towards the second option. However, it is a pretty old solution and maybe some things have changed since then.
What is the most optimal solution when it comes to connecting Next.js React Client-side rendered, Django and PostgreSQL?
...ANSWER
Answered 2021-May-16 at 01:19Opinions may differ, but based on reading and personal experience, I consider using separate Next.js and Django apps to be preferable. This (1) helps with separation of concerns, (2) helps avoid making Django or Next.js do anything that their designers did not anticipate, and (3) is simple with Docker.
Here's an example project that uses docker-compose to manage services including a Next.js frontend, Django backend, and Postgres database: https://github.com/ModularHistory/modularhistory
QUESTION
I added Vue to my Django project, but since i didn't want to decouple frontend from backend, i decided to load webpack directly from Django. My setup seems to work with django webpack loader, but i'm having some doubts on how i structured the project.
Here is my folder:
...ANSWER
Answered 2021-Mar-15 at 17:09My doubt is: should routing be handled by Django or should it be handled by Vue in a SPA?
Your FE needs to know the routes if you're going to do SPA, e.g. your FE needs to know how to update the URL if user clicks on a link/item. Otherwise there would be page refreshes or wrong URLs.
So here i'm not using Vue to handle routes, but i load individual Vue components of the same app in those Django templates where i need them. My doubt: is it a bad practice? Are there reasons for which i should avoid doing so?
I think you need to decide it you're going to build a SPA or not. My rule-of-thumb is SPA is better if have a lot of interactions on your page or you have a team of speciallized people for FE. Having a total separation between BE/FE is definitely industry de-facto standard but rendering most stuff on BE and having a lightweight FE is not a crime either, Stack overflow itself uses such approach.
If you're going with SPA, putting FE URLs in BE also makes not much sense (unless you're doing something like server side rendering). BE will provide a set of API URLs (invisible to end user) and FE will consume them and provide a set of FE URLs that users would see.
Yes, the main problem is that having the apps hosted on two different domains might make me lose a lot of django benefits in terms of security. I have some doubts on storing a jwt token on local storage, i don't think its the safest solution; there is session based auth but i don't know how would it work on two different domains. Another thing is the lack of examples on this, and finally the biggest problem is that i already setup the app on this environment, so moving to decoupled would be quite a pivot
There are multiple answers for your concern.
1- There's no need to have separated domain. You can prefix all your BE URLs with /api/ then on production you can use a reverse-proxy like NGINX or Traefik or your load balancer, ... to separate the two. Having separate domains is easier to maintain in long run but you'll need to handle cookie/CORS issues now and then.
2- If you have separated domains you can set cookies on the main domain from subdomain with this settings
3- There's no need to go with JWT token in localstorage. IMO it's inferior to having httponly cookies. Django session auth has httponly turned on by default. This way random npm libraries you installed or 3rd party scripts on your page has no way to access and steal the token.
4- On a separate note, Django CSRF protection is kinda obsolete now we have samesite cookie on browsers. Check browser support here. Newer versions of Django defaults to Lax that protects you from CSRF on supported browsers. So you can turn that protection off to have one less headache.
I personally think you can stick to Django session based auth, no need to add anything to your FE. FE will just call /api/auth/login and proper cookies will be set automatically.
To be more robust you can add an API like /api/auth/me that returns current logged in user data to FE. FE will call that when user visits your website for first time to understand if user is logged in or not.
QUESTION
I deployed a Django+VueJS app that uses django webpack loader in order to render Vue apps in my Django templates. I used Nginx and Gunicorn to deploy the app to a DigitalOcean VPS, everything works without any problem but i have some doubts on how to edit my components in production, since i'm fairly new to Vue
Here is my vue.config:
...ANSWER
Answered 2021-Jan-10 at 09:14I don't know about django, But I know about vue..
- is this how am I supposed to do it?
For me, I don't suggest it, you can use your django as a backend for your frontend that should mean you would have 2 servers running. 1 for your django and 1 for your vue app. use XHR request to access your django App, remember to handle CORS. IMHO I don't want vue to be used as a component based framework.
- is there a shorter way.
YES, and this is how you do it.
add to package.json
QUESTION
I deployed a Django+VueJS application to a Digital Ocean droplet using Nginx, the Django app is working but i can't see the VueJS components loaded by Webpack (i'm using Django-Webpack-Loader).
In my console, i keep seing these errors:
...ANSWER
Answered 2020-Oct-19 at 00:47QUESTION
I am trying to use Vue and Django together as described in this article. Everything seems to be working except for the webpack-bundle-tracker. I'm pretty sure that webpack-bundle-tracker is not even installed as this happens when I run yarn add webpack-bundle-tracker --dev:
ANSWER
Answered 2020-Jun-24 at 03:54I had the same issue, also running Django with django-webpack-loader, and I also found that the webpack-stats.json file was not being generated. I fixed it by downgrading webpack-bundle-tracker to 0.4.3. I'm not sure why the latest version of this package does not work.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install django-webpack-loader
You can use django-webpack-loader like any standard Python library. You will need to make sure that you have a development environment consisting of a Python distribution including header files, a compiler, pip, and git installed. Make sure that your pip, setuptools, and wheel are up to date. When using pip it is generally recommended to install packages in a virtual environment to avoid changes to the system.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
