Python Flask 프런트엔드 워크플로 설정

안녕하십니까.! 잘 지내고 계시길 바랍니다. 지난 게시물에서 우리는 애플리케이션 백엔드 구조를 설정했고 이번 게시물에서는 애플리케이션의 프런트엔드 워크플로를 설정했습니다.

루트 폴더 구조에서 yarn init -y를 실행하여 원하는 대로 yarn 또는 npm을 설정합니다.

yarn init -y

다음과 같은 파일package.json을 얻습니다.

{
  "name": "flask_blog",
  "version": "1.0.0",
  "repository": "[email protected]:MuhammadSaim/flask_tutorial_blog.git",
  "author": "Muhammad Saim",
  "license": "MIT"
}

이제 이 명령을 사용하여 프로젝트의 모든 Dev 종속성을 설치합니다. 빌드 도구로 Laravel Mix을 사용합니다.

yarn install autoprefixer laravel-mix postcss tailwindcss -D

이것을 실행한 후 package.json는 다음과 같이 표시됩니다.

{
  "name": "flask_blog",
  "version": "1.0.0",
  "repository": "[email protected]: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"
  }
}

이제 프로젝트에 필요한 프로젝트의 종속성을 설치합니다. UI에는 Tailwind의 UI 키트Daisy UI를 사용합니다.

yarn add @tailwindcss/typography daisyui jquery

이러한 종속성을 설치한 후 package.json는 다음과 같이 표시됩니다.

{
  "name": "flask_blog",
  "version": "1.0.0",
  "repository": "[email protected]: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"
  }
}

이제 프로젝트에 대한 tailwindcss 구성 파일을 생성합니다.

npx tailwindcss init

이렇게 하면 다음과 같은 모양tailwind.confg.js이 생성됩니다.

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

이제 루트 디렉토리에 src 폴더를 만들고 src 폴더에 css 및 js 폴더를 두 개 더 만들고 app.css 폴더에 css 파일을 만들고 app.js 폴더에 js 파일을 만듭니다. ) 폴더. 폴더 구조는 다음과 같습니다.


src/css/app.css 파일을 열고 거기에 tailwind 지시문을 배치합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

src/js/app.js 파일을 열고 해당 파일에서 jquery를 설정합니다.

window.$ = window.jQuery = require('jquery');

이제 프로젝트에서 Daisy UI 및 twailwind의 타이포그래피 도우미를 구성할 시간입니다. tailwind.config.js 파일을 열고 플러그인 배열에 이 두 항목을 추가합니다.

{
  ...,
  plugins: [
    require('@tailwindcss/typography'),
    require('daisyui')
  ]
}

그 후tailwind.config.js는 다음과 같습니다. 또한 콘텐츠에 템플릿과 js 파일을 추가하여 tailwindcss가 프로젝트에서 사용 중인 클래스를 생성하고 프로젝트가 css 파일을 최소화하기 위해 사용하지 않는 빌드 파일에서 해당 클래스를 제거하도록 합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      './application/views/**/*.jinja2',
      './application/assets/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('@tailwindcss/typography'),
      require('daisyui')
  ],
}

이제 빌드 도구Laravel Mix를 사용하여 이러한 자산을 빌드할 시간입니다. 루트 디렉터리에 webpack.mix.js 파일을 생성하고 이러한 모든 구성을 해당 파일에 배치합니다.

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"),
  ]);

개발 및 프로덕션용 자산을 빌드하려면 스크립트가 필요하므로 해당 줄을 추가한 후 package.json 파일에 해당 줄을 추가하십시오. package.json은 다음과 같습니다.

{
  "name": "flask_blog",
  "version": "1.0.0",
  "repository": "[email protected]: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"
  }
}

이러한 구성을 추가한 후 명령을 실행하여 이러한 자산을 빌드할 수 있습니다.

개발

yarn dev

생산

yarn prod

감시 서버

yarn watch

이것은 assets 디렉토리의 application/assets 디렉토리에 자산을 빌드합니다. .gitignore 디렉토리의 application 파일에서 이 디렉토리를 무시할 수도 있습니다.



이제 views에서 3개의 폴더includes, layouts 및 pages에서 이름이 app.jinja2인 레이아웃에 하나의 파일을 만들고 pages 디렉토리에 이름이 home.jinja2인 두 번째 파일을 만듭니다. 두 개의 파일이 여기에 있습니다.

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>

집.진자2

{% extends 'layouts/app.jinja2' %}


{% block title %} Home {% endblock %}


{% block content %}
    <h1 class="text-3xl">Home</h1>
    <button class="btn btn-primary">Home</button>
{% endblock %}

컨트롤러에서 약간 변경할 수 있도록 모든 템플릿을 설정한 후home.py .

from flask import Blueprint, render_template

controller = Blueprint('home', __name__)


@controller.route('/', methods=['GET'])
def index():
    return render_template('pages/home.jinja2')

이제 응용 프로그램을 실행하십시오

python run.py

URL 열기https://127.0.0.1:5000


GitHub Repo에서 업데이트된 코드를 얻을 수 있습니다.

나와 함께 해주셔서 감사합니다.

이 게시물을 진행하는 동안 문제가 있으면 다음 게시물에서 뵙겠습니다. 언제든지 댓글을 남겨주세요.