TheLazy.Dev
Portfolio GitHub

Blog

javascript |python |tailwindcss |flask

Python Flask Frontend workflow setup

muhammadsaim

Muhammad Saim

Posted on August 9, 2022

Python Flask Frontend workflow setup

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now generate tailwindcss config file for our project.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

this will generate tailwind.confg.js which something looks like this.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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.

Src directory structure

Open src/css/app.css file and place tailwind directives there.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Open src/js/app.js file and setup the jquery in that file.

window.$ = window.jQuery = require('jquery');
Enter fullscreen mode Exit fullscreen mode

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')
  ]
}
Enter fullscreen mode Exit fullscreen mode

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')
  ],
}
Enter fullscreen mode Exit fullscreen mode

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"),
  ]);
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

After adding these configurations you can run command to build these assets.

Development

yarn dev
Enter fullscreen mode Exit fullscreen mode

Production

yarn prod
Enter fullscreen mode Exit fullscreen mode

Watch server

yarn watch
Enter fullscreen mode Exit fullscreen mode

these will build your assets into assets diretcory in application/assets you can also ignore this directory in .gitignore file in application directory.

Build assets

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>
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

Now run you applictaion

python run.py
Enter fullscreen mode Exit fullscreen mode

Open the url https://127.0.0.1:5000

Applictaion

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.

💖 💪 🙅 🚩
muhammadsaim
Muhammad Saim

Posted on August 9, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Python Flask Frontend workflow setup
javascript Python Flask Frontend workflow setup

August 9, 2022