Replace webpack by Vite

Upgrade to Node 20, EsLint 9, Tailwind 3, use ES Modules, remove Stylelint
liip · Oct 24, 2024 · 01e0ae6 · 01e0ae6
1 parent c1a3258
commit 01e0ae6
Show file tree

Hide file tree

Showing 20 changed files with 5,095 additions and 24,445 deletions.
diff --git a/{{cookiecutter.project_slug}}/.eslintrc.js b/{{cookiecutter.project_slug}}/.eslintrc.js
diff --git a/{{cookiecutter.project_slug}}/README.md b/{{cookiecutter.project_slug}}/README.md
@@ -1,5 +1,5 @@
-{{ cookiecutter.project_name }}
-=======
+# {{ cookiecutter.project_name }}
+
 {% if cookiecutter.virtualization_tool == 'docker' %}
 
 ### Build
@@ -12,7 +12,7 @@ npm run build
 
 ### Formatting and Linting
 
-It’s recommended to have Prettier, EsLint and Stylelint enabled in your Editor.
+It’s recommended to have Prettier and EsLint enabled in your Editor.
 
 You can manually check that the code matches with the guidelines by running:
 
@@ -41,8 +41,8 @@ you want to reset the database.
 ## Automated tests
 
 To run backend tests and lint checks, run `scripts/run_tests.sh` in the `backend` container:
-* `docker-compose exec backend scripts/run_tests.sh`
-* or `docker-compose run --rm backend scripts/run_tests.sh` if the `backend` service is not already running
+- `docker-compose exec backend scripts/run_tests.sh`
+- or `docker-compose run --rm backend scripts/run_tests.sh` if the `backend` service is not already running
 
 CLI arguments are forwarded to `pytest`.
 For example, running tests with `scripts/run_tests.sh {{ cookiecutter.project_slug }} --reuse-db` avoids

diff --git a/{{cookiecutter.project_slug}}/assets/css/common.css b/{{cookiecutter.project_slug}}/assets/css/common.css
@@ -1,5 +1,5 @@
-/*----------------------------------------*\
-  Main stylesheet
-\*----------------------------------------*/
+@import 'tailwindcss/base';
 
-/* Here goes your project styles */
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';
diff --git a/{{cookiecutter.project_slug}}/assets/css/tailwind.css b/{{cookiecutter.project_slug}}/assets/css/tailwind.css
diff --git a/{{cookiecutter.project_slug}}/assets/js/common.js b/{{cookiecutter.project_slug}}/assets/js/common.js
@@ -1,11 +1 @@
-/*----------------------------------------*\
-  Main entry point
-\*----------------------------------------*/
-
-// Style
-import '@/css/tailwind.css';
-import '@/css/common.css';
-
-// Load all icons to be included in the sprite
-// Uncomment line below once you include your first icon SVG
-// require.context('../icons');
+import '../css/common.css';
diff --git a/{{cookiecutter.project_slug}}/babel.config.js b/{{cookiecutter.project_slug}}/babel.config.js
diff --git a/{{cookiecutter.project_slug}}/docker-compose.override.example.yml b/{{cookiecutter.project_slug}}/docker-compose.override.example.yml
@@ -47,6 +47,9 @@
 #     environment:
 #       <<: *x-environment
 #       SSH_AUTH_SOCK: /run/host-services/ssh-auth.sock
+#       DJANGO_VITE_DEV_SERVER_PROTOCOL: 'https'
+#       DJANGO_VITE_DEV_SERVER_HOST: '{{ subdomain }}.docker.test'
+#       DJANGO_VITE_DEV_SERVER_PORT: ''
 #
 #     ## To forward SSH agent to the container, read https://wiki.liip.ch/x/FyDVJw
 #     ## and uncomment one of the following volumes:
@@ -66,12 +69,6 @@
 #       - pontsun
 #     labels:
 #       - 'traefik.enable=true'
-#       # traefik v1
-#       - 'traefik.docker.network=pontsun'
-#       - 'traefik.backend={{ cookiecutter.project_slug }}'
-#       - 'traefik.port=3000'
-#       - 'traefik.frontend.rule=Host:{{ subdomain }}.docker.test'
-#       # traefik v2
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_frontend.entrypoints=http,https'
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_frontend.middlewares=https_redirect@file'
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_frontend.rule=Host(`{{ subdomain }}.docker.test`)'
@@ -87,12 +84,6 @@
 #       - pontsun
 #     labels:
 #       - 'traefik.enable=true'
-#       # traefik v1
-#       - 'traefik.docker.network=pontsun'
-#       - 'traefik.backend={{ cookiecutter.project_slug }}_mail'
-#       - 'traefik.port=8025'
-#       - 'traefik.frontend.rule=Host:{{ subdomain }}-mail.docker.test'
-#       # traefik v2
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_mailhog.entrypoints=http,https'
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_mailhog.middlewares=https_redirect@file'
 #       - 'traefik.http.routers.{{ cookiecutter.project_slug }}_mailhog.rule=Host(`{{ subdomain }}-mail.docker.test`)'

diff --git a/{{cookiecutter.project_slug}}/eslint.config.js b/{{cookiecutter.project_slug}}/eslint.config.js
@@ -0,0 +1,4 @@
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import eslintPluginLiipLausanne from '@liip-lausanne/eslint-config';
+
+export default [eslintPluginLiipLausanne, eslintPluginPrettierRecommended];