118 |
119 |
120 |
121 | ```
122 |
123 | 1. We added a `root` div to let React render the component.
124 | 1. We use `{% javascript_pack 'app' 'app_react' attrs='defer' %}` to load two entrypoint files to the template.
125 |
126 | ```bash
127 | $ python manage.py runserver
128 | ```
129 |
130 | !!! note
131 | Here we use React to render specific component in the page, and we can still use raw HTML to write other parts, which is convenient
132 |
133 | Here is the screenshot:
134 |
135 | 
136 |
--------------------------------------------------------------------------------
/docs/requirements.txt:
--------------------------------------------------------------------------------
1 | mkdocs==1.1.2
2 | mkdocs-material==6.2.8
3 | jinja2==3.0.3
4 |
--------------------------------------------------------------------------------
/docs/run_npm_command_at_root.md:
--------------------------------------------------------------------------------
1 | # Run NPM command at root directory
2 |
3 | !!! note
4 | This feature is turned on by default since `1.0.3`
5 |
6 | By default, the `package.json` will be placed at the `frontend` directory, which means, you need to run `npm` command under the `frontend` directory.
7 |
8 | If you do not like this and want to run `npm` command at the root directory.
9 |
10 | Please set `run_npm_command_at_root` to `y` when you create the `webpack` project.
11 |
12 | Below files will be placed at the root directory instead of the `frontend` directory.
13 |
14 | ```
15 | .babelrc
16 | .browserslistrc
17 | .eslintrc
18 | .nvmrc
19 | .stylelintrc.json
20 | package-lock.json
21 | package.json
22 | ```
23 |
--------------------------------------------------------------------------------
/docs/setup_with_bootstrap.md:
--------------------------------------------------------------------------------
1 | # Bootstrap
2 |
3 | After you create the frontend project using this project
4 |
5 | ```bash
6 | $ npm install bootstrap
7 | ```
8 |
9 | Then you will see something like this in the package.json
10 |
11 | ```json
12 | {
13 | "dependencies": {
14 | "bootstrap": "^5.3.0"
15 | }
16 | }
17 | ```
18 |
19 | Import Bootstrap in `src/application/app.js`
20 |
21 | ```javascript
22 | import "bootstrap/dist/js/bootstrap.bundle";
23 | ```
24 |
25 | Import Bootstrap SCSS in `src/styles/index.scss`
26 |
27 | ```scss
28 | // If you comment out code below, bootstrap will use red as primary color
29 | // and btn-primary will become red
30 |
31 | // $primary: red;
32 |
33 | @import "~bootstrap/scss/bootstrap.scss";
34 | ```
35 |
36 | That is it, you can run `npm run watch` and check the result in the browser.
37 |
38 | ## Reference
39 |
40 | [https://getbootstrap.com/docs/5.0/getting-started/webpack/](https://getbootstrap.com/docs/5.0/getting-started/webpack/)
41 |
--------------------------------------------------------------------------------
/docs/setup_with_django.md:
--------------------------------------------------------------------------------
1 | # Setup With Django
2 |
3 | We will show you how to integrate `python-webpack-boilerplate` with Django and use Tailwind v4 as the style solution.
4 |
5 | ## Install Package
6 |
7 | ```bash
8 | $ pip install Django
9 | $ django-admin startproject example
10 | $ cd example
11 | ```
12 |
13 | Now your Django projects would seem like this:
14 |
15 | ```
16 | ├── manage.py
17 | └── example
18 | ├── __init__.py
19 | ├── asgi.py
20 | ├── settings.py
21 | ├── urls.py
22 | └── wsgi.py
23 | ```
24 |
25 | Next, install package
26 |
27 | ```bash
28 | $ pip install python-webpack-boilerplate
29 | ```
30 |
31 | Add `webpack_boilerplate` to the `INSTALLED_APPS` in `example/settings.py`
32 |
33 | ```python hl_lines="9"
34 | INSTALLED_APPS = [
35 | 'django.contrib.admin',
36 | 'django.contrib.auth',
37 | 'django.contrib.contenttypes',
38 | 'django.contrib.sessions',
39 | 'django.contrib.messages',
40 | 'django.contrib.staticfiles',
41 |
42 | 'webpack_boilerplate',
43 | ]
44 | ```
45 |
46 | Let's run Django command to create frontend project from the templates
47 |
48 | ```bash
49 | $ python manage.py webpack_init
50 | [1/3] project_slug (frontend):
51 | [2/3] run_npm_command_at_root (y):
52 | [3/3] Select style_solution
53 | 1 - tailwind
54 | 2 - bootstrap
55 | 3 - scss
56 | Choose from [1/2/3] (1): 1
57 | [SUCCESS]: Frontend app 'frontend' has been created. To know more, check https://python-webpack-boilerplate.rtfd.io/en/latest/frontend/
58 | ```
59 |
60 | Here we use the default `Tailwind CSS` as our style solution.
61 |
62 | Now a new `frontend` directory is created which contains pre-defined files for our frontend project.
63 |
64 | ```bash
65 | ├── frontend
66 | │ ├── src
67 | │ ├── vendors
68 | │ └── webpack
69 | ├── manage.py
70 | ├── package-lock.json
71 | ├── package.json
72 | ├── postcss.config.js
73 | └── requirements.txt
74 | ```
75 |
76 | ## Frontend
77 |
78 | !!! note
79 | If you have no nodejs installed, please install it first by using below links
80 |
81 | 1. On [nodejs homepage](https://nodejs.org/en/download/)
82 | 1. Using [nvm](https://github.com/nvm-sh/nvm) I recommend this way.
83 |
84 | ```bash
85 | $ node -v
86 | v22.13.1
87 | $ npm -v
88 | 10.9.2
89 | ```
90 |
91 | Now go to directory which contains `package.json`, by default, it is root directory.
92 |
93 | ```bash
94 | # install dependency packages
95 | $ npm install
96 |
97 | # run webpack in watch mode
98 | $ npm run watch
99 | ```
100 |
101 | !!! note
102 | run watch means webpack will watch source files and recompile whenever they change
103 |
104 | The build files now can be found in `frontend/build` directory
105 |
106 | ```
107 | build
108 | ├── css
109 | ├── js
110 | ├── manifest.json
111 | └── vendors
112 | ```
113 |
114 | !!! note
115 | You can check [Frontend Workflow](frontend.md) to learn more details about the frontend workflow
116 |
117 | After Webpack has compiled the assets, we can load the assets in Django.
118 |
119 | ## Config Django
120 |
121 | Add code below to Django settings `example/settings.py`
122 |
123 | ```python
124 | STATICFILES_DIRS = [
125 | BASE_DIR / "frontend/build",
126 | ]
127 |
128 | WEBPACK_LOADER = {
129 | 'MANIFEST_FILE': BASE_DIR / "frontend/build/manifest.json",
130 | }
131 | ```
132 |
133 | 1. We add the above `frontend/build` to `STATICFILES_DIRS` so Django can find the static assets (img, font and others)
134 | 1. We add `MANIFEST_FILE` location to the `WEBPACK_LOADER` so our `webpack_loader` can know where to find the manifest file.
135 |
136 | ## Load the bundle files
137 |
138 | Let's do a quick test on the home page.
139 |
140 | Update `example/urls.py`
141 |
142 | ```python hl_lines="6"
143 | from django.contrib import admin
144 | from django.urls import path
145 | from django.views.generic import TemplateView
146 |
147 | urlpatterns = [
148 | path('', TemplateView.as_view(template_name="index.html")), # new
149 | path('admin/', admin.site.urls),
150 | ]
151 | ```
152 |
153 | ```bash hl_lines="9"
154 | $ mkdir example/templates
155 |
156 | ├── frontend
157 | ├── manage.py
158 | └── example
159 | ├── __init__.py
160 | ├── asgi.py
161 | ├── settings.py
162 | ├── templates
163 | ├── urls.py
164 | └── wsgi.py
165 | ```
166 |
167 | Update `TEMPLATES` in `example/settings.py`, so Django can know where to find the templates
168 |
169 | ```python hl_lines="4"
170 | TEMPLATES = [
171 | {
172 | 'BACKEND': 'django.template.backends.django.DjangoTemplates',
173 | 'DIRS': ['example/templates'],
174 | 'APP_DIRS': True,
175 | 'OPTIONS': {
176 | 'context_processors': [
177 | 'django.template.context_processors.debug',
178 | 'django.template.context_processors.request',
179 | 'django.contrib.auth.context_processors.auth',
180 | 'django.contrib.messages.context_processors.messages',
181 | ],
182 | },
183 | },
184 | ]
185 | ```
186 |
187 | Add `index.html` to the above `example/templates`
188 |
189 | ```html
190 | {% load webpack_loader static %}
191 |
192 |
193 |
194 |
195 | Index
196 |
197 |
198 | {% stylesheet_pack 'app' %}
199 |
200 |
201 |
202 |
203 |
204 |
Hello, world!
205 |
This is a template for a simple marketing or informational website. It includes a large callout called a
206 | jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
215 |
216 | {% javascript_pack 'app' %}
217 |
218 |
219 |
220 | ```
221 |
222 | 1. We `load webpack_loader` at the top of the template
223 | 2. We can still use `static` tag to import image from the frontend project.
224 | 3. We use `stylesheet_pack` and `javascript_pack` to load CSS and JS bundle files to Django
225 |
226 | !!! note
227 | 1. When your javascript and css files grow bigger and bigger, code splitting would be done automatically by Webpack.
228 | 1. The `javascript_pack` would **import dependency files automatically to handle code splitting**
229 | 1. You can import **multiple entry files** using `stylesheet_pack` and `javascript_pack` (`{% javascript_pack 'app' 'vendors'`) if you prefer manual code splitting.
230 |
231 | ## Manual Test
232 |
233 | ```bash
234 | # restart webpack to let Tailwind auto scan
235 | $ npm run watch
236 |
237 | $ python manage.py migrate
238 | $ python manage.py runserver
239 | ```
240 |
241 | Now check on [http://127.0.0.1:8000/](http://127.0.0.1:8000/) and you should be able to see a welcome page.
242 |
243 | In the devtools console, you should see
244 |
245 | ```bash
246 | dom ready
247 | jumbotron.js:8 Jumbotron initialized for node: [object HTMLDivElement]
248 | ```
249 |
250 | ## Explicitly Specify Source Files
251 |
252 | Even Tailwind 4 can AUTO scan all project files in the project directory, we still recommend to explicitly specify the source files to improve performance.
253 |
254 | Below is an example of `frontend/src/styles/index.css`
255 |
256 | ```css
257 | /*import tailwindcss and disable automatic source detection*/
258 | @import "tailwindcss" source(none);
259 |
260 | /*register frontend directory*/
261 | @source "../";
262 |
263 | /*register django templates*/
264 | @source "../../../django_tailwind_app/**/*.html";
265 |
266 | .jumbotron {
267 | /*should be relative path of the entry css file*/
268 | background-image: url("../../vendors/images/sample.jpg");
269 | background-size: cover;
270 | }
271 |
272 | @layer components{
273 | .btn-blue {
274 | @apply inline-flex items-center;
275 | @apply px-4 py-2;
276 | @apply font-semibold rounded-lg shadow-md;
277 | @apply text-white bg-blue-500;
278 | @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/50;
279 | }
280 | }
281 | ```
282 |
283 | ## Live Reload
284 |
285 | [Live Reload Support](live_reload.md)
286 |
--------------------------------------------------------------------------------
/docs/setup_with_flask.md:
--------------------------------------------------------------------------------
1 | # Setup With Flask
2 |
3 | ## Install Package
4 |
5 | ```bash
6 | $ pip install Flask
7 | $ mkdir example
8 | $ cd example
9 | ```
10 |
11 | Next, install package
12 |
13 | ```bash
14 | $ pip install python-webpack-boilerplate
15 | ```
16 |
17 | Create `app.py`
18 |
19 | ```python
20 | import os
21 | from flask import Flask
22 |
23 | app = Flask(__name__)
24 |
25 | @app.cli.command("webpack_init")
26 | def webpack_init():
27 | from cookiecutter.main import cookiecutter
28 | import webpack_boilerplate
29 | pkg_path = os.path.dirname(webpack_boilerplate.__file__)
30 | cookiecutter(pkg_path, directory="frontend_template")
31 | ```
32 |
33 | Here we created a `webpack_init` custom command to help us create `frontend` project.
34 |
35 | ```bash
36 | $ env FLASK_APP=app.py flask webpack_init
37 |
38 | project_slug [frontend]:
39 | run_npm_command_at_root [y]:
40 | [SUCCESS]: Frontend app 'frontend' has been created.
41 | ```
42 |
43 | Now a new `frontend` directory is created which contains pre-defined files for our frontend project.
44 |
45 | ```bash
46 | ├── frontend
47 | │ ├── src
48 | │ ├── vendors
49 | │ └── webpack
50 | ├── manage.py
51 | ├── package-lock.json
52 | ├── package.json
53 | ├── postcss.config.js
54 | └── requirements.txt
55 | ```
56 |
57 | ## Frontend
58 |
59 | !!! note
60 | If you have no nodejs installed, please install it first by using below links
61 |
62 | 1. On [nodejs homepage](https://nodejs.org/en/download/)
63 | 1. Using [nvm](https://github.com/nvm-sh/nvm) I recommend this way.
64 |
65 | ```bash
66 | $ node -v
67 | v20.9.0
68 | $ npm -v
69 | 10.1.0
70 | ```
71 |
72 | Now go to directory which contains `package.json`, by default, it is root directory.
73 |
74 | ```bash
75 | # install dependency packages
76 | $ npm install
77 |
78 | # run webpack in watch mode
79 | $ npm run watch
80 | ```
81 |
82 | !!! note
83 | run watch means webpack will watch source files and recompile whenever they change
84 |
85 | The build files now can be found in `frontend/build` directory
86 |
87 | ```
88 | build
89 | ├── css
90 | ├── js
91 | ├── manifest.json
92 | └── vendors
93 | ```
94 |
95 | !!! note
96 | You can check [Frontend Workflow](frontend.md) to learn more about frontend stuff
97 |
98 | ## Config Flask
99 |
100 | Update `app.py`
101 |
102 | ```python
103 | import os
104 | from pathlib import Path
105 | from flask import Flask, render_template
106 | from webpack_boilerplate.config import setup_jinja2_ext
107 |
108 |
109 | BASE_DIR = Path(__file__).parent
110 | app = Flask(__name__, static_folder="frontend/build", static_url_path="/static/")
111 | app.config.update({
112 | 'WEBPACK_LOADER': {
113 | 'MANIFEST_FILE': BASE_DIR / "frontend/build/manifest.json",
114 | }
115 | })
116 | setup_jinja2_ext(app)
117 |
118 |
119 | @app.cli.command("webpack_init")
120 | def webpack_init():
121 | from cookiecutter.main import cookiecutter
122 | import webpack_boilerplate
123 | pkg_path = os.path.dirname(webpack_boilerplate.__file__)
124 | cookiecutter(pkg_path, directory="frontend_template")
125 |
126 |
127 | @app.route("/")
128 | def hello():
129 | return render_template('index.html')
130 | ```
131 |
132 | 1. We add the above `frontend/build` to `static_folder` so Flask can find the static assets (img, font and others)
133 | 1. `static_url_path` is set to `/static/`
134 | 1. We add `MANIFEST_FILE` location to the `WEBPACK_LOADER` so our custom loader can help us load JS and CSS.
135 | 1. Remember to run `setup_jinja2_ext(app)` so we can us custom template tag in Jinja2
136 |
137 | ## Load the bundle files
138 |
139 | Add `index.html` to `templates`
140 |
141 | ```
142 | ├── app.py
143 | ├── frontend
144 | └── templates
145 | └── index.html
146 | ```
147 |
148 | ```html
149 |
150 |
151 |
152 |
153 | Index
154 |
155 | {{ stylesheet_pack('app') }}
156 | {{ javascript_pack('app', attrs='defer') }}
157 |
158 |
159 |
160 |
161 |
162 |
Welcome to Our Website
163 |
This is a hero section built using Tailwind CSS.
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | ```
174 |
175 | !!! note
176 | 1. Here we use `Tailwind CDN` to help user to do quick test, please remove it later.
177 | 1. You can import multiple entry files using one `javascript_pack` statement
178 | 1. The `javascript_pack` would also **import dependency files automatically to handle code splitting**
179 | 1. You can use `attrs` to set custom attributes
180 |
181 | ## Manual Test
182 |
183 | ```bash
184 | $ env FLASK_APP=app.py flask run
185 | ```
186 |
187 | Now check on [http://127.0.0.1:5000/](http://127.0.0.1:5000/) and you should be able to see a welcome page.
188 |
189 | The source code can also be found in the [Examples](https://github.com/AccordBox/python-webpack-boilerplate/tree/master/examples/)
190 |
--------------------------------------------------------------------------------
/docs/setup_with_tailwind.md:
--------------------------------------------------------------------------------
1 | # Tailwind CSS v4
2 |
3 | From `python-webpack-boilerplate>=1.0.4`, we can choose `tailwind` as the style solution when creating the frontend project.
4 |
5 | ```bash
6 | (venv) python manage.py webpack_init
7 | [1/3] project_slug (frontend):
8 | [2/3] run_npm_command_at_root (y):
9 | [3/3] Select style_solution
10 | 1 - tailwind
11 | 2 - bootstrap
12 | 3 - scss
13 | Choose from [1/2/3] (1): 1
14 | [SUCCESS]: Frontend app 'frontend' has been created. To know more, check https://python-webpack-boilerplate.rtfd.io/en/latest/frontend/
15 | ```
16 |
17 | Just choose `tailwind` as the style_solution, the Tailwind V4 will be ready for you.
18 |
19 | ## Install Dependency
20 |
21 | In directory which contains the `package.json`
22 |
23 | ```bash
24 | # install dependency packages
25 | $ npm install
26 | # run webpack in watch mode
27 | $ npm run watch
28 | ```
29 |
30 | ## Explicitly Specify Source Files
31 |
32 | Even Tailwind 4 can AUTO scan all project files in the project directory, we still recommend to explicitly specify the source files to improve performance and avoid webpack keeps recompiling.
33 |
34 | Below is an example
35 |
36 | ```css
37 | /*import tailwindcss and disable automatic source detection*/
38 | @import "tailwindcss" source(none);
39 |
40 | /*register frontend directory*/
41 | @source "../";
42 |
43 | /*register django templates*/
44 | @source "../../../django_tailwind_app/**/*.html";
45 |
46 | .jumbotron {
47 | /*should be relative path of the entry css file*/
48 | background-image: url("../../vendors/images/sample.jpg");
49 | background-size: cover;
50 | }
51 |
52 | @layer components{
53 | .btn-blue {
54 | @apply inline-flex items-center;
55 | @apply px-4 py-2;
56 | @apply font-semibold rounded-lg shadow-md;
57 | @apply text-white bg-blue-500;
58 | @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/50;
59 | }
60 | }
61 | ```
62 |
63 | !!! note
64 | Please remember to update the file path in your project.
65 |
66 | ## Live Reload
67 |
68 | [Live Reload Support](live_reload.md)
69 |
70 | ## Tailwind V3
71 |
72 | If you still want to install Tailwind V3, please check [Tailwind CSS v3](setup_with_tailwind3.md)
73 |
--------------------------------------------------------------------------------
/docs/setup_with_tailwind3.md:
--------------------------------------------------------------------------------
1 | # Tailwind CSS v3
2 |
3 | This guide will help you install and config `Tailwind v3`
4 |
5 | !!! note
6 | For `python-webpack-boilerplate>=1.0.4`, should choose style solution `scss` when creating the frontend project, and then you can follow this doc
7 |
8 | ## Install Dependency
9 |
10 | In directory which contains the `package.json`, install `tailwindcss` and `postcss-import`
11 |
12 | ```bash
13 | $ npm install -D tailwindcss@3.4.17 postcss-import
14 | ```
15 |
16 | Once done, update `postcss.config.js`
17 |
18 | ```
19 | // https://tailwindcss.com/docs/using-with-preprocessors
20 |
21 | module.exports = {
22 | plugins: [
23 | require('postcss-import'),
24 | require('tailwindcss/nesting')(require('postcss-nesting')),
25 | require('tailwindcss'),
26 | require('postcss-preset-env')({
27 | features: { 'nesting-rules': false }
28 | }),
29 | ]
30 | };
31 | ```
32 |
33 | Next, generate a config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package
34 |
35 | ```bash
36 | $ npx tailwindcss init
37 | ```
38 |
39 | Now `tailwind.config.js` is generated
40 |
41 | ```js
42 | module.exports = {
43 | content: [],
44 | theme: {
45 | extend: {},
46 | },
47 | plugins: [],
48 | }
49 | ```
50 |
51 | !!! note
52 |
53 | Please make sure `tailwind.config.js` exists in the same directory as `postcss.config.js`
54 |
55 | ## JIT
56 |
57 | From Tailwind V3, it enabled `JIT` (Just-in-Time) all the time.
58 |
59 | > Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.
60 |
61 | > In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names.
62 |
63 | So we should config `content` section of the `tailwind.config.js`, then Tailwind will know which css classes are used.
64 |
65 | Let's update *frontend/tailwind.config.js*
66 |
67 | ```js
68 | const Path = require("path");
69 | const pwd = process.env.PWD;
70 |
71 | // We can add current project paths here
72 | const projectPaths = [
73 | Path.join(pwd, "../example/templates/**/*.html"),
74 | // add js file paths if you need
75 | ];
76 |
77 | const contentPaths = [...projectPaths];
78 | console.log(`tailwindcss will scan ${contentPaths}`);
79 |
80 | module.exports = {
81 | content: contentPaths,
82 | theme: {
83 | extend: {},
84 | },
85 | plugins: [],
86 | }
87 | ```
88 |
89 | Notes:
90 |
91 | 1. Here we add Django templates path to the `projectPaths`
92 | 1. And then we pass the `contentPaths` to the `content`
93 | 1. The final built css file will contain css classes used in the Django templates
94 |
95 | ## Import Tailwind CSS
96 |
97 | Update *src/styles/index.scss*
98 |
99 | ```scss
100 | @import "tailwindcss/base";
101 | @import "tailwindcss/components";
102 | @import "tailwindcss/utilities";
103 |
104 | .jumbotron {
105 | // should be relative path of the entry scss file
106 | background-image: url("../../vendors/images/sample.jpg");
107 | background-size: cover;
108 | }
109 |
110 | .btn-blue {
111 | @apply inline-block px-4 py-2;
112 | @apply font-semibold rounded-lg shadow-md;
113 | @apply bg-blue-500 text-white;
114 | @apply hover:bg-blue-700 focus:outline-none;
115 | @apply focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
116 | }
117 | ```
118 |
119 | ```
120 | $ npm run start
121 |
122 | tailwindcss will scan django_basic/example/templates/**/*.html
123 | ```
124 |
125 | Edit Django template `templates/index.html`
126 |
127 | ```html hl_lines="8 28"
128 | {% load webpack_loader static %}
129 |
130 |
131 |
132 |
133 |
134 | Index
135 | {% stylesheet_pack 'app' %}
136 |
137 |
138 |
139 |
140 |
141 |
Hello, world!
142 |
143 |
This is a template for a simple marketing or informational website. It includes a large callout called a
144 | jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
154 |
155 | {% javascript_pack 'app' %}
156 |
157 |
158 |
159 | ```
160 |
161 | ```bash
162 | $ python manage.py runserver
163 | ```
164 |
165 | 
166 |
167 | ## Live Reload
168 |
169 | When you add Tailwind css class in Django template, it would be cool if the page can `auto live realod`, please check link below
170 |
171 | [Live Reload Support](live_reload.md)
172 |
173 | ## Tutorials
174 |
175 | To learn more about Tailwind and Django, you can check
176 |
177 | 1. [Django Tailwind CSS Alpine.js Tutorial](https://www.accordbox.com/blog/django-tailwind-css-alpinejs-tutorial/)
178 | 2. [wagtail-tailwind-blog](https://github.com/AccordBox/wagtail-tailwind-blog)
179 |
--------------------------------------------------------------------------------
/docs/swc.md:
--------------------------------------------------------------------------------
1 | # SWC (Speedy Web Compiler)
2 |
3 | SWC is an extensible Rust-based platform for the next generation of fast developer tools.
4 |
5 | While Babel mainly focuses on compatibility and transpiling JavaScript code, SWC provides a broader set of optimizations and features to improve the overall development experience.
6 |
7 | SWC supports both JavaScript and TypeScript, making it suitable for a wide range of frontend projects.
8 |
9 | Additionally, SWC's focus on performance optimizations sets it apart from Babel, as it can significantly reduce build times and enhance runtime performance.
10 |
11 | After switching to `SWC`, the build time is optimized for about 20-30% based on my experience.
12 |
13 | Notes:
14 |
15 | 1. Just install `swc-loader` and `@swc/core`.
16 | 2. Config Webpack rules to use `swc-loader` to process JS files.
17 | 3. Customize the `.swcrc` file if you need.
18 | 4. Even SWC also supports bundling, we still use Webpack to bundle the frontend code. Because Webpack has more features and is more mature than SWC bundling.
19 |
20 | ## Reference
21 |
22 | 1. [https://blog.logrocket.com/migrating-swc-webpack-babel-overview/](https://blog.logrocket.com/migrating-swc-webpack-babel-overview/)
23 | 2. [We exchanged Babel&TSC for SWC and it was worth it!](https://engineering.telia.no/blog/we-exchanged-babel-tsc-for-swc-and-it-was-worth-it)
24 |
--------------------------------------------------------------------------------
/docs/typescript.md:
--------------------------------------------------------------------------------
1 | # Typescript support
2 |
3 | ## Option 1
4 |
5 | Please check [How to add Typescript to the Django Project](https://www.accordbox.com/blog/how-to-add-typescript-to-the-django-project/)
6 |
7 | ## Option 2
8 |
9 | Or you can just use SWC to compile Typescript code
10 |
11 | [Use SWC](swc.md)
12 |
--------------------------------------------------------------------------------
/docs/vue.md:
--------------------------------------------------------------------------------
1 | # Setup Vue
2 |
3 | ## Install
4 |
5 | !!! note
6 | We will setup Vue 3 in this tutorial
7 |
8 | Now go to directory which contains `package.json`, by default, it is root directory.
9 |
10 | ```bash
11 | $ npm install vue-loader @vue/compiler-sfc --save-dev
12 | # install vue
13 | $ npm install vue@3
14 | ```
15 |
16 | Edit `frontend/webpack/webpack.common.js`
17 |
18 | ```js
19 | const { VueLoaderPlugin } = require('vue-loader');
20 |
21 | plugins: [
22 | ...
23 |
24 | new VueLoaderPlugin()
25 | ],
26 |
27 | module: {
28 | rules: [
29 | ...
30 |
31 | {
32 | test: /\.vue$/,
33 | loader: "vue-loader",
34 | },
35 | ],
36 | },
37 | ```
38 |
39 | 1. Add `VueLoaderPlugin` to `plugins`
40 | 1. Please also add rule to the `module.rules` to let webpack use `vue-loader` to process `.vue` files.
41 |
42 | That is it, now the frontend project should work with Vue.
43 |
44 | ## Sample App
45 |
46 | Create `frontend/src/components/HelloWorld.vue`
47 |
48 | ```vue
49 |
50 |
51 |
{{ msg }}
52 |
53 | For a guide and recipes on how to configure / customize this project,
54 | check out the
55 | vue-cli documentation.
56 |
112 |  }})
167 |