Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/set up frontend #4

Merged
merged 2 commits into from
Dec 5, 2023
Merged

Feat/set up frontend #4

merged 2 commits into from
Dec 5, 2023

Conversation

katporks
Copy link
Collaborator

@katporks katporks commented Dec 3, 2023

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

@spwoodcock
Copy link
Member

spwoodcock commented Dec 5, 2023

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.

@katporks katporks marked this pull request as ready for review December 5, 2023 11:28
@katporks katporks merged commit 472795a into main Dec 5, 2023
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants