In the previous part, we built a Django backend and GraphQL API. In this part, we will integrate the Django project with Svelte.
Thus, it's necessary to follow Django and Modern JS Frameworks - Backend.
When I was building the website of Izmir alarm sistemleri, I have time to experiment. At this time, I try Svelte along with Django. Although we decided on using WordPress, this tutorial was made the days on that time.
Related: The Copywriting Tools for Blogging
Tools for Blogging
Creating a website is the first step for many. Also, crafting quality content is another challenge for people. If you would like to increase your content creation productivity, check Awesome Content Creation Tools.
What is Svelte and How it differs from React?
I like Python and its ecosystem. I also like Just-In-Time compilers and language supersets like Cython, which really boosts Python performance. When I learned that JavaScript is an interpreted language, I tried to look Cython equivalent of it.
Because of different browser compilers, I couldn’t find what I want and it made me disappointed. Maybe it is the reason I feel the excitement when I give Svelte a chance.
If you didn't try Svelte before, you may give it a chance. Svelte's interactive API and tutorials are also worth praising. Being familiar with Svelte API and Tutorials is definitely recommended. If you like the reactivity concept, you could also check my first impressions on SolidJS.
When I’m talking about Svelte, I’m strictly speaking about Svelte 3. It is another JavaScript library written by Rich Harris. What makes Svelte special is:
- It is truly a reactive library and it doesn’t use virtual DOM like React. Therefore, there are no VDOM diff calculations.
- It has a compiler and when you build your application it produces optimized JavaScript code. In the end, Svelte code almost disappears and you have vanilla JavaScript.
- You can write HTML, CSS, and JavaScript in a single file component and there will be no global CSS pollution.
Yes, React was revolutionary. However, how many times we have to deal with virtual DOM synchronization problems or the extra burden for even very small operations are the other side of the medallion.
Svelte Configuration with Webpack from Scratch
Step - 1: Configuring the development environment
(Note: if you already installed the node, you can skip this part)
We will use the Node backend for the development environment.
Therefore, we need to install Node and Node package manager npm.
To prevent potential dependency problems, we will create a clean node environment.
I will use NVM which is a Node version manager, and it allows us to create isolated Node environments.
In your terminal, run the code below.
Setup Node Environment with NVM
In your terminal, run the code below.
Now we can create a frontend directory in the Django project. Go to the root directory of the project. 'backend/'
In your terminal copy and paste the code.
Now we can install front-end and development libraries.
Update package.json scripts part as below. Your file should look like this and ignore the versions.
Let’s create application necessary files and folders for Svelte. In the root directory of the project 'backend/’ , open your terminal.
Step 2 - Webpack configuration
What is webpack?
Webpack is a module bundler and a task runner.
We will bundle all our JavaScript applications including CSS styling into two JavaScript files, if you prefer you can output only one file.
Because of the rich plugins, you can also do many things with Webpack like compressing with different algorithms, eliminate unused CSS code, extracting your CSS to different files, uploading your bundle to cloud providers like S3, etc…
I made two different Webpack settings in one file.
One is for a development environment, and the other one is for a production environment.
Also, note that we do not optimize these configurations.
Copy/Paste the following code into the webpack.config.js file.
Step 3 - Create a Single-Page-App witth Svelte
First, fill in the 'backend/FRONTEND/index.js’.
Next, fill the ‘App.svelte’ file with proper logic.
Before routing pages, I will first write the client-side queries. Please open api.js and copy/paste the code below.
Now, route pages: MovieList.svelte will be shown on the homepage as we defined in the above. If the user clicks any movie card, then MoviePage.svelte file will be rendered.
Fill the MovieList.svelte.
Also, fill MoviePage.svelte according to this.
I'm also assuming that you'll ignore the styling of the app because it is not in the scope. However, styling is as important as content. You can also see the free design resources and graphic tools.
Start the Svelte App in Development Environment
In the development environment, we will run two different servers.
When our Svelte app is running, it requests data from the Django server.
After the response comes, the Webpack Development server renders the page with proper data. This is only for the development stage.
When we finish the front-end development, we will build and bundle a client-side app.
After then we will start the Django server, and it will be the only server we will use in the production environment, as I promise before.
Execute the below command and make the Django server ready for front-end requests.
Open another terminal and change the directory to the ‘backend/FRONTEND’
When Svelte app successfully compiled, open your browser ‘localhost:8080/’.
You should see similar screen like the image below.
MovieList.svelte will render the screen
MoviePage.svelte screen will render this if the user clicks any movie card
What will be happened at the moment?
At this moment, “/“ root page will be rendered. Because of our routing configurations, MovieList.svelte file will be rendered first. If the user clicks any film card, then the MoviePage.svelte file will be rendered regarding its slug value.
We successfully integrated Django and Svelte. Now make the production build.
Django and Svelte Integration in Production Environment
Now you can stop the webpack server while keeping the Django server alive.
In the backend/FRONTEND/ directory, execute the command below.
This will build and bundle all your Svelte app in the bundle.js file. When the bundling process is over, go to the URL of the Django server in your browser. --> “127.0.0.1:8000/”
FINISHED
You may also be interested to see those packages from Paul Stiverson. He made two packages for Django and Svelte. Those are