search

okfde / fragdenstaat.de-ansible

Ansible Deployment for fragdenstaat.de
https://fragdenstaat.de
MIT License
13 stars 3 forks source link

build frontend files on deployment instead of commiting them to the repo #3

Closed jfilter closed 5 years ago

jfilter commented 6 years ago

Right now the build files for e.g. Javascript are added directly to Froide. To circumvent this, I guess one have to do the following in the ansible setup:

  1. install yarn
  2. add yarn install && yarn build somewhere in this file: https://github.com/okfde/fragdenstaat.de-ansible/blob/master/roles/web/tasks/setup_django_app.yml
stefanw commented 6 years ago

I'm a bit confused about what the best practice is. JS projects often ship with a dist or build dir, but I guess this more applies to libraries than apps. The main idea of shipping with build files is that deployment becomes easier (e.g. on Heroku).

Also note that froide also ships with build .mo gettext files. Building them on a provider like Heroku requires a more complicated setup.

I need to rethink the whole building of JS files anyway, as froide extensions now ship with their own builds which causes lots of duplication. Ideally there should be one build place. Let's talk about this in more detail soon.

jfilter commented 6 years ago

Usually, JS apps don't include their build files (it's like committing binaries) but there are also not hosted on Heroku. Building the files on deployment would also give 'froide extensions' the chance to remove/adapt 'froide core' code.

Dokku (and Heroku (legacy)) support Dockerfile-based deployments. A simple yarn install && yarn build shouldn't hurt anybody.

I'm with you with the i18n files.

This looks like a good package to integrate webpack to Django: https://github.com/owais/django-webpack-loader

stefanw commented 6 years ago

I tried some approaches today, but nothing really satisfying. Running yarn on deploy is not a problem, but combining the frontend files of froide apps efficiently is tricky.

jfilter commented 6 years ago

It's about the food stuff, right? Do you have to overwrite something? Or is it just about combining the files into one chunk? Do you need multiple entry points?

What happens when you pass an array to entry? Passing an array of file paths to the entry property creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".

https://webpack.js.org/concepts/entry-points/#src/components/Sidebar/Sidebar.jsx

stefanw commented 6 years ago

I need something like this:

fragdenstaat_de is the app, froide is a sort of library in this context (SCSS gets loaded and partly overwritten), froide-campaign and froide-food are also libraries that provide their own frontend files.

So far all libraries build their own stuff and ship it, Django picks it up in the right locations. I would like to keep the staticfiles support (Django also takes care of hash naming). But the question of a unified build process over all dependencies is more tricky I think. I think it's something we need to discuss in person (e.g. next Monday?).

jfilter commented 6 years ago

Yeah Monday, but thanks for sharing your concerns. With Webpack, everything it's possible. But that's also part of the problem. I also have to read up on it.

Collecting some links:

stefanw commented 5 years ago

Working now.