Vue.js + Django - configuración para desarrollo con webpack y HMR
Download as PPTX, PDF2 likes3,267 views
The document discusses integrating Vue.js with Django, highlighting the benefits of using a Single Page Application (SPA) architecture for backend interaction, including authentication and data persistence. It provides a detailed guide on how to set up a Vue.js frontend with Django as the backend, illustrating configurations using webpack, API implementation, and user sessions. The conclusion includes references to resources for further learning about Vue.js, webpack, and Django integration.
![Todo junto
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
…
plugins: [
new BundleTracker({filename: './webpack-stats.json'})
]
}
// frontend/webpack.conf.js
{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}
<div id="app"></div>
{% render_bundle 'main' %}
{% endblock %}
{# backend/templates/index.html #}
{
"status": "done",
"publicPath": "http://localhost:8080/dist/",
"chunks": {
"main": [
{
"name": "build.js",
"publicPath": "http://localhost:8080/dist/build.js",
"path": "/Users/jami/…/gif_catalog/frontend/dist/build.js"
}
]
}
}
// frontend/webpack-stats.json
…
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR,
'frontend/webpack-stats.json'),
}
}
# settings.py](https://image.slidesharecdn.com/intro-to-vue-with-django-170913084946/85/Vue-js-Django-configuracion-para-desarrollo-con-webpack-y-HMR-10-320.jpg)
![def index(request):
return render(request, 'index.html', {})
# backend/views.py
{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}
<div id="app"></div>
{% render_bundle 'main' %}
{% endblock %}
{# backend/templates/index.html #}
Django
:8000
Webpack
:8080
urlpatterns = [
url(r'^', views.index),
]
# backend/urls.py
App.vue
main.js
*.vue
localhost:8000/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
…
</head>
<body>
<div id="app"></div>
<script type="text/javascript"
src="http://localhost:8080/dist/build.js">
</script>
</body
</html>
HMRbuild.js](https://image.slidesharecdn.com/intro-to-vue-with-django-170913084946/85/Vue-js-Django-configuracion-para-desarrollo-con-webpack-y-HMR-11-320.jpg)
![Webpack: detalles de configuración
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: 'http://localhost:8080/dist/',
filename: 'build.js'
},
module: {
...
},
devServer: {
historyApiFallback: true,
noInfo: true,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'})
]
}
url absoluta
incluyendo puerto
activar CORS para que el cliente
HMR pueda hacer peticiones al
devServer de webpack
// webpack.config.js](https://image.slidesharecdn.com/intro-to-vue-with-django-170913084946/85/Vue-js-Django-configuracion-para-desarrollo-con-webpack-y-HMR-12-320.jpg)
![Implementar una API ¿REST?
urlpatterns = [
url(r'^api/pics', api.pics),
url(r'^', views.index),
]
# backend/urls.py
def pics(request):
count = GifPicture.objects.all().count()
all_ids = range(count)
random.shuffle(all_ids)
picked_ids = all_ids[:18]
gif_pictures = GifPicture.objects
.filter(id__in=picked_ids)
.order_by('-upload_date')
result = {
'pics': gif_pictures,
}
return JsonResponse(result)
# backend/api.py
import axios from 'axios';
export default {
getRandomPics() {
return axios.get('/api/pics')
.then(response => {
return response.data.pics;
});
},
}
// gifPicsApi.js
Django
:8000
…
<script>
import gifPicsApi from '../services/gifPicsApi.js';
export default {
…
mounted() {
gifPicsApi.getRandomPics().then(pics => {
this.pics = pics;
});
},
};
</script>
// GifHome.vue](https://image.slidesharecdn.com/intro-to-vue-with-django-170913084946/85/Vue-js-Django-configuracion-para-desarrollo-con-webpack-y-HMR-14-320.jpg)
![Rutas
urlpatterns = [
url(r'^api/suggestions/$', api.suggestions),
url(r'^api/search/$', api.search),
url(r'^api/pics/(?P<id>[0-9]+)$', api.pic_details),
url(r'^api/pics/$', api.pics),
url(r'^', views.index),
]
# backend/urls.py
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: GifHome
},{
path: '/detail/:id',
name: 'detail',
component: GifDetail,
props:true
},{
path: '*',
component: Error404
}, // Not found
],
});
# router.js
urlpatterns = [
url(r'^admin/', admin.site.urls),
url('^', include('django.contrib.auth.urls')),
url(r'^', include('backend.urls'))
]
# urls.py
/login
/logout](https://image.slidesharecdn.com/intro-to-vue-with-django-170913084946/85/Vue-js-Django-configuracion-para-desarrollo-con-webpack-y-HMR-18-320.jpg)
Vue.js + Django - configuración para desarrollo con webpack y HMR
- 1. Vue.js con Django ¿tiene sentido? @javierabadia @VueJSMadrid
- 2. ¿Tiene sentido una SPA con backend? • Autenticación • Persistencia • Proceso de Datos • Acceso a almacenes de datos externos • elasticsearch • mongodb • … • Acceso a APIs externas • …
- 3. ¿por qué Django frente a Node.js?
- 4. La experiencia ‘óptima’ de desarrollo • Trabajar de forma unificada (mismo IDE) • Desarrollo en el backend • debugging • breakpoints, etc • Desarrollo en el frontend • con agilidad • usando Hot Module Replacement (HMR)
- 5. La estructura clásica de Django Vistas Templates Modelos ORM Autenticación Middleware Formularios Administración HTML
- 6. Ejemplo: Catálogo de GIFs para IoT http://localhost:8000/ http://localhost:8000/detail/323
- 7. DEMO
- 8. Arquitectura de una SPA de Vue.js $ vue init webpack-simple frontend $ cd frontend $ yarn $ npm run dev localhost:8080
- 9. El puente entre Django y Webpack $ cd frontend $ npm install --save-dev webpack-bundle-tracker # (en un virtualenv, por supuesto) $ pip install django-webpack-loader
- 10. Todo junto var path = require('path') var webpack = require('webpack') var BundleTracker = require('webpack-bundle-tracker'); module.exports = { … plugins: [ new BundleTracker({filename: './webpack-stats.json'}) ] } // frontend/webpack.conf.js {% extends 'base.html' %} {% load render_bundle from webpack_loader %} {% block content %} <div id="app"></div> {% render_bundle 'main' %} {% endblock %} {# backend/templates/index.html #} { "status": "done", "publicPath": "http://localhost:8080/dist/", "chunks": { "main": [ { "name": "build.js", "publicPath": "http://localhost:8080/dist/build.js", "path": "/Users/jami/…/gif_catalog/frontend/dist/build.js" } ] } } // frontend/webpack-stats.json … WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'dist/', 'STATS_FILE': os.path.join(BASE_DIR, 'frontend/webpack-stats.json'), } } # settings.py
- 11. def index(request): return render(request, 'index.html', {}) # backend/views.py {% extends 'base.html' %} {% load render_bundle from webpack_loader %} {% block content %} <div id="app"></div> {% render_bundle 'main' %} {% endblock %} {# backend/templates/index.html #} Django :8000 Webpack :8080 urlpatterns = [ url(r'^', views.index), ] # backend/urls.py App.vue main.js *.vue localhost:8000/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> … </head> <body> <div id="app"></div> <script type="text/javascript" src="http://localhost:8080/dist/build.js"> </script> </body </html> HMRbuild.js
- 12. Webpack: detalles de configuración var path = require('path') var webpack = require('webpack') var BundleTracker = require('webpack-bundle-tracker'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: 'http://localhost:8080/dist/', filename: 'build.js' }, module: { ... }, devServer: { historyApiFallback: true, noInfo: true, headers: { 'Access-Control-Allow-Origin': '*' } }, plugins: [ new BundleTracker({filename: './webpack-stats.json'}) ] } url absoluta incluyendo puerto activar CORS para que el cliente HMR pueda hacer peticiones al devServer de webpack // webpack.config.js
- 14. Implementar una API ¿REST? urlpatterns = [ url(r'^api/pics', api.pics), url(r'^', views.index), ] # backend/urls.py def pics(request): count = GifPicture.objects.all().count() all_ids = range(count) random.shuffle(all_ids) picked_ids = all_ids[:18] gif_pictures = GifPicture.objects .filter(id__in=picked_ids) .order_by('-upload_date') result = { 'pics': gif_pictures, } return JsonResponse(result) # backend/api.py import axios from 'axios'; export default { getRandomPics() { return axios.get('/api/pics') .then(response => { return response.data.pics; }); }, } // gifPicsApi.js Django :8000 … <script> import gifPicsApi from '../services/gifPicsApi.js'; export default { … mounted() { gifPicsApi.getRandomPics().then(pics => { this.pics = pics; }); }, }; </script> // GifHome.vue
- 15. Autenticación Una posible implementación: 2PA http://localhost:8000/login http://localhost:8000/* create session redirect set cookie vue-routing
- 16. Django + auth + sessions <script> export default { name: 'app', data() { return { msg: 'Welcome to Your Vue.js App!', user: {}, } }, created() { this.user = window.user; }, } </script> // App.vue @login_required def index(request): context = { 'user': request.user, } return render(request, 'index.html', context) # backend/views.py {% extends 'base.html' %} {% load render_bundle from webpack_loader %} {% block content %} <div id="app"></div> <script> var user = { username: "{{ user.username }}", email: "{{ user.email }}", }; </script> {% render_bundle 'main' %} {% endblock %} # backend/templates/index.html
- 17. DEMO
- 18. Rutas urlpatterns = [ url(r'^api/suggestions/$', api.suggestions), url(r'^api/search/$', api.search), url(r'^api/pics/(?P<id>[0-9]+)$', api.pic_details), url(r'^api/pics/$', api.pics), url(r'^', views.index), ] # backend/urls.py Vue.use(Router); const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: GifHome },{ path: '/detail/:id', name: 'detail', component: GifDetail, props:true },{ path: '*', component: Error404 }, // Not found ], }); # router.js urlpatterns = [ url(r'^admin/', admin.site.urls), url('^', include('django.contrib.auth.urls')), url(r'^', include('backend.urls')) ] # urls.py /login /logout
- 19. Comentarios Finales • APIs • REST? • ‘a pelo’ • django-tastypie • django-rest-framework • GraphQL • graphene (django) • apollo (vue) • (no lo he probado) • Server Side Rendering • nope • seeding • sip • SEO • pre-render • inyectar contenido en Django
- 20. Conclusión
- 21. Referencias • Doc de Vue: https://vuejs.org/v2/guide/single-file-components.html • Doc de Webpack: https://webpack.js.org/ • SurviveJS: https://survivejs.com/webpack/ • webpack-bundle-tracker: https://github.com/ezhome/webpack-bundle-tracker • django-webpack-loader: https://github.com/ezhome/django-webpack-loader • hello-vue + Django project: https://github.com/rokups/hello-vue-django • modernize Django frontend: http://owaislone.org/blog/modern-frontends-with-django/ • Django + REACT with HMR: http://owaislone.org/blog/webpack-plus-reactjs-and-django/
Editor's Notes
- #3: la mayoría de aplicaciones que se ven en los ejemplos son “estáticas”… se sirven ficheros al cliente y todo se ejecuta en el cliente podrías almacenar los ficheros en un servidor “tonto” (S3) y no necesitas más pero enseguida se queda corto, en la vida real necesitas un backend
- #4: node es la elección natural cuando pensamos en un backend para vue un solo lenguaje isomorphic code server-side-rendering async I/O django Django has neatly packaged the best of web development in a very convenient project Access to other libs p.ej. pandas, machine learning, image recognition, ORM… laravel: default front-end for laravel (Jul 2016), made the framework take off
- #5: yo uso PyCharm pero funciona igual lanzando los comandos desde el terminal y usando SublimeText u otro editor
- #6: Vistas, Templates ORM, Modelos: migraciones, esquemas… Middleware, Autenticación Formularios, Administración Django has neatly packaged the best of web development in a very convenient project
- #9: webpack HMR DevTools ver el index.html
- #11: webpack-bundle-tracker plug-in de webpack genera un fichero ’webpack-stats.json’ con los resultados de la compilación django-webpack-loader módulo de django lee el fichero ‘webpack-stats.json’ y renderiza las tags <script> apropiadas en una plantilla de Django Django debe servir el index.html de nuestra app El index.html ‘tira’ de los bundles generados por webpack webpack escucha, implementa HMR
- #15: En el servidor Simplemente usar JsonResponse() Django REST Framework no es necesario experiencia similar a los formularios de Django En el cliente axios
- #16: Django sirve 2 vistas vista de login vista de SPA Django mantiene las sesiones que se comparten con el cliente mediante una cookie Django comprueba la cookie/sesión en cada llamada podemos embeber la identidad en la plantilla Hay otras formas SPA -> TokenAuthentication (Django REST Framework) Types of authentication SessionAuthentication TokenAuthentication … https://stackoverflow.com/a/27582256/79536 http://www.django-rest-framework.org/topics/ajax-csrf-cors/
- #19: Django devuelve lo mismo para todas las rutas El vue-router selecciona la vista correcta
- #20: https://www.pydanny.com/choosing-an-api-framework-for-django.html https://django-tastypie.readthedocs.io/en/latest/ http://www.django-rest-framework.org/ https://github.com/graphql-python/graphene https://vuejsdevelopers.com/2017/04/01/vue-js-prerendering-node-laravel/