Django HTMX Tutorial Practice

Based off this tutorial

Set-up pre-commit

Pre-commit hooks are scripts that run on your local machine before every commit.

We use the pre-commit framework to run code linters and formatters that keep our codebase clean.

To set up Pre-Commit, install the Python package on your local machine using

python -m pip install pre-commit

If you'd rather not install pre-commit globally, create and activate a virtual environment in this repo before running the above command.

Then, run

pre-commit install

to set up the git hooks.

Since hooks are run locally, you can modify which scripts are run before each commit by modifying .pre-commit-config.yaml.

Developing

Development requires a local installation of Docker and Docker Compose.

Build application containers:

docker-compose build

Run the app:

docker-compose up

The app will be available at http://localhost:8000. The database will be exposed on port 32001.

Github Docker Images

You can build docker images and deploy them to github's container registry using a the github action "publish_docker.yml". By default, this action is set up to run when you ask it too manually. You may want to adjust this to run on commits, releases, or pushes to a deployment branch.

After creating an image on a public repo, you probably want to make the package public too. Go to the package settings and change the visibility of the image to public.

If you are on a private repo, you will need to set up authentication to install an image.

Ensuring browser compatibility

The default babel.config.json file will transpile JavaScript in your static directory to syntax that's friendly to modern and legacy browsers but it will not transpile third-party plug-ins by default.

Some plug-ins target Node versions above ES5, which means that they aren't compatible for older browsers. Luckily, we can tell Babel to transpile these dependencies to ensure our apps remain broadly compatible across browsers.

To identify problematic plug-ins, you can use the es6-sniffer CLI.

# Build the es6-sniffer image from GitHub
docker build -t es6-sniffer https://github.com/hancush/python-es6-sniffer.git

# Sniff out potentially incompatible modules
docker run -v htmx-tutorial_htmx-tutorial-node-modules:/node_modules --rm es6-sniffer

Once you've found the culprits, add them to the only array in babel.config.json. For example:

{
    "only": [
        "./htmx_tut/static", // Your JavaScript - default
        "./node_modules/problem_module_a",
        "./node_modules/problem_module_b"
    ],
    // The rest of your config
}

Running tests

Run tests with Docker Compose:

docker-compose -f docker-compose.yml -f tests/docker-compose.yml run --rm app