eugenedae / django-vue-cli-webpack-demo Goto Github PK
View Code? Open in Web Editor NEWA minimal demo showing how to wire up Webpack of a Vue CLI app to Django templates without extra plugins.
A minimal demo showing how to wire up Webpack of a Vue CLI app to Django templates without extra plugins.
Hi Eugene - great work, I really like the approach!
Is there any dependency on anything new? Or do you expect it to work on older versions of django and (especially) vue. There are other dependencies preventing me from using latest.
This is working fine and also this is awesome. But I've a question, Actually I'm new to javascript and vuejs. But I'm enough familiar with django. Actually I only want to put public folder and src folder inside client. Except this i want to all types of files and folder outside from client. I didn't know how to achieve this one?
templates/base.html
{% extends "admin/base_site.html" %}
...
<div id="content-main">
{% block content %}{% endblock %}
</div>
...
templates/index.html
{% extends "base-vue.html" %}
{% block content %}
<div id="app"></div>
{{ block.super }}
{% endblock content %}
public/index.html
{% extends "base.html" %}
{% block extrahead %}
{{ block.super }}
<%= htmlWebpackPlugin.files.css.map(src => `<link rel="stylesheet" type="text/css" href="${src}">`).join("\r\n ") %>
{% endblock %}
{% block content %}
{{ block.super }}
<%= htmlWebpackPlugin.files.js.map(src => `<script type="text/javascript" src="${src}"></script>`).join("\r\n ") %>
{% endblock %}
vue.config.js
chainWebpack: (config) => {
...
config.plugin("html").tap((args) => {
args[0].inject = false;
return args;
});
...
}
https://github.com/jantimon/html-webpack-plugin/tree/main/examples/custom-insertion-position
jantimon/html-webpack-plugin#1284
On local works fine:
Django version 3.2.4, using settings 'demo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[08/Oct/2021 10:02:32] "GET / HTTP/1.1" 200 1058
[08/Oct/2021 10:02:32] "GET /static/dist/css/app.f39fb7df.css HTTP/1.1" 200 428
[08/Oct/2021 10:02:32] "GET /static/dist/js/app.4e3ad5f1.js HTTP/1.1" 200 5880
[08/Oct/2021 10:02:32] "GET /static/dist/js/chunk-vendors.ee84eca6.js HTTP/1.1" 200 96992
[08/Oct/2021 10:02:32] "GET /static/dist/img/logo.82b9c7a5.png HTTP/1.1" 200 6849
[08/Oct/2021 10:02:32] "GET /static/dist/js/about.23893448.js HTTP/1.1" 200 455
[08/Oct/2021 10:02:34] "GET /static/dist/js/about.23893448.js HTTP/1.1" 200 455
On my hosting:
The resource from “https://vue.mihaicorciu.ro/static/dist/css/app.f39fb7df.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “https://vue.mihaicorciu.ro/static/dist/js/chunk-vendors.ee84eca6.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “https://vue.mihaicorciu.ro/static/dist/js/chunk-vendors.ee84eca6.js”.
The resource from “https://vue.mihaicorciu.ro/static/dist/js/app.4e3ad5f1.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “https://vue.mihaicorciu.ro/static/dist/js/app.4e3ad5f1.js”.
Any suggestions to solve?
Thank you.
I'm trying to make an MPA as I only need to sprinkle Vue in a few places around my existing Django project.
A few interactive forms etc.
I have thought about using Vue within the browser but I'd really like to use .vue
components.
Setting up vue to output multiple pages is very straight forward via the pages
attribute in vue.config.js
.
Any help with configuring this project into a Vue MPA?
Is it possible to use this with vite rather than webpack?
Hi, thanks for awesome workflow example!
Buy I have one big problem.
My site is multilanguage.
In django templates I use {% trans 'some text' %}
or {% blocktrans %}some text{% endblocktrans %}
This strings is collected somehow with django (I don't know how, because I only newbie at this project and I only frontender)
So, need to allow django to search through all vue files.
But my knowledge in Django is not enough.
What I was looking for and what might be useful:
Point:
https://stackoverflow.com/a/56843493
Examples:
https://tuleap.net/plugins/git/tuleap/tuleap/stable?a=commit&h=7cd307f038fdf1439418aa61793850e3655939c5
https://tuleap.net/plugins/git/tuleap/tuleap/stable?a=tree&hb=d9ec3ef12707285072386a68789069ed48a0e845&f=tools%2Futils%2Fscripts
I would appreciate your help.
Thanks.
I just setup this repo to give a try. But I'm not getting output as shown in screen shot. Im only getting text called powered by django. Do I'm missing something? And do I need to run both server, I mean vue dev server and django devserver?
This seems like such a neat solution to incorporating Vue.js into a django app. I'm wondering if you could show an example of how you'd incorporate this into a Docker based setup. I've got it working just fine for my dev image, but I'm having trouble understanding how to make it build the files for production so that they're actually served from the static directory instead of from the webpack dev-server.
My super basic Dockerfile for django is below:
# pull official base image
FROM python:3.8.3-alpine
# set work directory
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
RUN apk update \
&& apk add postgresql-dev gcc python3-dev musl-dev
# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt .
RUN pip install -r requirements.txt
COPY ./entrypoint.sh .
# copy project
COPY . .
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
Do I just add?
ENV NODE_ENV = 'production'
RUN cd frontend
RUN yarn build
RUN cd ..
NB: My frontend directory lives inside of the app/ directory so it gets copied over in the "copy project" step.
This is a really great and simple approach.
Have you thought of how Django apps (and their templates) could be included in this way?
Would it be possible to have "plugin" apps which "inject" their own frontend parts vie templates into the main template?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.