var h=Object.defineProperty,m=Object.defineProperties;var c=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var l=(t,a,r)=>a in t?h(t,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[a]=r,e=(t,a)=>{for(var r in a||(a={}))s.call(a,r)&&l(t,r,a[r]);if(n)for(var r of n(a))i.call(a,r)&&l(t,r,a[r]);return t},p=(t,a)=>m(t,c(a));var d=(t,a)=>{var r={};for(var o in t)s.call(t,o)&&a.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&n)for(var o of n(t))a.indexOf(o)<0&&i.call(t,o)&&(r[o]=t[o]);return r};const makeShortcode=t=>function(r){return console.warn("Component "+t+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",e({},r))},BookmarkCard=makeShortcode("BookmarkCard"),layoutProps={},MDXLayout="wrapper";function MDXContent(r){var o=r,{components:t}=o,a=d(o,["components"]);return mdx(MDXLayout,p(e(e({},layoutProps),a),{components:t,mdxType:"MDXLayout"}),mdx("h2",null,mdx("strong",{parentName:"h2"},"Preliminary Information About the Tutorial?")),mdx("h3",null,mdx("strong",{parentName:"h3"},"What is this tutorial about?")),mdx("p",null,"Django and Modern JS Libraries will be a tutorial series that integrates Django and contemporary frontend solutions such as React and Svelte. Another framework/library integrations are also planning in the future."),mdx("h3",null,mdx("strong",{parentName:"h3"},"The Project Description")),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("em",{parentName:"li"},"We will"),"\xA0set up\xA0",mdx("em",{parentName:"li"},"one Django server and make two simple"),"\xA0single-page\xA0",mdx("em",{parentName:"li"},"applications. Each of them will use different Javascript libraries, and both of them will communicate with"),"\xA0the\xA0",mdx("em",{parentName:"li"},"Django server.")),mdx("li",{parentName:"ul"},mdx("em",{parentName:"li"},"React application will be written from scratch with webpack in the second part. Also"),",\xA0",mdx("em",{parentName:"li"},"note that create-react-app will not be used.")),mdx("li",{parentName:"ul"},mdx("em",{parentName:"li"},"The latest and third part of this tutorial will be Svelte integration."))),mdx("p",null,mdx("strong",{parentName:"p"},"There are 2 projects and 3 articles in this series:")),mdx("ul",null,mdx("li",{parentName:"ul"},"Django server and GraphQL API setup"),mdx("li",{parentName:"ul"},"React application setup with webpack and integrating it with our back-end."),mdx("li",{parentName:"ul"},"Svelte application setup with webpack and integrating it with our back-end.")),mdx("h3",null,mdx("strong",{parentName:"h3"},"What are the requirements to follow?")),mdx("ul",null,mdx("li",{parentName:"ul"},"Basic level of knowledge about Python and Django framework"),mdx("li",{parentName:"ul"},"A basic level of Javascript and React is a must.")),mdx("h3",null,mdx("strong",{parentName:"h3"},"Motivation")),mdx("p",null,"Python is my first programming language. When we were making a movie recommendation engine, we must integrate it with Facebook\u2019s React library because we want it to be a single-page application."),mdx("p",null,"My level of knowledge about Javascript was at the introduction level. Proficient in an unfamiliar programming language takes some time."),mdx("p",null,"Also, I like the Python ecosystem because of the excellent data science libraries, and giving up on Python was never a choice."),mdx("p",null,"To sum up, it really took some time to integrate Django and React. When I recently published\xA0",mdx("strong",{parentName:"p"},"my development blog,"),"\xA0I edited and updated old articles, and changes some ",mdx("a",e({parentName:"p"},{href:"https://www.cbsofyalioglu.com/design/free-design-resources/"}),"graphic design resources"),"."),mdx("p",null,"During this time, another front-end library was released, and it excited me a lot: Svelte. I also added an integration article with Svelte and Django. I hope that this article series will help newcomers a bit to solve their problems."),mdx("h2",null,"General Information"),mdx("h3",null,"What is a Single Page Application?"),mdx("p",null,"In classic web pages, all HTML, CSS, and JS code are arranged and transferred by the server in a render-ready form. When a browser receives the code, it immediately renders elements on a screen. If a user clicks a link, then the browser makes another request to the server. The server will make all the logical operations and respond with another render-ready code."),mdx("p",null,"In modern client-side apps, some logical operations are handled by Javascript code executed in the browser of users. Because of this, servers send all the website code in the first request. Thus, browsers need extra time for the first contentful painting."),mdx("p",null,"Except for the first loading, client-side apps works faster and feels more native because some actions are done immediately on the browser, and I/O operations can be done via asynchronous behavior of Javascript."),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/django-js/architecture-of-single-page-app.webp",alt:"Single page application architecture"}))),mdx("p",null,"Therefore, users still see your app rather than a blank white page."),mdx("p",null,"Browsers are amazing and capable of many impressive things."),mdx("p",null,"Because of this capability, handling resource-heavy operations in the user\u2019s browser can be a suitable alternative."),mdx("p",null,"Otherwise, those operations make our server busy and can increase the bill."),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"Anyone who slaps a \u2018this page is best viewed with Browser X\u2019 label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. ~ Tim Berners-Lee")),mdx("hr",null),mdx("h2",null,mdx("strong",{parentName:"h2"},"Setting up the Django Back-end")),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step-1: Create a Django project from scratch")),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/django-js/single-page-django.webp",alt:"https://cbsofyalioglucom.imfast.io/django-js-libraries/single-page-django.jpg"}))),mdx("p",null,"Let\u2019s create a virtual environment for a clean setup."),mdx("p",null,mdx("strong",{parentName:"p"},mdx("em",{parentName:"strong"},"This virtual environment will be an active environment for all three articles."))),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`python3 -m venv tutorial-env # activate source ./tutorial-env/bin/activate `)),mdx("p",null,"Install Django and dependencies"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# install our dependencies pip install ipython django django_extensions django-cors-headers "graphene-django>=2.0" #create a django project django-admin startproject djangoproject # change directory cd djangoproject # create templates directory mkdir templates # create static folder mkdir static # create utils folder for initial data mkdir utils `)),mdx("h3",null,"Step -\xA0",mdx("strong",{parentName:"h3"},"2: Configuring and running")),mdx("p",null,"Update your ","*","*","*","*","'",mdx("strong",{parentName:"p"},"djangoproject/djangoproject/settings.py\u2019"),"\xA0file. Extra settings are labeled as\xA0",mdx("strong",{parentName:"p"},"\u2019New \u2026\u2019.")),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "django_extensions",# New! (useful extension) 'graphene_django', # New! (for graphql communication) 'corsheaders', # New! (for cors requests) ] # New (for improved interactive shell) SHELL_PLUS = "ipython" # New (it allows webpack development server to make cross-origin request) CORS_ORIGIN_WHITELIST = ( '', ) MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'corsheaders.middleware.CorsMiddleware', # New Add this 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': (os.path.join(BASE_DIR, 'templates'),), # New 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] #New STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) `)),mdx("p",null,"Before starting our project, we should first make database migration. After, we will run our server and will see that is working."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# create migration for django-orm python manage.py migrate `)),mdx("p",null,"Now, if everything goes well, the Django server will start. You can open your browser and check the address 127.0.0.1:8000. You will see a screen like that:"),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step-3: Creating a movie app")),mdx("p",null,"We will create a movie model with basic fields that a movie should have."),mdx("p",null,"Before that, we should give some information about the field choices."),mdx("p",null,mdx("strong",{parentName:"p"},"Why there is"),"\xA0a\xA0",mdx("strong",{parentName:"p"},"URL field for posters")," rather than an image field",mdx("strong",{parentName:"p"},"?")),mdx("p",null,"Because serving static files in production is not recommended, we use only the URL field. Fetching the image from remote and then saving it to our production storage is a topic of another post."),mdx("p",null,"Because of this, we will save only the poster\u2019s URL, not the poster itself as an image file. Also, sending static files like images is not a good approach."),mdx("p",null,"We will send the exact URL of an image to the user. Then, the\xA0",mdx("strong",{parentName:"p"},"user\u2019s browser fetches the image"),"\xA0from this."),mdx("p",null,mdx("strong",{parentName:"p"},"What is a slug and why it should be unique?")),mdx("p",null,"Let me explain with an example:"),mdx("p",null,"Let say I'm ",mdx("a",e({parentName:"p"},{href:"/productivity/content-creation-tools/"}),"creating content"),", I published the original article on this blog.\xA0",mdx("strong",{parentName:"p"},"cbsofyalioglu","[","com","]","/post/django-and-modern-js-libraries-backend")),mdx("p",null,"The last part of the URL,\xA0",mdx("strong",{parentName:"p"},"django-and-modern-js-libraries-backend,"),"\xA0is the slug of the post and also it is an identifier that makes the URL distinctive from other post pages."),mdx("p",null,"In the GraphQL part of the tutorial, you will see that we will use this slug as a query parameter meaning that we will do database queries according to slug. Therefore, it should be unique."),mdx("p",null,"We can also choose another identifier as the URL identifier, but it\u2019s clear that the URL will not be a human-readable address."),mdx("p",null,"Search engine indexing and ranking is a vital part of any website targeting new users. Readable URL addresses\u2019 are good for users themselves and are also suggested by search engine guides. Also, Google webmaster guidelines recommend using clean and concise URL structures."),mdx("p",null,"Let\u2019s make our model and define its properties and methods. In the next step, we will populate our database with initial records. Therefore, I added a class method responsible for the database population."),mdx("p",null,"Let\u2019s create a Django app. This app will include our model. The database tables will be done according to this. Also, API requests will be based on this."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# create new Django app python manage.py startapp items `)),mdx("p",null,"Update settings .py"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "django_extensions", 'graphene_django', 'corsheaders', "items" # New! (make our app will active) ] `)),mdx("p",null,"Open \u2019djangoproject/items/models.py\u2019 file and copy the below code."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`# items.models from django.db import models class Movie(models.Model): id = models.IntegerField(primary_key=True) name = models.CharField(max_length=100) year = models.IntegerField(null=True) summary = models.TextField(max_length=5000,null=True) poster_url = models.URLField(blank=True, null=True) slug = models.SlugField(max_length=50, null=True,blank =True, unique=True) # order items in descending order class Meta: ordering = ["-year"] # the method which defines string output of class def __str__(self): return self.name # the method which loads initial data @classmethod def import_records(cls, record_list): for record in record_list: # create record if id is not exist if not cls.objects.filter(id=record.get("id")).exists(): new_movie = cls.objects.create(**record) else: print(f"Id:{record.get('id')} is already exist.") print("Import operation done successfully") `)),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`# make database migrations python manage.py makemigrations python manage.py migrate `)),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step-4: Populating database with initial data")),mdx("p",null,"There is no movie record currently in our database. We will provide a small initial data to create some movie records. All the data is provided by the community-built The Movie Database. We will use those records in our app."),mdx("p",null,"First, create an\xA0",mdx("strong",{parentName:"p"},'"initial',"_",'data.py"'),"\xA0file in\xA0",mdx("strong",{parentName:"p"},'"djangoproject/utils"'),"\xA0folder. After, you can copy and paste the below data to this new file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`initial_data = [{ 'id': 503919, 'name': 'The Lighthouse', 'year': 2019, 'summary': 'The hypnotic and hallucinatory tale of two lighthouse keepers on a remote and mysterious New England island in the 1890s.', 'slug': 'the-lighthouse-2019', 'poster_url': '' },{ 'id': 475557, 'name': 'Joker', 'year': 2019, 'summary': 'During the 1980s, a failed stand-up comedian is driven insane and turns to a life of crime and chaos in Gotham City while becoming an infamous psychopathic crime figure.', 'slug': 'joker-2019', 'poster_url': '' },{ 'id': 530385, 'name': 'Midsommar', 'year': 2019, 'summary': "A couple travels to Sweden to visit a rural hometown's fabled mid-summer festival. What begins as an idyllic retreat quickly devolves into an increasingly violent and bizarre competition at the hands of a pagan cult.", 'slug': 'midsommar-2019', 'poster_url': '' },{ 'id': 531428, 'name': 'Portrait of a Lady on Fire', 'year': 2019, 'summary': 'On an isolated island in Bretagne at the end of the eighteenth century, a female painter is obliged to paint a wedding portrait of a young woman.', 'slug': 'portrait-of-a-lady-on-fire-2019', 'poster_url': '' }] `)),mdx("p",null,"Now, we will import and create new records at the database level. Normally we should have open Django shell. However, shell","_","plus command which is provided by django","_","extensions is more functional, so we will use this. It automatically imports all apps we created."),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`# open interactive shell python manage.py shell_plus `)),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`# let's check database and verify it's empty Movie.objects.all() # prints: # import the records which we took it from github repo from utils.initial_data import initial_data # create records in the database Movie.import_records(initial_data) # prints 'Import operation done successfully' # query database and verify it is not empty Movie.objects.all() `)),mdx("p",null,"Our model and database are ready. You can close the shell with\xA0",mdx("strong",{parentName:"p"},"quit"),"\xA0command."),mdx("p",null,"The next section will be creating a GraphQL API."),mdx("h2",null,"Setting up GraphQL API"),mdx("p",null,"In this section, we will make our app\u2019s API part with Graphene which is a GraphQL framework implementation of Python."),mdx("p",null,"What we do in this section is:"),mdx("ul",null,mdx("li",{parentName:"ul"},"Creating another Django app: We will put all API configurations in there."),mdx("li",{parentName:"ul"},"Creating an API Schema that has three parts: API-model, Resolvers, and Queries."),mdx("li",{parentName:"ul"},"Creating a URL endpoint: The client-side application will request all information to this URL address.")),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/django-js/single-page-django-graphql.webp",alt:"GraphQL settings"}))),mdx("h3",null,"Step 1 - Creating another Django app for API configurations"),mdx("p",null,"Actually, there is no obligation to make another app because this app will not create or update any database table. However, to put all API-related configurations in one place, I chose this way."),mdx("p",null,"Let\u2019s create the second backend app. The name of the app should not have to be\xA0",mdx("strong",{parentName:"p"},"\u2018gql\u2019"),", but if you set another name, you should also change the name of the schema in\xA0",mdx("strong",{parentName:"p"},"settings .py"),"\xA0later."),mdx("p",null,"Open your terminal at the root level of your project."),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# create app with the name gql python manage.py startapp gql # change directory cd gql # create schema.py file touch schema.py `)),mdx("h3",null,mdx("strong",{parentName:"h3"},"Step 2 - Creating an API Schema: API-model, Queries and Resolvers")),mdx("p",null,"API-schema will have three parts considering the scope of the article. Those are as follows:"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("strong",{parentName:"li"},"API-Model-Type:"),"\xA0A class that is a mapped version of the movie model. You can send responses based on this if the response is not a primitive type."),mdx("li",{parentName:"ul"},mdx("strong",{parentName:"li"},"Queries:"),"\xA0The client-side app will use these queries for distinct requests."),mdx("li",{parentName:"ul"},mdx("strong",{parentName:"li"},"Resolvers:"),"\xA0Those are response functions of fields. When the client-side request matched with a query, the resolvers come into play and make all the logical parts, then send information back to the client.")),mdx("p",null,mdx("strong",{parentName:"p"},"A )"),"\xA0",mdx("strong",{parentName:"p"},"API-Model-Type and Resolvers")),mdx("p",null,"A class that is a mapped version of an existing Django model. It is the intermediary layer between the Django model (or database) and API response. The fields of ModelType will be the same fields of the corresponding model. We can also create custom fields that do not belong to the corresponding model."),mdx("p",null,"You can check other scalar types from the Graphene Python documentation\u2026"),mdx("p",null,"We will step by step write the schema .py file. You can copy and paste it."),mdx("p",null,"You can check other scalar types from the Graphene Python documentations\u2026"),mdx("p",null,"We will step by step write the schema .py file. You can copy and paste it."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`import graphene from items.models import Movie from graphene_django.types import DjangoObjectType # api-movie-model class MovieType(DjangoObjectType): id = graphene.Int() name = graphene.String() year = graphene.Int() summary = graphene.String() poster_url = graphene.String() slug = graphene.String() # define which model will be the base class Meta: model = Movie # 'self' corresponds to the item of Django model # like The Lighthouse or Joker def resolve_id(self, info): return self.id def resolve_name(self, info): return self.name def resolve_year(self, info): return self.year def resolve_summary(self, info): return self.summary def resolve_poster_url(self, info): return self.poster_url def resolve_slug(self, info): return self.slug `)),mdx("p",null,"Let me explain the above code."),mdx("p",null,"The 'MovieType\u2019 class is a mapped version of the Movie model. You may notice that all the fields are the same. We defined the base model in class Meta, so the movie model will be the base model."),mdx("p",null,"It is important to say that resolver names are written in snake cases like \u2018resolve","_","poster","_","url\u2019. However, when we write client-side queries, those will be pascal cases such as \u2018posterUrl\u2019. You see that later."),mdx("p",null,mdx("strong",{parentName:"p"},"B ) Queries and Resolvers")),mdx("p",null,"The client-side app will use these queries for distinct requests. We will also write client-side queries on its part. A client-side query should match with the server-side query.\xA0",mdx("strong",{parentName:"p"},"Therefore, this part also defines the allowable requests of the frontend part"),"."),mdx("p",null,"For the sake of simplicity, we will define only two queries."),mdx("ul",null,mdx("li",{parentName:"ul"},"The movie","_","list query (",mdx("strong",{parentName:"li"},"resolve","_","movie","_","list"),") returns to all the movies in the database"),mdx("li",{parentName:"ul"},"The movie query (",mdx("strong",{parentName:"li"},"resolve","_","movie"),") returns only specific movie if the parameter (",mdx("strong",{parentName:"li"},"slug"),") is matched.")),mdx("p",null,"Let add this code below MovieType class."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`class Query(graphene.ObjectType): movie_list = graphene.List(MovieType) movie = graphene.Field(MovieType, slug=graphene.String()) def resolve_movie_list(self, info, *_): # for large lists only query what you need return Movie.objects.all().only("name", "poster_url", "slug") def resolve_movie(self, info, slug): movie_queryset = Movie.objects.filter(slug=slug) if movie_queryset.exists(): return movie_queryset.first() schema = graphene.Schema(query=Query) `)),mdx("p",null,"In the last row, you will see a schema object. This is the root node of the API. We should tell the Django server to use this as our API schema. To do so, update the settings. py."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`# djangoproject/djangoproject/settings.py # New - Add this part GRAPHENE= {'SCHEMA': 'gql.schema.schema'} # MIDDLEWARE = [..] `)),mdx("p",null,mdx("strong",{parentName:"p"},"Step 3 - Create URL endpoints")),mdx("p",null,"In REST API, we define different URL Endpoints for different requests. One of the good parts of GraphQL is that we will only define one endpoint. All the requests will be done through that."),mdx("p",null,"Copy the below code and paste it to\xA0",mdx("strong",{parentName:"p"},"djangoproject/djangoproject/urls .py"),"\xA0file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-python"}),`from django.contrib import admin from django.urls import path from graphene_django.views import GraphQLView from django.views.decorators.csrf import csrf_exempt from django.views.generic import TemplateView urlpatterns = [ path('admin/', admin.site.urls), # apiclient on client-side will request this adress later path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))), # index.html file will be our root template. When a user opens our webste, # this file will be sent by server at first. After then, api requests # will directed above address. # (it points to ~/Blog/djr/templates/index.html) # (currently there is no file, webpack production bundle will come here ) path("", TemplateView.as_view(template_name="index.html")), ] `)),mdx("p",null,"You noticed that we set graphiql=True. This is GraphQL interactive panel. We can make a query like a client app through this panel. You will also see the details of all queries."),mdx("p",null,"Now, please run the server in the root folder : \u2018djangoproject/\u2019"),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`python manage.py runserver `)),mdx("p",null,"Open\xA0",mdx("strong",{parentName:"p"},"127.0.0.1:8000/graphql"),"\xA0address from your browser. We will query the movie with specific identifier (slug). On the left panel, paste this and press the\xA0",mdx("strong",{parentName:"p"},"Execute Query"),"\xA0button."),mdx("p",null,"Please note that, we request fields with pascalCase. (",mdx("strong",{parentName:"p"},"posterUrl"),")"),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`query { movie(slug:"the-lighthouse-2019"){ id, name, posterUrl } } `)),mdx("p",null,"and the response will be in JSON format like this:"),mdx("p",null,"Our API is ready to respond to the requests. This part of the tutorial is finished."),mdx("p",null,"Now, we will make two different client-side apps. Please choose one of them to continue."),mdx("h4",null,"Option I: Django and Modern JS Libraries - React"),mdx("p",null,"Django and React integration. This is the third post of Django and Modern JS Libraries. You will integrate Django and Svelte."),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/post/django-and-modern-js-libraries-react/",title:"Option I: Django and React",image:"/posts/django-js/django-react.webp",description:"Build your frontend with React.",link:"https://www.cbsofyalioglu.com",mdxType:"BookmarkCard"}),mdx("h4",null,"Option II: Django and Modern JS Libraries - Svelte"),mdx("p",null,"Django and Svelte integration. This is the third post of Django and Modern JS Libraries. You will integrate Django and Svelte."),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/post/django-and-modern-js-libraries-svelte/",title:"Option II: Django and Svelte",image:"/posts/django-js/django-svelte.webp",description:"Build your frontend with React.",mdxType:"BookmarkCard"}))}MDXContent.isMDXComponent=!0;