Simpler Webpack 5 config

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   root: true,
   extends: ['vinta/recommended'],
   rules: {
-    "default-param-last": "off",
+    "default-param-last": "off",  // due to initialState in Redux
     "@babel/camelcase": "off"
   },
   env: {
@@ -15,7 +15,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       webpack: {
-        config: path.join(__dirname, '/webpack.local.config.js'),
+        config: path.join(__dirname, '/webpack.config.js'),
         'config-index': 1
       }
     },

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: deploy
 on:
   workflow_run:
     workflows: ["main"]
-    branches: [master]
+    branches: [main]
     types:
       - completed
 
@@ -18,7 +18,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
         with:
-          ref: master
+          ref: main
       - run: mkdir -p github/workflows
       - run: mv proj_main.yml github/workflows/main.yml
       - run: git checkout -b boilerplate-release

.github/workflows/nightly.yml

@@ -11,5 +11,5 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
         with:
-          ref: master
+          ref: main
       - uses: ./.github/workflows/shared-build

.github/workflows/shared-build/action.yml

@@ -46,7 +46,7 @@ runs:
       run: pip install "django>=4,<5"
       shell: bash
     - name: Setup testproject
-      run: django-admin startproject testproject --extension py,json,yml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=.
+      run: django-admin startproject testproject --extension py,json,yml,yaml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=.
       shell: bash
     - run: |
         npm update --save
@@ -99,16 +99,10 @@ runs:
       run: echo '::set-output name=SECRET_KEY::`python -c "import uuid; print(uuid.uuid4().hex + uuid.uuid4().hex)"`'
       id: secret-id-generator
       shell: bash
-    - run: poetry run ruff check ./backend/
-      working-directory: testproject
-      env:
-        SECRET_KEY: ${{ steps.secret-id-generator.outputs.SECRET_KEY }}
-        SENDGRID_USERNAME: foo
-        SENDGRID_PASSWORD: password
-        DJANGO_SETTINGS_MODULE: 'testproject.settings.local'
-        ALLOWED_HOSTS: '.example.org'
-        REDIS_URL: 'redis://'
-        DATABASE_URL: 'sqlite:///'
+    - run: rm .gitignore  # prevents conflict with ruff
+      shell: bash
+    - run: poetry run ruff check .
+      working-directory: testproject/backend
       shell: bash
     - run: poetry run python manage.py makemigrations --check --dry-run
       working-directory: testproject/backend

.pre-commit-config.yaml

@@ -1,47 +1,47 @@
 fail_fast: true
 repos:
-- repo: https://github.com/pre-commit/pre-commit-hooks
-  rev: v4.4.0
-  hooks:
-    - id: check-added-large-files
-      args: ['--maxkb=500']
-      exclude: >
-            (?x)^(
-                package-lock\.json
-            )$
-    - id: fix-byte-order-marker
-    - id: check-case-conflict
-    - id: check-merge-conflict
-    - id: check-symlinks
-    - id: debug-statements
-    - id: detect-private-key
-- repo: https://github.com/astral-sh/ruff-pre-commit
-  # Ruff version.
-  rev: v0.1.6
-  hooks:
-    # Run the linter.
-    - id: ruff
-      args: [ --fix ]
-    # Run the formatter.
-    - id: ruff-format
-- repo: local
-  hooks:
-  - id: eslint
-    name: eslint-local
-    entry: npm run lint
-    language: system
-    types: [javascript]
-    exclude: >
-            (?x)^(
-                .+\.config\.js|
-                server\.js|
-                \.eslintrc\.js
-            )$
-    pass_filenames: true
-  - id: missing-migrations
-    name: missing-migrations-local
-    entry: poetry run python backend/manage.py makemigrations --check
-    language: system
-    # Only run missing migration check if migration-generating files have changed:
-    files: (.*/?(settings|migrations|models)/.+|.+models\.py|.+constants\.py|.+choices\.py|.+pyproject\.toml)
-    pass_filenames: false
+    - repo: https://github.com/pre-commit/pre-commit-hooks
+      rev: v4.4.0
+      hooks:
+          - id: check-added-large-files
+            args: ["--maxkb=500"]
+            exclude: >
+                (?x)^(
+                    package-lock\.json
+                )$
+          - id: fix-byte-order-marker
+          - id: check-case-conflict
+          - id: check-merge-conflict
+          - id: check-symlinks
+          - id: debug-statements
+          - id: detect-private-key
+    - repo: https://github.com/astral-sh/ruff-pre-commit
+      # Ruff version.
+      rev: v0.1.6
+      hooks:
+          # Run the linter.
+          - id: ruff
+            args: [--fix]
+          # Run the formatter.
+          - id: ruff-format
+    - repo: local
+      hooks:
+          - id: eslint
+            name: eslint-local
+            entry: npm run lint
+            language: system
+            types: [javascript]
+            exclude: >
+                (?x)^(
+                  .+\.config\.js|
+                  .+\.setup\.js|
+                  \.eslintrc\.js
+                )$
+            pass_filenames: true
+          - id: missing-migrations
+            name: missing-migrations-local
+            entry: poetry run python backend/manage.py makemigrations --check
+            language: system
+            # Only run missing migration check if migration-generating files have changed:
+            files: (.*/?(settings|migrations|models)/.+|.+models\.py|.+constants\.py|.+choices\.py|.+pyproject\.toml)
+            pass_filenames: false

CONTRIBUTING.md

@@ -15,7 +15,7 @@ If you made changes to this boilerplate and want to test them, do as follows:
 - Run `git archive -o boilerplate.zip HEAD` to create the template zip file
 - Run the following:
   ```bash
-  cd .. && django-admin startproject theprojectname --extension py,json,yml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=django-react-boilerplate/boilerplate.zip
+  cd .. && django-admin startproject theprojectname --extension py,json,yml,yaml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=django-react-boilerplate/boilerplate.zip
   ```
 - A new folder called `theprojectname` will be created and now you can test your changes
 - Make sure that the project is still running fine with and without docker

README.md

@@ -68,11 +68,11 @@ Send us an email at [email protected] telling us a bit more about how ou
 - [ ] Open the command line and go to the directory you want to start your project in.
 - [ ] Start your project using:
     ```
-    django-admin startproject {{project_name}} --extension py,json,yml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
+    django-admin startproject {{project_name}} --extension py,json,yml,yaml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
     ```
     Alternatively, you may start the project in the current directory by placing a `.` right after the project name, using the following command:
     ```
-    django-admin startproject {{project_name}} . --extension py,json,yml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
+    django-admin startproject {{project_name}} . --extension py,json,yml,yaml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
     ```
 In the next steps, always remember to replace {{project_name}} with your project's name (in case it isn't yet):
 - [ ] Above: don't forget the `--extension` and `--name` params!
@@ -88,14 +88,14 @@ After completing ALL of the above, remove this `Project bootstrap` section from
 - Setup [editorconfig](http://editorconfig.org/), [ruff](https://github.com/astral-sh/ruff) and [ESLint](http://eslint.org/) in the text editor you will use to develop.
 
 ### Setup
-- Inside the `backend` folder, do the following:
-  - Create a copy of `{{project_name}}/settings/local.py.example`:  
-  `cp {{project_name}}/settings/local.py.example {{project_name}}/settings/local.py`
-  - Create a copy of `.env.example`:
-  `cp .env.example .env`
+- Do the following:
+  - Create a git-untracked `local.py` settings file:
+  `cp backend/{{project_name}}/settings/local.py.example backend/{{project_name}}/settings/local.py`
+  - Create a git-untracked `.env.example` file:
+  `cp backend/.env.example backend/.env`
 
 ### If you are using Docker:
-- Open the `/backend/.env` file on a text editor and uncomment the line `DATABASE_URL=postgres://{{project_name}}:password@db:5432/{{project_name}}`
+- Open the `backend/.env` file on a text editor and uncomment the line `DATABASE_URL=postgres://{{project_name}}:password@db:5432/{{project_name}}`
 - Open a new command line window and go to the project's directory
 - Run the initial setup:
   `make docker_setup`
@@ -131,7 +131,7 @@ After completing ALL of the above, remove this `Project bootstrap` section from
   - This is used to serve the frontend assets to be consumed by [django-webpack-loader](https://github.com/django-webpack/django-webpack-loader) and not to run the React application as usual, so don't worry if you try to check what's running on port 3000 and see an error on your browser
 
 #### Setup the backend app
-- Open the `/backend/.env` file on a text editor and do one of the following:
+- Open the `backend/.env` file on a text editor and do one of the following:
   - If you wish to use SQLite locally, uncomment the line `DATABASE_URL=sqlite:///backend/db.sqlite3`
   - If you wish to use PostgreSQL locally, uncomment and edit the line `DATABASE_URL=postgres://{{project_name}}:password@db:5432/{{project_name}}` in order to make it correctly point to your database URL
     - The url format is the following: `postgres://USER:PASSWORD@HOST:PORT/NAME`
@@ -247,14 +247,17 @@ After enabling dyno metadata and setting the environment variables, your next Re
 ## Opinionated Settings
 Some settings defaults were decided based on Vinta's experiences. Here's the rationale behind them:
 
+### `DATABASES["default"]["ATOMIC_REQUESTS"] = True`
+Using atomic requests in production prevents several database consistency issues. Check [Django docs for more details](https://docs.djangoproject.com/en/4.2/topics/db/transactions/#tying-transactions-to-http-requests).
+
 ### `CELERY_ACKS_LATE = True`
 We believe Celery tasks should be idempotent. So for us it's safe to set `CELERY_ACKS_LATE = True` to ensure tasks will be re-queued after a worker failure. Check Celery docs on ["Should I use retry or acks_late?"](https://docs.celeryq.dev/en/stable/faq.html#faq-acks-late-vs-retry) for more info.
 
 ## Contributing
 
 If you wish to contribute to this project, please first discuss the change you wish to make via an [issue](https://github.com/vintasoftware/django-react-boilerplate/issues).
 
-Check our [contributing guide](https://github.com/vintasoftware/django-react-boilerplate/blob/master/CONTRIBUTING.md) to learn more about our development process and how you can test your changes to the boilerplate.
+Check our [contributing guide](https://github.com/vintasoftware/django-react-boilerplate/blob/main/CONTRIBUTING.md) to learn more about our development process and how you can test your changes to the boilerplate.
 
 ## Commercial Support
 [![alt text](https://avatars2.githubusercontent.com/u/5529080?s=80&v=4 "Vinta Logo")](https://www.vinta.com.br/)

babel.config.json

@@ -0,0 +1,14 @@
+{
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "useBuiltIns": "entry",
+          "corejs": "3.22"
+        }
+      ],
+      ["@babel/preset-react", {
+        "runtime": "automatic"
+      }]
+    ]
+  }

backend/common/views.py

@@ -1,9 +1,9 @@
 from django.views import generic
 
-from rest_framework import viewsets, status
+from rest_framework import status, viewsets
 from rest_framework.decorators import action
-from rest_framework.response import Response
 from rest_framework.permissions import AllowAny
+from rest_framework.response import Response
 
 
 class IndexView(generic.TemplateView):

backend/project_name/settings/base.py

@@ -128,7 +128,7 @@ def base_dir_join(*args):
         "CACHE": False,  # on DEBUG should be False
         "STATS_FILE": base_dir_join("../webpack-stats.json"),
         "POLL_INTERVAL": 0.1,
-        "IGNORE": [".+\.hot-update.js", ".+\.map"],
+        "IGNORE": [r".+\.hot-update.js", r".+\.map"],
     }
 }
 

frontend/js/App.js

@@ -1,9 +1,9 @@
 import * as Sentry from "@sentry/react";
-import React from 'react';
-import { Provider } from 'react-redux';
+import React from "react";
+import { Provider } from "react-redux";
 
-import Home from './pages/Home';
-import configureStore from './store';
+import Home from "./pages/Home";
+import configureStore from "./store";
 
 const store = configureStore({});
 const App = () => (

frontend/js/index.js

@@ -1,16 +1,16 @@
 // import pages
-import * as Sentry from '@sentry/browser';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as Sentry from "@sentry/browser";
+import React from "react";
+import { createRoot } from "react-dom/client";
 
-import '../sass/style.scss';
+import "../sass/style.scss";
 
-import App from './App';
+import App from "./App";
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
   release: window.COMMIT_SHA,
 });
 
-const root = createRoot(document.getElementById('react-app'));
+const root = createRoot(document.getElementById("react-app"));
 root.render(<App />);

frontend/js/pages/Home.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import Button from 'react-bootstrap/Button';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useState, useEffect } from "react";
+import Button from "react-bootstrap/Button";
+import { useDispatch, useSelector } from "react-redux";
 
-import DjangoImgSrc from '../../assets/images/django-logo-negative.png';
-import { fetchRestCheck } from '../store/rest_check';
+import DjangoImgSrc from "../../assets/images/django-logo-negative.png";
+import { fetchRestCheck } from "../store/rest_check";
 
 const Home = () => {
   const dispatch = useDispatch();
@@ -19,20 +19,21 @@ const Home = () => {
     <>
       <h2>Static assets</h2>
       <div id="django-background">
-        If you are seeing the green Django logo on a white background and this text color is
-        #092e20, frontend static files serving is working:
+        If you are seeing the green Django logo on a white background and this
+        text color is #092e20, frontend static files serving is working:
       </div>
       <div id="django-logo-wrapper">
         <div>
-          Below this text, you should see an img tag with the white Django logo on a green
-          background:
+          Below this text, you should see an img tag with the white Django logo
+          on a green background:
         </div>
         <img alt="Django Negative Logo" src={DjangoImgSrc} />
       </div>
       <h2>Rest API</h2>
       <p>{restCheck?.data?.payload?.result}</p>
       <Button variant="outline-dark" onClick={() => setShowBugComponent(true)}>
-        Click to test if Sentry is capturing frontend errors! (Should only work in Production)
+        Click to test if Sentry is capturing frontend errors! (Should only work
+        in Production)
       </Button>
       {showBugComponent && showBugComponent.field.notexist}
     </>