var c=Object.defineProperty,m=Object.defineProperties;var h=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var l=(t,o,a)=>o in t?c(t,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[o]=a,e=(t,o)=>{for(var a in o||(o={}))i.call(o,a)&&l(t,a,o[a]);if(n)for(var a of n(o))s.call(o,a)&&l(t,a,o[a]);return t},p=(t,o)=>m(t,h(o));var d=(t,o)=>{var a={};for(var r in t)i.call(t,r)&&o.indexOf(r)<0&&(a[r]=t[r]);if(t!=null&&n)for(var r of n(t))o.indexOf(r)<0&&s.call(t,r)&&(a[r]=t[r]);return a};const makeShortcode=t=>function(a){return console.warn("Component "+t+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",e({},a))},BookmarkCard=makeShortcode("BookmarkCard"),layoutProps={},MDXLayout="wrapper";function MDXContent(a){var r=a,{components:t}=r,o=d(r,["components"]);return mdx(MDXLayout,p(e(e({},layoutProps),o),{components:t,mdxType:"MDXLayout"}),mdx("p",null,"In the previous part, we built a Django backend and GraphQL API. In this part, we will integrate the Django project with Svelte."),mdx("p",null,"Thus, it's necessary to follow ",mdx("a",e({parentName:"p"},{href:"/post/django-and-modern-js-libraries-backend/"}),"Django and Modern JS Frameworks - Backend"),"."),mdx("p",null,"When I was building the website of ",mdx("a",e({parentName:"p"},{href:"https://www.filizguvenlik.com.tr/"}),"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."),mdx("p",null,"Another shameless plug of mine is the article that reviews ",mdx("a",e({parentName:"p"},{href:"https://bloggingplatforms.app/blog/best-blogging-platforms-for-developers"}),"Best Blogging Platforms for Developers")),mdx("p",null,"Related: The Copywriting Tools for Blogging"),mdx("h4",null,"Tools for Blogging"),mdx("p",null,"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 ",mdx("a",e({parentName:"p"},{href:"/productivity/content-creation-tools/"}),"Awesome Content Creation Tools.")," and ",mdx("a",e({parentName:"p"},{href:"/blogging/best-blogging-sites/"}),"Best blogging sites")),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/blogging/best-blogging-sites/",image:"/posts/best-blogging.webp",title:"The List of Best Blogging Platforms",description:"The list of best blogging platforms for your creative works. The list includes free and paid platforms.",mdxType:"BookmarkCard"}),mdx("hr",null),mdx("h2",null,"What is Svelte and How it differs from React?"),mdx("p",null,"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."),mdx("p",null,"Because of different browser compilers, I couldn\u2019t find what I want and it made me disappointed. Maybe it is the reason I feel the excitement when I give Svelte a chance."),mdx("p",null,"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 ",mdx("a",e({parentName:"p"},{href:"https://www.cbsofyalioglu.com/code/solidjs-and-reactive-primitives/"}),"SolidJS"),"."),mdx("p",null,"When I\u2019m talking about Svelte, I\u2019m strictly speaking about Svelte 3. It is another JavaScript library written by Rich Harris. What makes Svelte special is:"),mdx("ul",null,mdx("li",{parentName:"ul"},"It is truly a reactive library and it doesn\u2019t use virtual DOM like React. Therefore, there are no VDOM diff calculations."),mdx("li",{parentName:"ul"},"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."),mdx("li",{parentName:"ul"},"You can write HTML, CSS, and JavaScript in a single file component and there will be no global CSS pollution.")),mdx("p",null,"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."),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/post-single-page-graphql-svelte.jpg",alt:"Django Svelte App"}))),mdx("h2",null,"Svelte Configuration with Webpack from Scratch"),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step - 1: Configuring")," the ",mdx("strong",{parentName:"h3"},"development environment")),mdx("p",null,"(Note: if you already installed the node, you can skip this part)"),mdx("p",null,"We will use the Node backend for the development environment."),mdx("p",null,"Therefore, we need to install Node and Node package manager npm."),mdx("p",null,"To prevent potential dependency problems, we will create a clean node environment."),mdx("p",null,"I will use NVM which is a Node version manager, and it allows us to create isolated Node environments."),mdx("p",null,"In your terminal, run the code below."),mdx("p",null,mdx("strong",{parentName:"p"},"Setup Node Environment with NVM")),mdx("p",null,"In your terminal, run the code below."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# install node version manager wget -qO- | bash # check installation command -v nvm # should prints nvm, if it doesn't, restart your terminal `)),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# install node # node" is an alias for the latest version # use the installed version nvm use node nvm install node `)),mdx("p",null,"Now we can create a frontend directory in the Django project. Go to the root directory of the project. 'backend/'"),mdx("p",null,"In your terminal copy and paste the code."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# create frontend directory mkdir FRONTEND cd FRONTEND # now your terminal directory should be # backend/FRONTEND # create a node project npm init # you may fill the rest `)),mdx("p",null,"Now we can install front-end and development libraries."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# install svelte and other libs npm install --save-dev svelte serve cross-env graphql-svelte # install webpack and related libs npm install --save-dev webpack webpack-cli webpack-dev-server # install webpack loaders and plugins npm install --save-dev style-loader css-loader svelte-loader mini-css-extract-plugin npm install --save node-fetch svelte-routing `)),mdx("p",null,"Update package.json scripts part as below. Your file should look like this and ignore the versions."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-json"}),`{ "name": "django-svelte-template", "description": "Django Svelte template. ", "main": "index.js", "scripts": { "build": "cross-env NODE_ENV=production webpack", "dev": "webpack-dev-server --content-base ../templates" }, "devDependencies": { "cross-env": "^7.0.2", "css-loader": "^3.5.3", "graphql-svelte": "^1.1.9", "mini-css-extract-plugin": "^0.9.0", "serve": "^11.3.1", "style-loader": "^1.2.1", "svelte": "^3.22.3", "svelte-loader": "^2.13.6", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0" }, "dependencies": { "node-fetch": "^2.6.0", "svelte-routing": "^1.4.2" } } `)),mdx("p",null,"Let\u2019s create application necessary files and folders for Svelte. In the root directory of the project 'backend/\u2019 , open your terminal."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# create HTML file of the project cd templates touch index.html # change directory to backend/FRONTEND cd ../FRONTEND mkdir src touch index.js touch webpack.config.js # change directory to backend/FRONTEND/src cd src touch App.svelte touch MovieList.svelte touch MoviePage.svelte touch api.js `)),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step 2 - Webpack configuration")),mdx("p",null,mdx("strong",{parentName:"p"},"What is webpack?")),mdx("p",null,"Webpack is a module bundler and a task runner."),mdx("p",null,"We will bundle all our JavaScript applications including CSS styling into two JavaScript files, if you prefer you can output only one file."),mdx("p",null,"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\u2026"),mdx("p",null,"I made two different Webpack settings in one file."),mdx("p",null,"One is for a development environment, and the other one is for a production environment."),mdx("p",null,"Also, note that we do not optimize these configurations."),mdx("p",null,"Copy/Paste the following code into the ",mdx("strong",{parentName:"p"},"webpack.config.js")," file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); const mode = process.env.NODE_ENV || 'development'; const isEnvProduction = mode === 'production'; const productionSettings = { mode, entry: { bundle: ['./index.js'] }, resolve: { alias: { svelte: path.resolve('node_modules', 'svelte') }, extensions: ['.mjs', '.js', '.svelte'], mainFields: ['svelte', 'browser', 'module', 'main'] }, output: { path: path.resolve(__dirname, '../static'), filename: 'js/[name].js', chunkFilename: 'js/[name].[id].js' }, optimization: { minimize: true, runtimeChunk: false, }, module: { rules: [ { test: /\\.svelte$/, use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } } }, { test: /\\.css$/, use: [ /** * MiniCssExtractPlugin doesn't support HMR. * For developing, use 'style-loader' instead. * */ MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, devtool: false, plugins: [ new MiniCssExtractPlugin({filename: '[name].css'}) ], }; const devSettings = { mode, entry: { bundle: ['./index.js'] }, resolve: { alias: { svelte: path.resolve('node_modules', 'svelte') }, extensions: ['.mjs', '.js', '.svelte'], mainFields: ['svelte', 'browser', 'module', 'main'] }, output: { publicPath: "/", filename: 'static/js/bundle.js', chunkFilename: 'static/js/[name].chunk.js', }, devtool: 'source-map', devServer: { historyApiFallback: true, stats: 'minimal', }, module: { rules: [ { test: /\\.svelte$/, use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } } }, { test: /\\.css$/, use: [ /** * MiniCssExtractPlugin doesn't support HMR. * For developing, use 'style-loader' instead. * */ 'style-loader', 'css-loader' ] } ] }, mode, plugins: [ ], } module.exports = isEnvProduction ? productionSettings : devSettings; `)),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step 3 - Create a Single-Page-App witth Svelte")),mdx("p",null,"First, fill in the '",mdx("strong",{parentName:"p"},"backend/FRONTEND/index.js\u2019.")),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`import App from './src/App.svelte'; const app = new App({ target: document.body, }); window.app = app; export default app; `)),mdx("p",null,"Next, fill the \u2018App.svelte\u2019 file with proper logic."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte"}),`