Is there anyway to use svelte and astro for a front-end and then some how bundle that together to be used as Backend? I really like all the benefits of svelte and astro for front end and I am familiar with flask so I feel like this could work really well for me.
Yes, this is totally possible.
you can run Astro in SSR mode, with any frontend framework e.g. Svelte
, and from there in the frontmatter of .astro files call flask API end points (e.g. await fetch)
here more details about Astro SSR https://docs.astro.build/en/guides/server-side-rendering/
you can also and at the same time, open Astro API endpoints that can be consumed by flask calls. here more details about Astro endpoints routes https://docs.astro.build/en/core-concepts/endpoints/#server-endpoints-api-routes
Related
I am currently diving into the world of Svelte(kit) and I am at the point where I need some help with my decisions.
I will use Flask for the Backend so I tried to serve Svelte from Flask (like in this Git) and for the start, it looks fine.
But i prefer Sveltekit over Svelte, so i tried to serve Sveltekit in the same way as Flask, but I only got "%svelte.head% %svelte.body%" text on the page. What do i need to change?
Why serve Sveltekit from Flask instead of Svelte? For example, i do like the Routing in Sveltekit more than in Svelt. But I don't see the Point to use Endpoints while I could fetch the Flask API direct from the .svelte Page instead of fetching to the Endpoint to fetch then to the Flask API. Or what's wrong with my thinking?
Svelte vs svelte-kit
What you seem to be missing is the difference in svelte and svelte-kit.
Svelte itself makes it easy to write reusable fast and small components. These are independend of any server components. Svelte-kit builds on top of that, to create a full web framework, with potential server components.
In practice that means it provides multiple adapters to deploy a web app built with it to different places, such as netlify, as a express app, or just as a set of static html files, for github/gitlab pages.
For all adapters that are not static solutions, using svelte kit also adds the option to have server side rendering, which can often result in a better user experience.
Svelte-kit Endpoints
Your question about endpoints ties into that. The reason why you would have something to gain from making these endpoints from within svelte kit is twofold:
In your specific case, javascript/nodejs are usually faster then python,
and more importantly, if the endpoints are made with svelte kit, they can be used as part of the server side rendering procedure.
Since everything is happening on the same machine, that can dramatically speed up the whole process.
There is also the aspect that having services with different languages interact can be a large cognitive overhead, and the dtos you are transferring can be difficult to manage.
Approaches
If your existing server component is small, or still in the middle of being built, its probably a good option to switch to svelte-kit entirely, for the resulting speedup, simplicity of only working in one language, and a lot of convenience features that svelte-kit affords you. For that option you would have to familiarize yourself with svelte and svelte-kit a lot more though.
Here is some documentation by svelte-kit on endpoints as well as hooks which are very handy for managing user state.
Endpoints are fairly simple, so as long as you have a good grasp on what you are achiving in them, and some javascript/nodejs knowledge, it shoudln't be too hard.
If your existing server component in python can not be rewritten for a svelte-kit app, because of some unavailable dependencies, or because it's simply too large, you do still have the option of deploying the svelte-kit app as a static page, and then making direct requests to your python based service.
There is also the option of using svelte-kit endpoints as a proxy to make requests to your python service. This strategy fit's more into a microservice architecture, or if you are only making a new frontend for a existing backend application. Still, under the right circumstances a good option.
I would like to create a React SPA, which is fed by querying a Django REST API.
I was reading this, and I encounter this point:
I see the following patterns (which are common to almost every web framework):
React in its own “frontend” Django app: load a single HTML template and let React manage the frontend (difficulty: medium)
Django REST as a standalone API + React as a standalone SPA (difficulty: hard, it involves JWT for authentication)
Mix and match: mini React apps inside Django templates (difficulty: simple)
It seems that in case of an SPA (Single Page Application), it would be better to choose 1. As far as I understand, the React app would just be a big file with all the required css, html and js, right?
So we just create this file, and serve it on a specific endpoint of the Django app. Then, I do not understand the benefits of the "standalone" way of doing things. We would need two different domains, it would cause issues with authentication, and the standalone SPA would in fact just be serving a static file right? Is there a reason why it would be interesting to use a standalone SPA?
But when I read React in Django or React as a standalone?, it is advised to keep front-end and back-end separated. I wonder what I am missing, and what is the benefit of creating a standalone React SPA. reactjs - React in Django or React as a standalone? - Stack Overflow mentions that it would allow backend to be reused by different applications, but I do not understand what would prevent my backend from being reused if it is serving a static file. My backend will not disappear, it will still be here, ready to be reused, right?
pt1. yes the react app is bundled into a couple of files that you can use in your html template
pt2. standalone would be interesting if you already have a large Django project running, and you cannot afford migrating everything to a React SPA
pt3. You are correct in stating the backend is just another application serving content, and can be accessed like any other API. The difference lies in the content being served: When creating a React SPA, the backend is only concerned about what data is requested and what data needs to be persisted to the database. Now your frontend code can focus on specific frontend problems, such as user experience and browsing/navigation of the user: For example utilizing the Redux store, where you can store your JWT token in the browser session, or cache already retrieved data that might be useful on other pages. This offloads the backend considerably because you don't need to send the same data twice.
I want to make some part of my application capable of supporting server rendering. In the project, we actively use vuex and vue router.
We receive all data using api requests
Tell me where to go or provide any working code snippet.
Thank you in advance
An example of an answer might be this. You are creating a fully isolated SPA application with SSR. Django acts only as an API for your application (including you will need to receive data for INITIAL_STATE by API). Next, you start your NodeJs server on any port. Next, you need to configure nginx for redirect requests from port 80 for specific routes to the port of your application.
This is just a theory. Until hands reached a full-fledged example
I'm using django as backend. While reading stuff about meteor, i found django-ddp.
I searched a lot, but I didn't get what django-ddp is for.
I understood that you can use it to connect meteor to your django backend, but what is the use case?
How does the client connect to django and/or meteor? Does meteor have to run on the same server? How are the http requests handled?
Maybe a tiny example would help me to get this.
For me important: Can i use this to combine benefits of django and meteor?
Django DDP provides a Meteor compatible, realtime, latency compensated backend framework for Django (Python) models. It can also serve your Meteor frontend code (HTML/JS/CSS/...) allowing you to avoid using Meteor (and node.js) on the server, whilst serving regular Django views at the same time.
Django is a respected web framework with a powerful object relational mapper (ORM), with support for schema migrations included by default. Django DDP is efficient and secure, using gevent to handle HTTP requests and manage concurrency at the process level, and multiple processes (across multiple hosts) to allow scaling-out to serve many clients simultaneously. WebSockets are handled using gevent-websocket. Combining these aspects with the realtime, latency compensated benefits of Meteor does indeed give you the advantages of both (unless you prefer to run node.js on your backend servers).
If Django DDP is used to serve your Meteor app then the client (browser) will connect to Django DDP automatically. Otherwise, you can connect your Meteor app to Django DDP and use the Django DDP connection like this:
if(Meteor.isClient) {
Django = DDP.connect('http://ddp.example.com/');
Tasks = new Mongo.Collection('myapp.Tasks', {connection: Django});
Django.subscribe('Tasks', {
onReady: function(error, result) {
// Log each matching Task to the browser console in a table
console.table(Tasks.find().fetch());
}
});
}
If you're serving your Meteor app from Django DDP then drop the DDP.connect line and omit the second parameter to new Mongo.Collection.
You might find the Todos example app a useful place to start. It includes a full working example of how to write both the Meteor client app and the Django DDP server app.
Disclaimer: I'm the author of Django DDP - sorry if parts of my answer sound like marketing guff but I'm just trying to answer the first part of the question.
This might be a silly question that might relate to my ignorance about angular js, but is it possible to use a Django framework mostly for backend and database interactions, in conjunction with an Angular JS app/website?
I know angular js still requires Node Js for serving the data so, it seems like that would be a conflict. There was a similar but slightly more technical and specific from what I was looking for here: Django, REST and Angular Routes
What alternatives do I have if I want to experiment with Angular JS but need some database functionality?
Also how do you go about the fact that your code will be open to everyone?
Not a dumb question. But yes, it is totally doable. I put together a git seed for an angular web app with a django rest framework api. Check it out, I think it is exactly what you are looking for. Clone it down and try it out! Easy instructions to follow.
Angular-Django Seed
There is no dependency on NodeJS whatsoever. Your web framework handles server requests, and your angular app runs in the browser. You would use Django to serve the files used by the angular runtime, typically this includes a mix of HTML, JS and CSS files.
Your angular app may request data from the server, in which case it would 'call into' your Django code via an XHR request using the built in $http service (or possibly $resource service).