What steps do I need to take to develop a Django and SvelteKit web application?

While I have experience with Bootstrap and Django, I am new to other frontend frameworks like Angular, React, and SvelteKit. Recently, I decided to give SvelteKit a try but I'm feeling overwhelmed by my lack of familiarity with it.

Following the tutorial on their website, I was able to set up both my Django project and a SvelteKit project. However, now I'm unsure how to integrate the two. Should I run both servers simultaneously on different ports and fetch data from Django's JSON APIs into my Svelte frontend? Or is there a more streamlined approach?

I'm wondering if there is a way for my Django app to render the Svelte files from the Svelte server. At this point, I feel a bit lost and would appreciate any help or resources that can guide me through this process. I haven't been able to find much information online, so any assistance would be greatly appreciated!

javascriptdjangosveltesveltekitweb-development-server

Answer №1

To fully grasp the distinction between Svelte and SvelteKit, it's important to note that SvelteKit is a front-end + server solution built on top of vanilla Svelte. This includes added functionalities such as routing and support for server(less) functions.

If your intention is to utilize Django for all your server-side operations, sticking with (vanilla) Svelte to develop standalone web components called from HTML served by Django would suffice. In this scenario, there may be no need for the additional features offered by SvelteKit.

If you opt to handle APIs in Django while utilizing SvelteKit for other functionalities, running separate Django and SvelteKit servers on distinct subdomains or ports like django.example.com and kit.example.com, or example.com:8000 and example.com:3000, could be beneficial.

In addition, SvelteKit offers a low-level handle() hook that allows bypassing SvelteKit, although Javascript/node.js are typically still employed. Passing requests from SvelteKit to Django might pose some challenges.

Answer №2

Looking for an easy way to integrate svelte with django? Check out my template at: https://github.com/Pei2tech/svelte4django. I've included instructions on adding routing to make it compatible with svelte without the need for sveltekit.

Answer №3

When faced with the same question, I found a way to make it work by following these steps:

  • Start by creating a directory to house everything, for example my-project

  • Within this directory, create your Django project named django-svelte using 

    django-admin startproject django-svelte

  • Next, from my-project/django-svelte, create an app to hold the Svelte app, like frontend, using 

    python manage.py startapp frontend

  • In the frontend directory, create two subdirectories called templates and static, each containing a frontend directory (resulting in frontend/templates/frontend and frontend/static/frontend)

  • Initialize a Svelte-kit project named client inside my-project with npm init svelte client

  • Within the client directory, install all necessary packages and add @sveltejs/adapter-static using npm install and 

    npm i -D @sveltejs/adapter-static

  • Replace the contents of svelte.config.js with the provided code snippet

// Code snippet goes here

This setup will place your HTML, JS, and CSS files within the frontend app

  • Generate a build using npm run build

  • Collect static files in Django with python manage.py collectstatic

  • Run Django using python manage.py runserver or another suitable server

There may be simpler approaches out there, but this worked for me :-)

Answer №4

I've recently discovered the incredible Django SvelteKit template which combines the power of Svelte5 with Django. This template comes fully equipped with essential features like authentication (register, login, forgot/reset password), forms-actions, mailing, toast/flash messages, validations, and more. It seamlessly connects the Django backend with SvelteKit forms-actions, eliminating the need for extra fetch calls.

One standout feature is the $api/ alias provided for easy manipulation of fetch calls.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

It appears that the lodash throttle function is not being invoked

I recently started utilizing lodash's throttle function to control the number of calls made to an API. However, I am facing difficulties as the call doesn't seem to be triggered successfully. Below is a simplified version of what I have attempte ...

javascriptapilodashthrottling

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascriptjqueryhtmlcss

Tips for meeting a JavaScript door unlocking condition with an HTML button

In this tutorial, the https://www.w3schools.com/nodejs/nodejs_raspberrypi_webserver_websocket.asp link demonstrates an event handler that works based on an HTML checkbox. I am interested in achieving a similar functionality, but with a button instead, to t ...

javascripthtmlnode.jssocket.ioraspberry-pi

Designating a certain function to a designated button

On my page, I have three different forms with submit buttons in each. There is a code that is supposed to change the value of a button in a specific form when clicked. However, whenever I click on any submit button, all the values in the buttons of the v ...

javascriptjqueryajax

When `rxjs` repeat and async pipe are applied and then removed from the DOM, the resulting value becomes null

One of the classes I have is responsible for managing a timer. It contains an observable that looks like this: merge( this._start$, this._pause$ ) .pipe( switchMap(val => (val ? interval(1000) : EMPTY)), map( ...

javascriptangularrxjs

Unable to transfer JavaScript values to PHP server

I am trying to retrieve values from a MySQL database and populate a table based on the user's selection from a dropdown. However, I am facing an issue where the selected value is not being sent to the server. Below is the code snippet: Code to fetch ...

javascriptphpajax

Testing AngularJS components using mocking the document object

My current task involves testing an angular service that performs DOM manipulations using the $document service with jasmine. For example, it may append a directive to the <body> element. The service in question might look like this: (function(modu ...

javascriptunit-testingangularjstestingdocument

Using JLinq for Date-Based Filtering of JSON Data

I have been trying to use JLinq for filtering JSON data, but I am facing an issue with filtering by date. Despite attempting different methods, the problem persists. Below is a snippet of my code: //This works jlinq.from(myData) .select(function ...

javascriptjson

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

Use jQuery to dynamically add a button to a table row

I have an array of JSON objects in JavaScript that I'm parsing from a JSON formatted string. My current approach involves looping through the array and adding the data to a table on the page. jQuery Code: $.each(objArr, function(key, value) { var ...

javascriptjqueryjson

Monitor elements in real-time as they are inserted into the DOM using a Chrome Extension

In the process of developing a Chrome extension, I am tackling the task of removing or hiding specific elements based on their id/class. While accomplishing this after the DOM is loaded poses no issue, it does result in a noticeable "blink" on the page dur ...

javascriptgoogle-chrome-extension

Issue: Unable to center map on a feature using Angular 8, Ionic 5, and Openlayers 6

I am trying to center an OL Map on a specific feature that is referenced by a class property. When I click on the button to trigger the centering, the method below is called but the map does not move as expected. I have attempted this in both Firefox and ...

javascriptangularionic-frameworkopenlayers

Setting up Webpack for ES6 modules

Just dipping my toes into ES6! After completing all the webpack installation steps, I excitedly started creating some files following this picture https://i.sstatic.net/LYXCy.png Once I moved on to writing code in index.js and tried running it with the ...

javascriptnpmecmascript-6

"What is the best way to create a hyperlink in Google Apps Script using HTMLService? (encountering an error with the connection to accounts.google.com

Trying to utilize the Apps Script method setContent() in Google Apps Script to insert a link into a basic index.html file. var newDocLink = "https://docs.google.com/document/d/1loBt7T7-4qd0ORBXiTFeDQxuG..."; // newDocLink variable is set with a Googl ...

javascripthtmlgoogle-apps-scriptgoogle-apps-script-editor

Login System Encounters Syntax Error Due to JSON Input Ending Abruptly

I'm currently working on implementing a login system, but I've run into an issue with unexpected end of JSON input. It's a bit confusing since the code works fine on another page. The error specifically points to line 12 in my JavaScript. H ...

javascriptphpjsonajaxsession

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

javascriptangularlocal-storageangular2-services

Diving deeper into the functionalities of the express.js response module

I am currently developing an application that requires the use of two different templating languages. The code snippet below demonstrates how I am incorporating Jade and Lodash templates: app.get('/route1', function(req, res) { res.render(&apos ...

javascriptnode.jsexpress

Determine the combined height of the initial group of elements using jQuery

Is there a way to calculate the total height of the first three elements with the "latest" class in my Angular directive using the Ticker jQuery plugin? <div class="myWrapper" ticker> <div> <div ng-repeat="latest in latests" class="late ...

javascriptjqueryangularjs

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

In order to create a quiz, I am looking to extract 'questions' from various 'topic' arrays. These topics are selected based on the user's preference and are used to populate a question bank for a 20-question quiz. The topics rated ...

javascriptarraystypescriptsortingweighting

difficulties in configuring google analytics analytics.js to trigger events upon page load

I need assistance with setting up an analytics event that triggers on page load. I am currently using window.onload if there is no other JavaScript on the page, or $(document).ready() if jQuery is loaded. The analytics is loading correctly and working fin ...

javascripteventsgoogle-analyticsanalytics.js