I want to write a single-page web UI using Flask (and Flask-RESTful) for a REST back-end, and Vue.js for the front-end. The problem is, I'm having a hard time using the two together during development.
I can build Vue components using vue build --prod ... to obtain a JS file that I can serve as a static file using Flask's web server. This file, however, is optimized for production. Without --prod, vue build starts a web server directly, which means that if I start flask run, JS code is served from a different port than my REST backend, which makes it impossible to use (same origin policy).
So my question is: How can I use Flask and Vue.js together during development?
How can I make vue build spit out non-optimized JS files that Flask can serve?
Build in development mode:
vue-cli-service build --mode development
Related
I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.
Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.
My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!
Many thanks in advance!
First, understand the difference between Svelte and SvelteKit. SvelteKit is a front-end + server solution that is a layer above vanilla Svelte. SvelteKit adds things like routing and support for sever(less) functions.
If you want to use Django for all your server-side processing, you should just use (vanilla) Svelte to write independent web components that you call from html served by Django. No need to use SvelteKit if you aren't using any of the extra framework features.
How to write a web component with vanilla Svelte
How to write a web component with SvelteKit.
If you want to just write your API's in Django and do everything else from SvelteKit, I would run both Django and SvelteKit servers from different subdomains and/or ports. Like django.example.com and kit.example.com or example.com:8000 and example.com:3000.
SvelteKit also provides a low-level handle() hook that can bypass SvelteKit, but usually JS/node.js is still used. I think it would be tricky to pass a request from SvelteKit to Django.
I find myself having the same question, it's not perfect but I got it to work with the following:
Create a directory that will contain everything, e.g. my-project
Inside the directory create your Django project, e.g. django-svelte, with django-admin startproject django-svelte
From my-project/django-svelte create an app to contain the svelte app, e.g. frontend, with python manage.py startapp frontend
Inside frontend create two subdirectories templates and static; inside each of them create a frontend directory. (You should have frontend/templates/frontend and frontend/static/frontend in the end)
Inside my-project initialize a svelte-kit project, e.g. client, with npm init svelte client
Inside client install all packages and add #sveltejs/adapter-static with npm install and npm i -D #sveltejs/adapter-static
Replace the content of svelte.config.js with:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app
adapter: adapter({
pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
fallback: null,
precompress: false
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
This will write your HTML, JS and CSS files inside the frontend app.
Create a build with npm run build
Collect static files in Django with python manage.py collectstatic
Run Django with python manage.py runserver or other servers
I'm sure there are simpler ways though :-)
I made a simple template for svelte and django. please check this link: https://github.com/Pei2tech/svelte4django. What you need to add routing to support svelte instead of using sveltekit.
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.
I have created a Angular 2 form which posts the form data to a postgres DB using a Rest API. Now, I want to serve my Angular 2 app on AWS S3. I googled on this and I found that creating a webpack is a solution but not able to create one. I want to know where to start with, to bundle my code and serve it on s3.
GitHub link for Form: https://github.com/aanirudhraj/Angular2form_signaturepad_API
Thanks for the Help!!
The quickest way is to build the app using angular-cli and then deploy the content of the 'dist' directory as a static site in S3 (an S3 bucket can be configured to host a static site; make sure you assing read permission to 'anybody' to avoid http 4xx return codes).
You just need to host it as a static site on S3.
Check this: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
I infer from your code that you are using angular-cli.
Create a dev/production build
ng build --dev / ng build --prod
Content of your dist folder will contain bundled files for deployment. Your primary file for refrence will be 'index.html' as this will load you angular app.
You need to decide what kind of server you'll be using to serve you webapp.
For development purpose when we do ng serve , webpack-dev-server is used as a static file server (local development). I'll recommend should go with the most comfortable/cost effective solution you can have when deploying to actual server.
Static file Server
Directly hosting website is aws space as a static website.
Aspnet Core with static file server middleware. (*)
Nodejs Express with static file server middleware.(*)
Java serverlet for serving static files. (*)
(*)Following aproach will also allow you to have some server-side code if you require in future.
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
When you use aot compile with #ngtools/webpack or whatever,
just put all files in dist directory which have files compiled with aot in your S3 bucket, and I recommend to use aws cloudfront cache for your s3 bucket resources.
I've built out a basic django application, and I'm looking to incorporate react+redux into the app. I've come across several react+redux templates like the react-redux-starter-kit and redux-webpack-es6-boilerplate:
These are awesome, except they both run node servers. I'm wondering:
Does there exist some sort of a tutorial or template that has the same features (webpack, Hot Module Replacement, linting, testing, abides by Fractal Project Structure guidelines, etc...) but does not run a node server, so I can just copy it into my django application (I realize I'd have to do a fair bit of configuration to get everything working smoothly).
Is it ok to run the webpack server within my django application? (Basically node would be running within django) Are there any downsides in doing this?
I've tried altering the above two templates, but they are pretty dense and complicated. Any advice would be very much appreciated!
I don't see any reason to mixing up django and react app.
I would prever leave them as two independent parts of your application: SPA (react + redux) + API (django)
If you already have django app and just need to add some react pages into, then build react app as static files and place it outside your django project, and configure your reverse proxy server (nginx) to load those new pages as static pages (react).
I'm a django newbie. I've read that all django projects, deployed in production environment, should serve media files (uploads) through web server such as apache. My question is - why is that?
There are lots of PHP frameworks - eg. symfony 1 and 2 - which don't follow the rule. Once you've made your app accessible through a web server, you don't have to change anything depending on the env you deploy. There is just the DOCUMENT_ROOT configured on the web server and somewhere inside this directory lies the upload directory - that's all. You can be sure that no one will access PHP, sql files and so on - thanks to the proper framework architecture and the document root. Why is it different in django?
edit: besides, preparing different code for different environments (e.g. this) is quite a bad approach, since you can't use exactly the same code to deploy a project in different envs (and the code from the link makes sense only for debug env.
Because with PHP your code is served from web server's public directories together with static and media files. So when you request any of these static files web server serves them directly without executing any PHP code along the way.
In Django your code is running separately and all requests are processed by python code in Django. This is inefficient to serve static files, it's more efficient to serve allow a web server like Apache or Nginx to serve them directly without going through any python code.