I am new to Flask and building a web app that uses Flask and AngularJS. My understanding is that the static directory is the place to store AngularJS files like javascript and templates.
I wonder if there is a stable alternative to Html/Jinja that I can use for templates. And if there is, how can I enable it to work with template files inside the static directory?
I was looking to PyJade but didn't get how to get it working with the web assets pipeline.
Would appreciate any example or recommendation.
You could use Mako. See here how to install and use it. Also you could use Genshi.
Hi #user3745936 I'm Syrus, creator of pyjade. What is the code you are trying to use?
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 am trying to reuse one webapp that's been open sourced a while ago that was written using some Django and ReactJS... Now I am a devops engineer so my skillset when it comes to JS and even Django are fairly limited so I am stuck .. My main problem is that this webapp can run just fine locally.. so I can start it and connect using http://localhost:8000 , but whenever I try and set it up on a server and make it "public" for the internal network it fails with accessing all the JS assets.
I know the problem comes with my webpack configs but I can't sort it out.. Been trying all day but I can't even find the proper documentation since it's using Webpack 2.5.
https://github.com/tsprasath/estate/tree/master/webpack
I am attaching the link to the webpack configs from the repo.. If anyone can at least point me to the right thing to look at, that would be helpful.
Thanks in advance!
I dont think its an issue with your webpack. You are trying to run your react app (which is at client side) from django server. I believe you will need to use some kind of middleware to let django know that it needs to use static files generated for react using webpack. I dont know exactly how its done, but same procedure is followed if react app needs to be served from node/express server.
Or see if this helps: https://github.com/nicholaskajoh/React-Django
Not a web developer, but currently playing with cordova and would like to use django to use python to implement backend functionality. As I (vaguely) understand it, cordova manages frontend stuff and django is mostly for backend stuff. So is it possible to use django as a backend for a cordova project (eg. directly use preexisting django templates in a cordova app)? If so, how? Is there some kind of special communicationn that I'd need to code myself?
(My uneducated guess would be to initialize the django project inside the cordova www folder, but this seems wrong). And if this is a totally wrong way to think about this problem, let me know.
You could use Django as your backend and implement a REST like API (urls that accept and return JSON data) in it. There are useful tools/libraries for that, for example django-rest-framework.
Then you would call those endpoints (URLs) from your frontend, which can be written in cordova or any other JS frontend frameworks.
As you already pointed out, I suggest keeping frontend and backend code in separate folders.
I started and stopped asking several questions to help me get (in the immediate need) react-tooltip, which does not advertise a non-CommonJS distribution. But I expect to want to do other things that call for CommonJS.
I know how to include packages in Node, but I found myself starting to ask various XY-like questions about implementation.
What can / should I do to my Django backend so I can, in the first instance:
var reacttooltip = require('react-tooltip');
You don't need to do anything to your Django backend unless you want to have Django compile your CSS and JavaScript for you (by using django-pipeline).
What you want to look into is using more modern front-end tooling, like webpack and gulp or stick to Make for building your front-end project.
Furthermore, what you want to have in your <script> tags is a bundled JavaScript file compiled with above tools in which you boot your JavaScript application.
I would like to avoid to manage a big index.html file containing all my handlebars template.
I read multiple blogs with different solutions but I'm not sure of the best one.
Is there someone from the official ember.js team able to provide the best practice for this ?
Is grunt the best solution ?
Currently I do not use any special backend like node.js. Only a basic http apache server. The REST API is provided by a Tomcat server
IMO if you are not a rails developer then one of the best option would be indeed grunt or much better yeoman (http://yeoman.io/). Using the generator-ember (https://github.com/yeoman/generator-ember) and yeoman togheter will get you up and running in no time. For example after installing yeoman and the generator-ember you can create a full project structure with a simple yo ember, this will create all the necessary folder for views/controller/routes/templates where you can start coding right away. You should give it a try.
Edit
As stated in the comment of #Toran Billups, the ember core team is working on this project (https://github.com/stefanpenner/ember-app-kit) which will be grunt based and it will work using modules and much more awesome stuff.
Hope it helps.