Warning: This project is in Alpha and key features are still under active development.
DxSvelte is a powerful integration package that brings Svelte to your Django web applications with a simplified workflow, closer to how you would normally Render views. Enjoy the full benefit of SSR in your next single-page application (SPA).
goto(path)
as a @common
import function.The new documentation is now available to read. And it was built with DxSvelte!
$ServerSideProps
object in your Svelte template file.To get started with DxSvelte, cd
into your Django project and initialise DxSvelte so it's ready to start building your SPA:
npx dxsvelte@alpha
Follow the wizard and you should now have a directory tree resembling the following:
my_project_name
βββ manage.py
βββ dxsvelte.py
βββ package.json
βββ tsconfig.json
βββ my_project_name
β βββ ...
βββ static
β βββ index.html
β βββ ...
βββ ...
At this point, you can start building out your individual Django apps. To 'tag' them so that they are rolled up into the SPA, you need to assign names to your paths and prefix them with '$', like so:
# Example app called 'home_page'
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='$index'),
path('about/', views.about, name='$about'),
]
Then, within the corresponding views:
from dxsvelte import render
def index(req):
# Your normal view logic goes here
return render(req, data?)
def about(req):
return render(req)
Build out your view components, and optionally within your main app folder create your own layout.svelte file:
my_project_name
βββ manage.py
βββ dxsvelte.py
βββ package.json
βββ tsconfig.json
βββ home_page
β βββ ...
β βββ views
β βββ index.svelte
β βββ about.svelte
βββ my_project_name
β βββ layout.svelte
βββ ...
If you do write your own layout.svelte component (recommended), ensure that you leave the '<slot/>' element in there somewhere - that's what gets replaced with your page contents. For now, more advanced layouts are not supported.
<h1>Your Website Name.</h1>
<slot/>
Finally, build it.
npm run compile
That's it! Now you can start building your Svelte-powered hybrid SSR SPA, all while using Django as your back-end.
You can now pass your server-side props as a Dict from your Django view directly to Svelte, while still taking full advantage of SSR. Usage is simple, but be sure to validate your objects on the front-end before accessing them. The data argument is optional and can be omitted if you have no server-side properties to pass.
# urls.py
urlpatterns = [
path('', views.index, name='$index'),
path('about/<str:company>/', views.about, name='$about'),
]
# views.py
import render from dxsvelte
def about(req, company):
data = {
"aboutUsText": "Lorem ipsum dolor sit amet, consectetur adip...",
"company": "You are viewing the page for " + company + "!"
}
return render(req, data)
Meanwhile, in your about.svelte component over in the ./views directory:
<script>
// The import statement from @page below retrieves the server-side props.
// The line beneath that registers 'data' as a reactive variable from it.
import { ServerSideProps } from "@page";
$: data = $ServerSideProps
let incrementedValue = 0
const increment = () => {
incrementedValue ++
}
</script>
{#if data?.company && data.aboutUsText}
<h1>About {data.company}.</h1>
{data.aboutUsText}
{/if}
<button on:click={increment}>Number Goes Up</button>
We welcome contributions to DxSvelte! If you'd like to contribute, please open an issue or pull request on our GitHub repository.
DxSvelte is released under the MIT License.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the βSoftwareβ), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED βAS ISβ, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.