Because of the global corona-virus epidemic, global measures are taken to higher levels. For this purpose, I tried to clarify this issue, which is wondered by those who are thinking of coming to Istanbul. I tried to answer the question of "Is it safe to travel through Istanbul airport".
Because airport and terminals are only a small part of any travel, being safe shouldn't mean anything in itself. You should also keep your distance after leaving the terminal building. Moreover, Airport to city transportation is another challenging. Considering this, I recommend Istanbul Private Transfer Expert for Istanbul airport to city transfers.
if Istanbul airport is safe to travel. Before Istanbul Airport, I should explain some criteria among the global aviation.
Human behaviour is the most influential factor for spreading COVID-19 virus. Therefore, it is essential to keep being attentive.
What are the Global Standards for International Airports?
Airports Council International, ACI, is the only global trade representative of the world’s airports and they announced the international airports who accredited their health programme. The programme promotes the maintains of safe and hygienic facilities.
Cleaning and disinfection, physical distancing, staff protection, physical layout, passenger communications and passenger facilities are included by subject.
Also, terminal access, check-in areas, security screening, boarding gates, lounges, retail, food and beverages, gate equipment such as boarding bridges, escalators and elevators, border control areas and facilities (in collaboration with authorities), baggage claim area and arrivals exit zones are included by region.
Which Airports in Turkey are Safe to Travel?
According to AIC, there are nearly 300 airports in the world are accredited to their health programme. From Turkey, those airports are on the list of Airports Council International:
You can see the official airport list of Airports Council International below.
Is it Safe to Travel through Istanbul Airport?
It seems that precautions taken against spreading COVID-19 in Istanbul airport not only follows the international standards but also improve it with their implementations. Because Istanbul Airport is relatively new airport, this situation provides flexibility. Istanbul airport test center is allocated for COVID-19 related tests.
All passengers must wear masks both in the terminal building and in the area.
Contactless security measures were taken in security control areas.
Body temperatures of all passengers are controlled by thermal cameras.
All passenger baggage passing through X-Ray is sterilized with ultraviolet.
Hand sterilization fluids are available in all areas open to passengers.
Terminal buildings are sterilized by autonomous robots and UV light.
Social distance is constantly reminded with informative signs.
24/7 fresh air circulation is provided to the terminal.
Passenger buses in the area are disinfected after each use.
It established a test center with a 5000 m ^ 2 area and a capacity of 10,000 tests per day.
PCR, Antibody and Antigen tests are performed 24/7 at Istanbul airport. You can pay by credit card or cash for these tests, where you can get results quickly.
You can quickly get the results of PCR, Antibody and Antigen tests performed in these centers.
Where is Istanbul Airport Corona-virus Test Center?
The test center is located at the exit gate number 14 "Arriving Passenger".
How to test against Corona-virus in Istanbul Airport?
Here are the Istanbul Airport PCR Test Procedure: If you want to be a Covid-19 PCR test, you can follow the steps below.
Click the "I want to test" button to get a sequence number.
Make the test payment by credit card or cash.
Get your barcode.
Go to the test taking section and give your test sample.
If you want to know the result of your test immediately, press the relevant button.
We might say that it is safe to travel through Istanbul airport. However, the unique context and precautions listed above only makes the airport safe. It is your responsibility to answer the question of "Is Istanbul airport safe to travel?". If you decided to arrive Istanbul airport, read the article of Istanbul airport to city guide.
Airport list which are accredited to ACI programme
The collections of free design resources and graphic design tools. I listed many graphic design resources that make possible to generate and create useful graphics.
Free Design Resources Part I - Generator Apps
These tools generate design resources for you. They are simple tools but generate effective patterns and code. Those are free design resources that you can tweak an use them.
Advanced Blog Generator
Blobmixer
A toy for creating and sharing 3D blobs
CSS Shapes
Pre-made shapes that is completely written by CSS code.
The Shapes of CSS | CSS-Tricks
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you
Animista
Easily copy and paste the CSS animations.
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
Text Column Generator
Split your text through columns by CSS.
Online CSS Multi Column Generator
Split your text in columns for a better readablility with the column-count CSS property. Set up your preferences while you’re watching the live preview
Text Shadow CSS Generator
Pre-made text shadows from Mixfont. Easily copy and paste the CSS code.
Mixfont | A modern font generator
Whether you’re designing a website or writing a paper, Mixfont is simple way to choose beautiful fonts that work well together.
Clip Path Generator
Easily create a clip path by this free design generator from Uplabs.
Clip Path Generator
A simple clip-path generator made with React. It uses CSS variables to update the node positions for the clip-path and supports the various clip-path styles. Enjoy!
CSS Stripes Generator
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS. Generate Striped backgrounds using only CSS
SVG Shape
A simple SVG shape generator with minimal options.
SVG Shape Generator – Create SVG shapes for your designs
A free SVG shape generator to create beautiful SVG blob shapes for your web design. Supports gradient, complexity levels and more!
Animated Header
This advanced tool provides animated headers with rich customization options.
Animated Background Headers - Generate animated background headers for any website
Generate animated background headers for any website
Glassmorphism Generator
I didn't like neuomorphism so much. However, this year's trend is awesome. Probably, you are familiar with it. Here the glassmorphism generator that produces CSS.
Glassmorphism - simple CSS generator
Glassmorphism is a unified name for the popular Frosted Glass aesthetic.
Get Waves
Get Waves is a web app that produce wave pattern in SVG format. Thus, you can manipulate them easily.
Get Waves – Create SVG waves for your next design
A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!
SVG Waves
Another generator that produces wave pattern in SVG or PNG formats.
SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.
Faux Code Generator
This app requires a link of any GitHub gist. When you provide the source code, the web app transforms it to a faux code graphics.
Faux Code Generator
Turn real code into faux code.
Neumorphism CSS Generator
This web app allows you to create neumorphism CSS code that you tweak visually.
Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.
Soft UI
Another free design resource that makes possible to build neumorphic style code.
Explore the most advanced CSS box shadow generator for your UI. Create colors, gradients, elements in the neuromorphic design: fast, free, no ads
Glitch Art
The glitch art generator produces glitch patterns.
Glitch Art Generator
Create and share beautiful gradient glitch art wallpapers.
Fancy Border Generator
This online design resources allows you to make custom shape borders.
Fancy Border Radius Generator
Generator to build organic shapes with CSS3 border-radius
Components.ai
This design resource actually a suit. It consists of many design generator that is produced by machine learning algorithms. Gradients, color scales, voronoi, and bootstrap color palette generator.
Components AI — A new way to explore generative design systems
Parametric and generative design tools
Material Shadow
It allows you to add shadows to your icons. You can also select predefined material icons.
Android Material Icon Generator
Icons with that loooooong material shadow.
Technology Bullshit Generator
If you need flashy words, then this app makes it for you. It create flashy but bullshit word generator.
Tech Bullshit Generator
Generate fresh tech bullshit with our online bullshit generator.
Squircley
Squircley generate a shape neither square nor circle. You can tweak it as you want.
Squircley | SVG Squircle Maker
Create and export beautiful SVG squircles to use in your designs!
Shape Divider
It divides the shape 🙂 You realized that some kind of divided shapes are well suited on landing pages. You can do those kind of shapes with this design resource.
Shape Divider App
Create fully responsive shape dividers for your next web project
Blobs
Decorative blob generator tool.
Blobs - Generate beautiful blob shapes for web and flutter apps
Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease
Omatsuri Suite
Omatsuri is not a single graphic design tool. It is actually a free design resources suit. You can find many useful graphic design resources such as triangle generator, wave generator, color shades and color palette generators.
Omatsuri
Progressive Web Application with 12 open source frontend focused tools
Blog Cover Generator
Easy blog post cover generator.
BlogCover - Generate Cover Image Online
Properties
Patternico
A pattern generator.
Seamless Pattern Maker - Create Unique Backgrounds For Free
create your own free seamless patterns and backgrounds online fast and easy. Try our pattern generator - it is totally free!
Doodad
Yet another pattern generator
doodad
## Build Setup
Tabbied
Doodle with generated patterns.
Tabbied
We aim to build simple design tools that energize your creativity. Tabbied was initially developed as a tool for making wall art, but we quickly realized that it could be used for many other purposes. We’re very excited to see what you can make using out platform.
BG Jar
Very useful background pattern generator which can export your design in various formats such as CSS, SVG or PNG.
Free svg background generator
Free svg background generator for your websites, blogs and app.
Free Design Resources Part II - Visual Content Creator Tools
Canva
Canva is the most popular and the most used graphic content creations site. It has both free and premium plans. If you need a quick visual content Canva is one of the best design resource.
Collaborate & Create Amazing Graphic Design for Free
Create beautiful designs with your team. Use Canva’s drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.
Easil
Easil is another Canva alternative that has limited features for free plan.
Drag & Drop Graphic Design tools and templates, for teams of all sizes
Easil is the drag-and-drop design tool that empowers your whole team to create visual content so good, it looks like a pro designed it.
Visme
Visme is an online tool that allows you to easily create info-graphics. Those are very useful for visual explanations and building back-links.
Visme is the #1 online design software for non-designers. Create presentations that match your brand, interactive infographics and beautiful graphic design.
Glorify
Glorify is a Canva-like tool that specifically create graphics for different platforms such as Product Hunt, Shopify, Fiver etc...
Create Free E-Commerce Images With Glorify App Design Editing Tool
Create beautiful designs & E-Commerce images with your team. Glorify App is the only design tool built for E-Commerce businesses drag-and-drop features and layouts to design ✓ Logo Maker ✓ BG Remover and more.
Polotno Studio
Polotno Studio allows you to edit your graphics.
Polotno Studio - Online Free Design Editor
Create graphical designs for social media, youtube previews, facebook covers
Projector
Projector is also another free graphic template design tool.
Projector — Create to captivate
Whether you’re building your brand solo or with a team, use Projector to craft well designed stories that will elevate your presence and captivate any audience.
Taler
Taler is relatively new tool comparing with other free design resources. It is also powered by e-commerce platform Shopify.
Taler - Free online banner maker
Create and download beautiful graphics and banners for social media, ads and more.
Crello
It is very limited graphic design tool. Only 5 design downloads are permitted.
The Simplest Online Image Editor ᐉ Crello ➤ Create your own designs ✓ Post ✓ Cover ✓ Animations ☝ Use the best online design software ⏩ It’s easy and free!
Artify
I personally like the illustration of Artify. Once in a while, It does not respond. However, It is now working. I should also mention that attribution is required.
A web based design editor packed with a library of design assets and thousands of ready to use templates
Access a massive library of exclusive design elements & stock media right in the editor: icons, fonts, abstract shapes, vectors, 3D elements, editorial compositions & more
Design AI
Design AI is another Canva alternative platform that has speech and video maker features.
Designs.ai - Creative work done effortlessly
Collection of A.I powered tools under one roof to help with your creative needs - Designs.ai
Free Design Resources Part III - Prototyping and Graphic Editing Tools
Figma
Figma is awesome. It is a sketch alternative. Moreover, It is boosted by Web-Assembly technology that makes possible to do these stuff on your browser. It is great for teams and freelancers. It also allows you to graphically edit React components. In this way, Framer is a unique design tool.
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
Penpot
Penpot is an open-source free prototyping and design tool that is currently at alpha stage.
Penpot | Design Freedom for Teams
The open-source solution for design and prototyping
Framer
Framer stands out with its mobile and interaction prototype development. It has web version as long as MacOS versions. React developers may know Framer Motion library which is the product of Framer.
The prototyping tool for teams | Framer
It’s interactive design made simple—no code required, browser-based, and free for everyone. Realistic prototypes in half the time.
Lunacy
Lunacy is a desktop software created by Icons8. Because of the creator company, it has built-in assets. Currently only available for Windows.
Free Graphic Design Software
Lunacy is a native Windows app that opens, edits, and stores .sketch files. And it’s completely free.
Spline
One of the best tools of 2020. Spline allows you to create 3D geometry. Moreover, It has Linux support.
Spline - Design tool for 3D web experiences
Create web-based 3D experiences
Free Design Resources IV - Design System Tools
Toolabs Design System
Toolabs is a very intuitive tools that allows you to create your design system and export it with various formats such as CSS, JSON etc.. Also, It creates a web page for your design system that you can access and share it easily.
Toolabs Design System Manager
Toolabs is a web based #tokens and #components driven Design, Prototype, Document and Development Platform
Frontify
Frontify actually is more than a design system tool. It is a complete brand design suite. It has a free plan for freelancers. You can create your design guideline and design system. Frontify also allows you to create a web page in order to access and share your guideline. Moreover, you can develop and design a user-interface component and share the code easily. A sample guideline page can be seen below:
The All-In-One Brand Management Software
Create brand consistency by centralizing digital assets, brand guidelines & UI patterns. Increase efficiency with web-based collaboration. Try it for free.
Diez
Tokens are great when the case is design. Diez is a tool that is specialized in creating design tokens.
Diez — The Design Token Framework
Diez radically reduces the cost of delivering a consistent visual identity across your company’s apps & websites.
ZeroHeight
You can create your design guidelines with Zeroheight and make it single source of truth. Because it includes both design and code assets, communication with designers and developers becomes less problematic.
zeroheight · document your design systems, together
Create beautiful design system documentation collaboratively with zeroheight
Free Design Resources V - Miscellaneous
Design Lobby
It is nice looking asset manager. You can deploy your design assets such as typefaces, icons, images and colors. Currently in a beta phase.
Home
Keep your design assets with you all the time, Design Lobby helps you manage images, icons, fonts and colors. Built for high-performance design teams and freelancers
Squoosh
Squoosh is a one page web app that is the easiest way to compress images. As we know, Google stated that fast opening is an important factor when ranking websites. Therefore, image compression is a must for websites that is aiming to rank higher. Considering the situation, Squoosh is an important free design resource.
Squoosh
Compress and compare images with different codecs, right in your browser
Scrollbar Designer
Design your page's scrollbar. It should be also noted that it doesn't work on Firefox. You can accomplish it via JavaScript.
Webkit Scrollbar Generator
It will be updated as soon as possible.
Hosted Confluence with Custom Domain
One of our customers from Istanbul Airport Transfer Expert and Istanbul Cruise Port Transfer ask the possibility of using Atlassian Confluence as a self-hosted wiki program. We look for solutions for a while. Later on, we discovered Cloudron app. In this article, We'll install Confluence with a custom domain on our servers.
What is Confluence?
Confluence is a team collaboration and wiki software developed by Australian software company Atlassian. It is a web-based application and written in Java programming language.It was released in 2004 (Voav) as an enterprise knowledge management software.
You can use it as a team collaboration app, wiki, knowledgebase, blog, intranet etc.
If you read my articles written in Turkish, you realized that talented editor is a must for me in any platform I wrote. The editor of Confluence is one of the best editor in the universe. It has really advanced permission level. You can create many workspaces.
However, Atlassian Cloud doesn’t allow us to use our custom domains and managed Confluence solutions is a bit complicated.
Fortunately, Cloudron made it easier for us to use it on our own servers. By doing this, we can use our own custom domains with Atlassian Confluence app.
How much does it cost to use Self-Hosted Confluence?
Confluence requires at least 4 GB RAM. Thus, the most expensive cost will the cloud instance.Cloudron is free for personal usage up to 2 apps which is completely sufficient for us. Therefore, the cost of using Confluence with a custom domain will be:
$20/month Cloud Cost on Digital Ocean + one-time license fee of $10.
I'll share a referral links below that gives you some amount of free credits. Thus, It is free to follow this guideline.
What are the requirements?
Digital Ocean Account: This is the platform that hosts our Confluence server. You can get free $100 credit which is available 60 days if you register with this referral link.
Cloudron Account: Cloudron provides software solutions for hosting different applications on our servers. You can also get $30 free credit if you register with this referral link
Domain Name: You'll need a custom domain.
Step 1 - Create Droplet with Cloudron
Our Confluence app will be hosted on the droplet which we will create now. A Droplet is basically a virtual server in Digital Ocean.
I'm assuming that you have created an DA account and created a project. Now, we'll create a droplet with Cloudron app installed.
On the left side, you'll find Marketplace link under the Discover section.
Click the marketplace link. Search and select Cloudron.
Click Create Couldron Droplet button.
Now, you'll see the droplet settings page. As I told you before, Confluence requires minimum 4 GB RAM. Therefore, we should minimum select Basic plan which costs $20/month. Also, we'll choose the closest data-center to us and create a password as an authentication method.
At the bottom of the page, we'll click the Create Droplet button. It will start the installation of cloud instance and Cloudron application.
Step - 2) Initial Configurations
We are going to make some domain adjustments. There are two cases for your domain name provider.
The name-servers of your domain name are on Digital Ocean.
Your name-servers are on another provider.
In either case, I'll follow the manual method that fits every case.
DNS Settings
First, visit the project page on Digital Ocean. If any IP number assigned to your instance, note it down. Otherwise, wait till the assignment. For example mine is 46.101.148.85.
To make illustration, Let say we have a domain livicomturkiye.com. We also decided to use a subdomain for the Confluence app, let's say notes.livicomturkiye.com.
Second, Whether your DNS provider is DA or not, visit your domain name provider's website. Go to DNS management page of your domain name. Add these two 'A records' that target the IP number we saved above.
Host
Target
notes
46.101.148.85
my.notes
46.101.148.85
First one is the subdomain name you use with Confluence. Second one is the cloudron panel with a prefix of my. Save the records.
You can control whether your domain is pointing to correct IP by visiting dnschecker.org. If the A record points to the correct IP, you can proceed. DNS propagation can take some time. Therefore, this process can took time.
Cloudron settings
Open your browser and paste the IP number of your instance on a new page.
(Note: We have not any secure certificate now.Therefore, your browser will warn you about the privacy. This means your connection is not encrypted end-to-end. Open the advanced settings and proceed with unsafe method.)
You'll see Cloudron setup page.
Write down your domain/subdomain that will be used for Confluence app.
Select Manual as DNS Provider.
Click Next. Now, Cloudron will start to make proper internal configurations. Whet it finishes, you'll fill the admin form.
Confluence Installation
If we did everything right, we see an empty Cloudron page. On the upper right menu, click App Store. Before this, you fill the login form of Cloudron.
Write your credentials and login. Search Confluence and install it.
Step - 3) Confluence Settings
I assume that all the settings properly configured. Now, click Confluence app on Cloudron page.
A setup page welcomes us. Follow the steps below:
Select Product Installation. If you need Confluence Questions or Confluence Team Calendars, please also select them. Click Next.
Press Get an evaluation license link and get the license for Confluence Server. Click Next.
If you have a database choose My own database. Otherwise, you can use built-in database as a temporary solution. Click Next.
Wait until the database settings are done. Then, create an empty site.
Fill the System Administrator Account.
Give your space a name. For example: "Personal Wiki".
Now, you can use Atlassian Confluence on your domain. You can create a redirection to your space or make your space public. Just configure them on General Configuration.
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 a disappointment. 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 to praise. Being familiar with Svelte API and Tutorials is definitely recommended.
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 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.
# install node version manager
wget -qO- <https: raw.githubusercontent.com="" nvm-sh="" nvm="" v0.35.3="" install.sh=""> | bash
# check installationcommand -v nvm
# should prints nvm, if it doesn't, restart your terminal
</https:>
Code language:Bash(bash)
# install node# node" is an alias for the latest version# use the installed version
nvm use node
nvm install node
Code language:Bash(bash)
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.
# 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
Code language:PHP(php)
Now we can install front-end and development libraries.
# 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
Code language:PHP(php)
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.
# 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
Code language:PHP(php)
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.
Before routing pages, I will first write the client-side queries. Please open api.js and copy/paste the code below.
<code>import { GraphQLProvider, reportCacheErrors } from"graphql-svelte";
const client = GraphQLProvider({
url: 'http://127.0.0.1:8000/graphql',
headers: () => ({
"content-type": "application/json",
Accept: 'application/json'
})
})
client.graphql.on('cache', reportCacheErrors) // our first query will
requests all movies // with only given fields // note the usage of string literals (`) exportconst MOVIE_LIST_QUERY = `query movieList{movieList{name, posterUrl, slug}}
`// Note the usage of argument. // the exclamation mark makes the slug argument as required // without it , argument will be optional exportconst MOVIE_QUERY = `query movie($slug:String!){ movie(slug:$slug){ id, name, year, summary, posterUrl, slug } } `// This is generic query function // We will use this with one of the above queries and // variables if needed export async function get(query, variables = null) { const response = await client.get({ query , variables }) console.log("response", response); return response }
</code>
Code language:JavaScript(javascript)
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.
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.
# execute it on the root folder of Django 'backend/'
python manage.py runserver
Code language:PHP(php)
Open another terminal and change the directory to the ‘backend/FRONTEND’
# On another terminal
npm run start
Code language:PHP(php)
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 succesfully integrated Django and Svelte. Now make the production build.
Django and Svelte Integration in Production Environment
Now you can stop webpack server while keeping the Django server alive.
In the backend/FRONTEND/ directory, execute the command below.
npm run build
This will build and bundle all your Svelte app in bundle.js file. When bundling process is over, go to the URL of Django server in your browser. --> “127.0.0.1:8000/”
You should see the same screens above. Also note the static folder which has new files coming from webpack bundling.
FINISHED
Django and Modern JS Libraries - React
In the previous part, we built a Django backend and GraphQL API that is responsible for the communication of the Django project and react app. In this part of the tutorial, we will create a single page application with React from scratch.
We will bundle our application with webpack and we will not use create-react-app boilerplate
Create React App from Scratch
Step - 1: Configuring development environment
(Note: if you already installed the node, you can skip this part)
We will use Node backend for the development environment.
Therefore we need to install Node and Node package manager npm. In order to prevent possible 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.
# install node version managerwget -qO- <https:raw.githubusercontent.com=""nvm-sh=""nvm=""v0.35.3=""install.sh=""> | bash
</https:>
Code language:HTML, XML(xml)
# check installation
command -v nvm
# should prints nvm, if it doesn"t# you can restart your terminal
Code language:PHP(php)
# install node# node" is an alias for the latest version
nvm install node
# use the installed version
nvm usenode
# printsNowusingnodev..
Code language:PHP(php)
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.
# create frontend directory
mkdir FRONTEND
cd FRONTEND
#in backend/FRONTEND create a Node project
npm init
# you may fill the rest
Code language:PHP(php)
Now we can install Javascript dependencies such as React and API related to other libraries.
If everything goes well, we can create necessary files.
# create source folder for client side code
mkdir src
# our react app's root file
touch index.js
#create webpack config file
touch webpack.config.js
# get into src folder
cd src
# create HTML entrypoint for React development
touch index.html
Code language:PHP(php)
# our app file and styling
touch App.js
// Screens
touch MovieList.js
touch MoviePage.js
# for styling
touch App.css
Code language:PHP(php)
All npm packages contain a file that holds metadata about the app. This file is a package.json file.
You should update the package.json file.
Edit the scripts section and add Babel presets and postcss configurations.
Step 2 - Webpack configuration and index.html file
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 the 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 webpack.config.js file.
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
// checks if it is production bundling or development bundlingconst isEnvProduction = process.argv.includes("production")
// our JS root fileconst entrypoint = './index.js'const productionSettings = {
mode: "production",
entry: entrypoint,
output: {
// output directory will be the root directory of djangopath: path.resolve(__dirname, '../'),
// this is the bundled code we wrotefilename: 'static/js/[name].js',
// this is the bundled library codechunkFilename: 'static/js/[name].chunk.js'
},
optimization: {
minimize: true,
splitChunks: {
chunks: 'all',
name: true,
},
runtimeChunk: false,
},
devServer: {
historyApiFallback: true,
stats: 'normal',
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$|jsx/,
exclude: /node_modules/},
{
test: /\\.css$/i,
use: [
// IMPORTANT => don't forget `injectType` option// in some cases some styles can be missing due to// inline styling.
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
"css-loader"
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
// ENTRYPOINT - this is where webpack read our app for bundlingtemplate: "./src/index.html",
// OUTPUT FILE// this is emitted bundle html file// ----------------------------------// django will use this as template after bundling// -----------------------------------filename:"./templates/index.html"
}),
]
};
const devSettings = {
mode: "development",
entry: entrypoint,
output: {
path: path.resolve(__dirname, './build'),
publicPath: "/",
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
},
devtool: 'inline',
devServer: {
historyApiFallback: true,
contentBase: './dist',
stats: 'minimal',
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$|jsx/,
exclude: /node_modules/},
{
test: /\.css$/i,
use: [
//{loader: MiniCssExtractPlugin.loader, options: {// //your styles extracted in a file for production builds.// //hmr: isEnvDevelopment,// },// },// IMPORTANT => don't forget `injectType` option
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
"postcss-loader"//"css-loader"//{ loader: 'sass-loader' },
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
})
]
};
module.exports = isEnvProduction ? productionSettings : devSettings;
Code language:JavaScript(javascript)
When we are developing frontend, our React app renders all our JavaScript code to this HTML file in the src folder.
Also, when we build our code for production (bundling), Webpack will use this HTML as a template.
It is important to say that Django will not use this HTML file. This is the HTML entry point of webpack. Django will use the output of the webpack bundle.
The index file is the root file of our app, meaning that all our codes will be connected to this root file.
The other tutorials or each boilerplate use this file for only render function of ReactDOM and leave it small and clear.
Writing this index file as it is is a totally a choice.
What we will do is as follows: We will create an Init component that will initialize the API framework (Apollo) and routing library (react-router-dom).
We will wrap our App.js file with the API framework so that all our components will be in the context of API.
The Apollo Provider expects an Apollo client.
The Apollo client has the information of the requested address, which is the address of our Django server.
After then we will wrap our App file again with the router component, namely Browser Router. This makes our app a single-page-application.
Thus, we make routing without rendering all the pages when the URL of the address bar changes.
At the end of the file, you will see the render function of ReactDOM which accepts our root component, which is the Init component in our case, and the DOM element that our app will be rendered in there.
Update your index.js file as follows.
import React from'react';
import ReactDOM from'react-dom';
import App from'./App';
import { BrowserRouter } from"react-router-dom"import ApolloClient from'apollo-boost';
import { ApolloProvider } from'@apollo/react-hooks';
/*
our frontend api client will make request to
the adress we define in the first part.
*/const apiclient = new ApolloClient({
uri: '<http: 127.0.0.1:8000="" graphql="">',
});
const Init = () => (
<apolloproviderclient="{apiclient}"><browserrouter><app></app></browserrouter></apolloprovider>
)
ReactDOM.render( <init>, document.getElementById('root'))
</init></http:>
Code language:JavaScript(javascript)
Now, we are ready to create our simple movie app.
Our app has two different screens:
The main page which lists all movies in the database with less information
The movie page will show a specific movie page with more information.
Now update your App.js file.
import React from"react";
import { Route, Switch, Link } from"react-router-dom"// UI Screens we will define laterimport MoviePage from"./MoviePage.js"//Newimport MoviePage from"./MoviePage.js"//Newimport"./App.css"const App = () => {
return (
<divclassName="App"><Switch><Routeexactpath="/"component={MainPage} />
{// colon before slug means it is a dynamic value
// that makes slug parameter anything
// like: /movie/the-lighthouse-2019 or /movie/anything
// as long as slug matches with database.
}
<Routeexactpath="/movie/:slug"component={MoviePage} /></Switch></div>)
}
exportdefault App
Code language:JavaScript(javascript)
Let me explain what that code means
When a user first opens our page, the switch component from react-router-dom will look at the URL. Then try to match the path of route components with this URL, if any, then the matched component in the route will be rendered.
Step - 4 Create page components and styling
The MovieList component will be shown on the landing page. Copy/Paste to "MovieList.js" file.
import React from "react";
import gql from "graphql-tag";
// our first query will requests all movies// with only given fields// note the usage of gql with 'jsvascript string literal'
export const MOVIE_LIST_QUERY = gql`
query movieList{
movieList{
name, posterUrl, slug
}
}
`
const MovieList = (props) => {
const { loading, error, data } = useQuery(MOVIE_LIST_QUERY);
// when query starts, loading will be true until the response come.// At this time this will be rendered on screenif (loading) return <div>Loading</div>
// if response fail, this will be renderedif (error) return <div>Unexpected Error: {error.message}</div>//if query succeed, data will be available and render the datareturn(
<div classname="main-page">
{data && data.movieList &&
data.movieList.map(movie => (
<div classname="movie-card" key="{movie.slug}">
<img classname="movie-card-image" src="{movie.posterUrl}alt={movie.name" +="""="" poster"}title="{movie.name" poster"}="">
<p classname="movie-card-name">{movie.name}</p>
<link to="{`/movie/${movie.slug}`}" classname="movie-card-link">
</div>))
}
</div>)
}
export default MovieList
Code language:PHP(php)
MoviePage component will show more details than the list view but only information about a specific movie.
Copy and paste the code MoviePage.js file.
import React from "react";
import gql from "graphql-tag";
// Note the usage of argument.// the exclamation mark makes the slug argument as required// without it , argument will be optional
export const MOVIE_QUERY = gql`
query movie($slug:String!){
movie(slug:$slug){
id, name, year, summary, posterUrl, slug
}
}
`const MoviePage = (props) => {
// uncomment to see which props are passed from router//console.log(props)// due to we make slug parameter dynamic in route component,// urlParameters will look like this { slug: 'slug-of-the-selected-movie' }const urlParameters = props.match.params
const { loading, error, data } = useQuery(MOVIE_QUERY, {
variables:{slug:urlParameters.slug}
});
if (loading) return <div>Loading</div>if (error) return <div>Unexpected Error: {error.message}</div>
return (
<div classname="movie-page">
<link to="/" classname="back-button">Main Page
{data && data.movie &&
<div classname="movie-page-box">
<img classname="movie-page-image" src="{data.movie.posterUrl}alt={data.movie.name" +="""="" poster"}title="{data.movie.name" poster"}="">
<div classname="movie-page-info">
<h1>{data.movie.name}</h1>
<p>Year: {data.movie.year}</p>
<br>
<p>{data.movie.summary}</p>
</div>
</div>}
</div>)
}
export default MoviePage
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.
The Project Description
We will set up one Django server and make two simple single-page applications. Each of them will use different Javascript libraries and both of them will communicate with the Django server.
React application will be written from scratch with webpack in the second part. Also, note that create-react-app will not be used.
The latest and third part of this tutorial will be Svelte integration.
There are 2 projects and 3 articles in this series:
Django server and GraphQL API setup
React application setup with webpack and integrating it with our back-end.
Svelte application setup with webpack and integrating it with our back-end.
What are the requirements to follow?
Basic level of knowledge about Python and Django framework
Basic level of Javascript and React is a must.
Motivation
Python is my first programming language. When we were making a movie recommendation engine, we must integrate it with Facebook’s React library because we want it to be a single page application.
My level of knowledge about Javascript was at the introduction level. Proficient in an unfamiliar programming language takes some time.
Also, I like the Python ecosystem because of the excellent data science libraries, and giving up from Python was never a choice.
To sum up, it really took some time to integrate Django and React. When I recently published my development blog, I edited and update old articles.
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.
General Information
What is a Single Page Application?
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.
In modern client-side apps, some logical operations are handled by Javascript code which is 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.
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.
Therefore, users still see your app rather than a blank white page.
Browsers are amazing and capable of many impressive things.
Because of this capability, handling resource-heavy operations in the user’s browser can be a suitable alternative.
Otherwise, those operations make our server busy and can increase the bill.
Anyone who slaps a ‘this page is best viewed with Browser X’ 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
Setting up the Django Back-end
Step-1: Create a Django project from scratch
Let’s create a virtual environment fora clean setup.
This virtual environment will be an active environment for all three articles.
Update your ****'djangoproject/djangoproject/settings.py’ file. Extra settings are labeled as ’New …’.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"django_extensions",<em># New! (useful extension)</em>'graphene_django', <em># New! (for graphql communication)</em>'corsheaders', <em># New! (for cors request in dev env)</em>
]
<em># New (for improved interactive shell)</em>
SHELL_PLUS = "ipython"
<em># New (it allows webpack development server to make cross origin request)</em>
CORS_ORIGIN_WHITELIST = (
'<http://localhost:8080>',
)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'corsheaders.middleware.CorsMiddleware', <em># New Add this</em>'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'),), <em># New</em>'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',
],
},
},
]
<em>#New </em>
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
Code language:PHP(php)
Before starting our project, we should first make database migration. After, we will run our server and will see that is working.
<em># create migration for django-orm</em>
python manage.py migrate
Code language:HTML, XML(xml)
Now, if everything goes well, 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:
Step-3: Creating a movie app
We will create a movie model with basic fields that a movie should have.
Before that, we should give some information about the field choices.
Why there is a URL field for poster rather than image field?
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.
Because of this, we will save only the poster’s URL, not the poster’s itself as an image file. Also, sending static files like images is not a good approach.
We will send the exact URL of an image to the user. Then, the user’s browser fetches the image from this.
What is a slug and why it should be unique?
Let me explain with an example: I published the original article on this blog. cbsofyalioglu[com]/post/django-and-modern-js-libraries-backend
The last part of the URL, django-and-modern-js-libraries-backend, is the slug of the post and also it is an identifier that makes the URL distinctive from other post pages.
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.
We can also choose another identifier as the URL identifier, but it’s clear that the URL will not be a human-readable address.
Search engine indexing and ranking is a vital part of any website targeting new users. Readable URL addresses’ are good for users themselves and also suggested by search engine guides. Also, Google webmaster guidelines recommend using clean and concise URL structures.
Let’s 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.
Let’s 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.
<em># create new Django app</em>
python manage.py startapp items
Open ’djangoproject/items/models.py’ file and copy the below code.
<em># items.models</em>
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)
<em># order items in descending order</em>
class Meta:
ordering = ["-year"]
<em># the method which defines string output of class</em>
def __str__(self):
return self.name
<em># the method which loads initial data</em>
@classmethod
def import_records(cls, record_list):
for record in record_list:
<em># create record if id is not exist</em>
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")
Code language:HTML, XML(xml)
<em># make database migrations</em>
python manage.py makemigrations
python manage.py migrate
Code language:HTML, XML(xml)
Step-4: Populating database with initial data
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.
First, create an "initial_data.py" file in "djangoproject/utils" folder. After, you can copy and paste the below data to this new file.
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': '<https://image.tmdb.org/t/p/w185/3nk9UoepYmv1G9oP18q6JJCeYwN.jpg>'
},{
'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': '<https://image.tmdb.org/t/p/w185/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg>'
},{
'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': '<https://image.tmdb.org/t/p/w185/rXsh4MI6uyVgZBSSzXCfitJnVPy.jpg>'
},{
'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': '<https://image.tmdb.org/t/p/w185/3NTEMlG5mQdIAlKDl3AJG0rX29Z.jpg>'
}]
Code language:JavaScript(javascript)
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.
<em># open interactive shell</em>
python manage.py shell_plus
Code language:HTML, XML(xml)
<em># let's check database and verify it's empty</em>
Movie.objects.all()
<em># prints: <QuerySet []></em><em># import the records which we took it from github repo</em>
from utils.initial_data import initial_data
<em># create records in the database</em>
Movie.import_records(initial_data)
<em># prints 'Import operation done successfully'</em><em># query database and verify it is not empty</em>
Movie.objects.all()
Code language:HTML, XML(xml)
Our model and database are ready. You can close the shell with quit command.
The next section will be creating a GraphQL API.
Setting up GraphQL API
In this section, we will make our app’s API part with Graphene which is a GraphQL framework implementation of Python.
What we do in this section is:
Creating another Django app: We will put all API configurations in there.
Creating an API Schema that has three parts: API-model, Resolvers, and Queries.
Creating a URL endpoint: The client-side application will request all information to this URL address.
Step 1 - Creating another Django app for API configurations
Actually, there is not any 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.
Let’s create the second backend app. The name of the app should not have to be ‘gql’, but if you set another name, you should also change the name of the schema in settings .py later.
Open your terminal at the root level of your project.
<em># create app with the name gql</em>
python manage.py startapp gql
<em># change directory</em>
cd gql
<em># create schema.py file</em>
touch schema.py
Code language:HTML, XML(xml)
Step 2 - Creating an API Schema: API-model, Queries and Resolvers
API-schema will have three parts considering the scope of the article. Those are as follows:
API-Model-Type: A 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.
Queries: The client-side app will use these queries for distinct requests.
Resolvers: Those 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.
A )API-Model-Type and Resolvers
A class which 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.
You can check other scalar types from the Graphene Python documentation…
We will step by step write the schema .py file. You can copy and paste it.
You can check other scalar types from the Graphene Python documentations…
We will step by step write the schema .py file. You can copy and paste it.
import graphene
from items.models import Movie
from graphene_django.types import DjangoObjectType
<em># api-movie-model</em>
class MovieType(DjangoObjectType):
id = graphene.Int()
name = graphene.String()
year = graphene.Int()
summary = graphene.String()
poster_url = graphene.String()
slug = graphene.String()
<em># define which model will be the base</em>
class Meta:
model = Movie
<em># 'self' corresponds to the item of Django model </em><em># like The Lighthouse or Joker</em>
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
Code language:HTML, XML(xml)
Let me explain the above code.
The 'MovieType’ class is a mapped version of 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.
It is important to say that resolver names are written in snake case like ‘resolve_poster_url’. However, when we write client-side queries, those will be pascal case such as ‘posterUrl’. You see that later.
B ) Queries and Resolvers
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. Therefore, this part also defines the allowable requests of the frontend part.
For the sake of simplicity, we will define only two queries.
The movie_list query (resolve_movie_list) returns to all the movies in the database
The movie query (resolve_movie) returns only specific movie if the parameter (slug) is matched.
Let add this code below MovieType class.
class Query(graphene.ObjectType):
movie_list = graphene.List(MovieType)
movie = graphene.Field(MovieType, slug=graphene.String())
def resolve_movie_list(self, info, *_):
<em># for large lists only query what you need</em>
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)
Code language:HTML, XML(xml)
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.
<em># djangoproject/djangoproject/settings.py</em><em># New - Add this part</em>
GRAPHENE= {'SCHEMA': 'gql.schema.schema'}
<em># MIDDLEWARE = [..]</em>
Code language:HTML, XML(xml)
Step 3 - Create URL endpoints
In REST API, we define different URL Endpoints for different requests. One of the good part of GraphQL is that we will only define one endpoint. All the requests will be done through that.
Copy the below code and paste it to djangoproject/djangoproject/urls .py file.
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),
<em># apiclient on client-side will request this adress later</em>
path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),
<em># index.html file will be our root template. When a user opens our webste,</em>
<em># this file will be sent by server at first. After then, api requests</em>
<em># will directed above address.</em>
<em># (it points to ~/Blog/djr/templates/index.html)</em>
<em># (currently there is no file, webpack production bundle will come here )</em>
path("", TemplateView.as_view(template_name="index.html")),
]
Code language:PHP(php)
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.
Now, please run the server in the root folder : ‘djangoproject/’
python [manage.py](<http://manage.py/>) runserver
Code language:HTML, XML(xml)
Open 127.0.0.1:8000/graphql address from your browser. We will query the movie with specific identifier (slug). On the left panel, paste this and press the Execute Query button.
Please note that, we request fields with pascalCase. (posterUrl)