spwoodcock
commented
11 months ago Looks like a good setup to me 👍
Nice to have the flexibility of the NPM ecosystem for compiling and including extra frontend stuff, instead of using Python wrapper libraries like py-django-tailwind.
My only suggestion is to move the package.json and any of the frontend compile/build step into a separate dir, just to make it clearer that it's not the core of the project. It's mostly all Django with Jinja templating, but the NPM compiling stage is just to process the Tailwind CSS for use in the templates.
If we needed to integrate any shared Web Components, it should be an easy NPM install. I assume installed JS dist would then just be copied into the correct place for the Django static & then the Web Components could be used as standard HTML tags.
Note 1
The alternative to that is to just use a CDN for the Web Components (which we will probably end up doing at some point).
Note 2
We have two approaches possible:
- Use standard HTML tags but with the Tailwind CSS applied.
- Use the Web Components directly in places, with the CSS already embedded via Shadow DOM styling (not requiring the Tailwind compile step).
Realistically the website may include a mix of both.
As there website probably doesn't much reactivity, then we probably don't need the Web Components for the most part. Possibly the map component might be integrated somewhere. I imagine we would use standard HTML tags mostly with styling provided from the compiled Tailwind CSS.
This PR introduces several enhancements to our frontend development tooling and Docker build process. The goal of these changes is to improve the developer experience and ensure our Docker images are optimally prepared for production.
The changes are as follows:
Node.js and npm Configuration: We've configured Node.js and npm in our Dockerfile. This allows us to use npm to manage our JavaScript dependencies and run our PostCSS build process during the Docker image build.
Tailwind CSS: We've added Tailwind CSS to our project. Tailwind is a utility-first CSS framework that provides low-level utility classes to build custom designs. It allows us to create responsive designs with a mobile-first approach.
PostCSS Build: In the frontend-base stage of our Dockerfile, after running npm install, we now run npm run build. This command triggers the PostCSS build process, which processes our CSS files according to the configuration defined in our PostCSS config file. This ensures that our Docker images include the processed CSS files, ready for use in our application.
Django Browser Reload: We've added django_browser_reload to our development settings. This tool automatically reloads the browser whenever a change is made to the Django project during development, providing immediate feedback on changes.