Saleor: Problem to customize css js with docker

[dmodules]

What I'm trying to achieve

…
I'm trying to customize css and js files in Saleor. I installed Saleor with Docker. I can run it but I'm not enabled to change any scss file. Here what I tried:

• First I see on documentation that we need to run npm start to build assets. So I tried docker-compose run --rm web npm start but it is not installed in container? Then I tried outside container so I just did npm start...it start webpack watching and I can change file like frontend.scss and I see my change in frontend.js file but in the file specified by django-webpack in my html wich is /static/assets/storefront.f43e6baedb400d8a1422.js my changes are not there and it is not also in /static/assets/storefront.f43e6baedb400d8a1422.css.

Well probably there is something I miss. Hope someone can help me with this problem.

[martcot]

I created issue with company github account by mistake.

[michaljelonek]

We do not mount build-time assets on the container. Why? Because by default when you clone our repository, you do not have them. They're built by Docker when you first run it and the final image does not need npm thus it's not there. So if we mounted those directories it would override the ones we built in Docker and you wouldn't have any static files on the Docker if you didn't do it yourself first.

I know this is an inconvenience, but until the structure of the project is not changed, then this is the only way we can do this easily, without forcing everyone to build assets by themselves.

If you wish to have assets mounted then look in docker-compose.override.yml web service:

• you have to remove this volume: - /app/saleor/static/assets
• you have to add this volume: - ./webpack-bundle.json:/app/webpack-bundle.json

Then you can normally build assets on your local machine using npm and all the changes _should_ be reflected on the docker.

[Owanesh]

hi @michaljelonek , could you help me? I've followed your hint, but nothing

I have

services:
  web:
    [ ... 
        default configuration
     ... ]
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - ./saleor/:/app/saleor:Z
      - ./templates/:/app/templates:Z
      - ./webpack-bundle.json:/app/webpack-bundle.json
      - saleor-media:/app/media

configuration in docker-compose.yml but while npm start recognize changes on my scss, docker doesn't show up.

i've also tryied

    volumes:
      - ./:/app/

but it doesn't work yet

[michaljelonek]

@Owanesh your configuration looks good to me. Perhaps rebuilding the docker-compose from scratch, if you didn't try that, would help or you could try to verify if the directories are properly mounted by sshing into the container and trying to edit the files there and see whether you get the changes reflected on your host machine.

Also make sure you edit the docker-compose.override.yml file, as I'm fairly certain it will override your changes if you edit docker-compose.yml. If you don't want to use the override then use -f flag to specify which configuration to use (i.e. docker-compose -f docker-compose.yml <command> won't use the override configuration anymore).

[dedhio]

@michaljelonek Your suggestion worked perfectly for me.

[NyanKiyoshi]

It seems like the questions were answered. If anybody wants to contribute to the documentation to make it easier to work with docker, feel free to open a PR!