Feature/prepare 1.0.3 (#42)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## v1.0.3
+
+1. Remove `Bootstrap` from the default setup.
+2. Update doc about `Bootstrap`, `SWC`, `React`, `Vue`
+6. Update frontend dependency to the latest version
+
 ## v1.0.2
 
 1. Support Node LTS Iron

README.md

@@ -4,38 +4,11 @@
 [![PyPI version](https://badge.fury.io/py/python-webpack-boilerplate.svg)](https://badge.fury.io/py/python-webpack-boilerplate)
 [![Documentation](https://img.shields.io/badge/Documentation-link-green.svg)](https://python-webpack-boilerplate.rtfd.io/)
 
-## Difference between django-webpack-loader
-
-When using `django-webpack-loader`, you need to create `Webpack` project on your own, which is not easy for many newbie Django developers.
-
-`python-webpack-boilerplate` can let you play with modern frontend tech in Django, even you have no idea how to config Webpack.
-
-## Features
-
-- **Supports Django and Flask** (will support more framework in the future)
-- Automatic multiple entry points
-- Automatic code splitting
-- Hot Module Replacement (HMR) (auto reload web page if you edit JS or SCSS)
-- Easy to config and customize
-- ES6 Support via [babel](https://babeljs.io/) (v7)
-- JavaScript Linting via [eslint](https://eslint.org/)
-- SCSS Support via [sass-loader](https://github.com/jtangelder/sass-loader)
-- Autoprefixing of browserspecific CSS rules via [postcss](https://postcss.org/) and [postcss-preset-env](https://github.com/csstools/postcss-preset-env)
-- Style Linting via [stylelint](https://stylelint.io/)
-
-----
-
-If you want to import **lightweight modern frontend solution** to your web app, or you do not like **heavy framework** such as React, Vue.
-
-Please check my book [The Definitive Guide to Hotwire and Django](https://leanpub.com/hotwire-django)
-
-----
+Bring modern frontend tooling to Django, Flask, within minutes.
 
 ## Documentation
 
-1. [Setup With Django](https://python-webpack-boilerplate.readthedocs.io/en/latest/setup_with_django/)
-2. [Setup With Flask](https://python-webpack-boilerplate.readthedocs.io/en/latest/setup_with_flask/)
-3. [Frontend Workflow](https://python-webpack-boilerplate.readthedocs.io/en/latest/frontend/)
+[Documentation](https://python-webpack-boilerplate.rtfd.io/)
 
 ## Raising funds
 

docs/CHANGELOG.md

@@ -0,0 +1 @@
+../CHANGELOG.md

docs/deployment.md

@@ -4,7 +4,7 @@
 
 On some platform such as Heroku, they have `buildpack` which can detect the project and deploy it automatically.
 
-1. Please use `run_npm_command_at_root` to make sure the `package.json` exists at the root directory. [Run NPM command at root directory](https://python-webpack-boilerplate.readthedocs.io/en/latest/run_npm_command_at_root/)
+1. Please use `run_npm_command_at_root` to make sure the `package.json` exists at the root directory. [Run NPM command at root directory](run_npm_command_at_root.md)
 1. Enable the `Javascript buildpack` on Heroku, so Heroku will detect `package.json` and run `npm run build` during the deployment. [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
 1. If you want to specify the version of `node`, `npm`, please check [https://devcenter.heroku.com/articles/nodejs-support#supported-runtimes](https://devcenter.heroku.com/articles/nodejs-support#supported-runtimes)
 

docs/frontend.md

@@ -14,48 +14,23 @@
 
 After creating frontend project from the template, you will have file structures like this.
 
-``` hl_lines="4 8 10 12"
+```
 frontend
 ├── package.json
 ├── src
 │   ├── application
-│   │   # webpack entry files here
-│   │   ├── app.js
-│   │   └── app2.js
 │   ├── components
-│   │   └── sidebar.js
 │   └── styles
-│       └── index.scss
 ├── vendors
 │   └── images
 │       ├── sample.jpg
 │       └── webpack.png
 ```
 
-1. We can add entry files to `application` . For example, `HomePage.js`, `BlogPage.js`
-1. Reusable components can be placed at `src/components`
+1. Components can be placed at `src/components`
 1. SCSS and CSS code can be put at `src/styles`
 1. Static assets such as images, fonts and other files can be put at `vendors`
 
-## Config files
-
-```
-├── .babelrc
-├── .browserslistrc
-├── .eslintrc
-├── .stylelintrc.json
-├── package.json
-├── postcss.config.js
-└── webpack
-    ├── webpack.common.js
-    ├── webpack.config.dev.js
-    ├── webpack.config.prod.js
-    └── webpack.config.watch.js
-```
-
-1. In the `frontend` directory, you can see above files, they are config files. (Some are dot files)
-1. `webpack` directory contains config files for webpack, you can customize it if you need.
-
 ## Compile
 
 !!! note
@@ -73,36 +48,19 @@ $ npm run watch
 
 You will see `build` directory is created under `frontend` directory
 
-```
-build
-├── css
-│   └── app.css
-├── js
-│   ├── app.js
-│   ├── app2.js
-│   ├── runtime.js
-│   └── vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js.js
-├── manifest.json
-└── vendors
-    └── images
-        ├── sample.jpg
-        └── webpack.png
-```
-
 1. `manifest.json` contains assets manifest info.
 1. We can get the dependency of the entrypoint through `manifest.json`
 1. So in templates, we can only import entrypoint without dependency files.
 
-For example, `{{ javascript_pack('app', 'app2', attrs='charset="UTF-8"') }}` would generate HTMl like this
+For example, `{{ javascript_pack('app', attrs='charset="UTF-8"') }}` would generate HTMl like this
 
 ```html
 <script type="text/javascript" src="/static/js/runtime.js" charset="UTF-8"></script>
 <script type="text/javascript" src="/static/js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js.js" charset="UTF-8"></script>
 <script type="text/javascript" src="/static/js/app.js" charset="UTF-8"></script>
-<script type="text/javascript" src="/static/js/app2.js" charset="UTF-8"></script>
 ```
 
-1. `app` and `app2` are entrypoints
+1. `app` is entrypoint file
 1. `/static/js/runtime.js` and `/static/js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js.js` are all dependency files.
 1. `javascript_pack` helps us import bundle files transparently
 

docs/index.md

@@ -1,50 +1,33 @@
 # Introduction
 
-## Usage
-
-After [creating frontend project from the template](frontend), you will have file structures like this.
-
-``` hl_lines="4 8 10 12"
-frontend
-├── package.json
-├── src
-│   ├── application
-│   │   # webpack entry files here
-│   │   ├── app.js
-│   │   └── app2.js
-│   ├── components
-│   │   └── sidebar.js
-│   └── styles
-│       └── index.scss
-├── vendors
-│   └── images
-│       ├── sample.jpg
-│       └── webpack.png
-```
-
-1. You can create entry file in `src/application` (This project would detect the entry files automatically so you do not need to config Webpack)
-1. Reusable components can be placed at `src/components`
-1. SCSS and CSS code can be put at `src/styles`
-1. Static assets such as images, fonts and other files can be put at `vendors`
-
-```bash
-$ cd frontend
-
-# install dependency packages
-$ npm install
-
-# build js, scss files
-$ npm run start
-```
-
-Now you can load bundle js and css files in template
-
-```html
-{% stylesheet_pack 'app' %}
-{% javascript_pack 'app' %}
-```
-
-!!! note
-    1. You can import **multiple entry files** using `stylesheet_pack` and `javascript_pack` (`{% javascript_pack 'app' 'app2'`)
-    1. The `javascript_pack` would also **import dependency files automatically to handle code splitting**
-    1. You can use `attrs` to set custom attributes, (`{% javascript_pack 'app' attrs='charset="UTF-8"' %}`)
+![](./images/readme-head.svg)
+
+## Setup
+
+1. [Setup with Django](setup_with_django.md)
+1. [Setup with Flask](setup_with_flask.md)
+
+## Style Solutions
+
+1. [Tailwind CSS](setup_with_tailwind.md)
+2. [Bootstrap](setup_with_bootstrap.md)
+
+## Features
+
+1. [Frontend Workflow](frontend.md)
+2. [Live Reload](live_reload.md)
+3. [Typescript](typescript.md)
+
+## Advanced
+
+1. [React](react.md)
+2. [Vue](vue.md)
+
+## Speed Up
+
+1. [ESBuild](esbuild.md)
+2. [SWC](swc.md)
+
+## Deployment
+
+1. [Deployment Notes](deployment.md)

docs/linting.md

@@ -0,0 +1,23 @@
+# Code Linting
+
+Code linting on the frontend can guarantee the code quality and make the code more readable. 
+
+We use `eslint` and `stylelint` to lint the code, and you can just use them out of the box.
+
+## ESLint
+
+ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It helps maintain code quality by enforcing coding standards and best practices. Some benefits of using ESLint include:
+
+- **Code Consistency:** ESLint ensures that all code in the project follows the same style and guidelines, making it easier for developers to collaborate.
+- **Error Prevention:** It helps catch common programming errors and potential bugs during development.
+- **Customizable Rules:** ESLint allows you to configure rules based on your project's specific requirements.
+- **Integration:** ESLint can be easily integrated into various build tools and IDEs.
+
+## Stylelint
+
+Stylelint is a linting tool for CSS and SCSS that helps maintain consistent coding styles and prevents errors in your stylesheets. Some benefits of using Stylelint include:
+
+- **Consistent Styles:** Stylelint enforces consistent coding styles across your stylesheets, ensuring a uniform look and feel.
+- **Error Detection:** It helps identify errors and potential issues in your CSS code.
+- **Customizable Configuration:** Stylelint allows you to configure rules and plugins to suit your project's needs.
+- **Integration:** Stylelint can be seamlessly integrated into your build process and editor.

docs/live_reload.md

@@ -2,10 +2,6 @@
 
 With `webpack-dev-server`, we can use it to auto reload web page when the code of the project changed.
 
-```
-npm install webpack-dev-server@4
-```
-
 Please edit `frontend/webpack/webpack.config.dev.js`
 
 ```js
@@ -27,8 +23,9 @@ devServer: {
 
 Notes:
 
-1. Remove `hot: true` from the `devServer` section
-1. Then you should config the `watchFiles`
+1. Add `watchFiles` to the `devServer` object.
 1. Here we tell `webpack-dev-server` to watch all `.py` and `.html` files under the `django_app` directory.
 
+Run Webpack dev server with `npm run start`
+
 Now if we change code in the editor, the web page will live reload, which is awesome!