Hello.! I hope you are doing great. In the last post we setup our application backend structure and in this one we are setting the frontend workflow for our application.
Run the yarn init -y in your root folder structure to setup yarn or npm whatever you like.
yarn init -y
we will get a file package.json something like this
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT"
}
Now install the all Dev dependencies for our project with this command. We will use Laravel Mix as our build tool.
yarn add autoprefixer laravel-mix postcss tailwindcss -D
after running this your package.json will look like this.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
}
}
Now install the dependencies of the project which we will need in our project. We will be use Tailwind's UI Kit Daisy UI for our UI.
yarn add @tailwindcss/typography daisyui jquery
after installing these dependencies our package.json will look like this.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.4",
"daisyui": "^2.22.0",
"jquery": "^3.6.0"
}
}
Now generate tailwindcss config file for our project.
npx tailwindcss init
this will generate tailwind.confg.js which something looks like this.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Now create a src folder in the root directory and make two more folders in the src folder css and js and create app.css file in your css folder and app.js file in your js folder. Your folder structure will look like this.
Open src/css/app.css file and place tailwind directives there.
@tailwind base;
@tailwind components;
@tailwind utilities;
Open src/js/app.js file and setup the jquery in that file.
window.$ = window.jQuery = require('jquery');
Now its time to configure Daisy UI and twailwind's typography helper in our project. Open tailwind.config.js file and add these two enteries in the plugins array.
{
...,
plugins: [
require('@tailwindcss/typography'),
require('daisyui')
]
}
After that tailwind.config.js will looks like this. Also add templates and js files in the contents so tailwindcss will generate those classes which are using in the project and remove those from the build file which project is not using for minimize the css file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./application/views/**/*.jinja2',
'./application/assets/js/**/*.js',
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
require('daisyui')
],
}
Now its time to build these assets using our build tool Laravel Mix. Create webpack.mix.js file in our root diretcory and place all these configurations in that file.
const mix = require('laravel-mix');
mix.options({
fileLoaderDirs: {
fonts: "assets/fonts",
images: "assets/images",
},
});
mix.js("src/js/app.js", "application/assets/js")
.postCss("src/css/app.css", "application/assets/css", [
require("tailwindcss"),
]);
We need scripts to build our assets for development and production so add those lines in package.json file after adding those lines package.json will look like this.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.4",
"daisyui": "^2.22.0",
"jquery": "^3.6.0"
}
}
After adding these configurations you can run command to build these assets.
Development
yarn dev
Production
yarn prod
Watch server
yarn watch
these will build your assets into assets diretcory in application/assets you can also ignore this directory in .gitignore file in application directory.
Now in views create 3 folders includes, layouts and pages create one file in layouts with the name of app.jinja2 and 2nd one in pages directory with the name of home.jinja2 the content of these two files are here.
app.jinja2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
<title>{% block title %}{% endblock %}</title>
</head>
<body class="prose">
{% block content %}{% endblock %}
<script src="{{ url_for('static', filename='css/app.css') }}"></script>
</body>
</html>
home.jinja2
{% extends 'layouts/app.jinja2' %}
{% block title %} Home {% endblock %}
{% block content %}
<h1 class="text-3xl">Home</h1>
<button class="btn btn-primary">Home</button>
{% endblock %}
after setting all our templates so we can change a bit in our controller home.py.
from flask import Blueprint, render_template
controller = Blueprint('home', __name__)
@controller.route('/', methods=['GET'])
def index():
return render_template('pages/home.jinja2')
Now run you applictaion
python run.py
Open the url https://127.0.0.1:5000
You can get the updated code on GitHub Repo
Thanks for being with me.
See you guys in next post if you have any issue while going with this post feel free to comment.
Top comments (0)