Saleor is looking really nice however I am a bit confused as to the best work-flow to setup and configure the main backend and the pwa frontend + dashboard.

Is it a matter of forking each repo and then running them separately? Is there any info on configuring the backend and theming the frontend? I can't really see it in the docs. Any tips on using a CMS with the pwa frontend?

I guess the project is mean't to be modular with a separation of concerns, but it would kind of be nice if it were all in a single repo that you could checkout and just run docker-compose up to have the whole thing up!

January 17, 2020 at 9:47pm

Chad Cassady@chad-cassady

9:47pm

I just wrote a blog post about this, but it's not yet published. That's slated to happen within a few weeks. In the meantime, here's how to modify the Docker Compose files to get up-and-running quickly.

docker-compose.yml:

diff --git a/docker-compose.yml b/docker-compose.yml
index 53f6bab60..cbde4c07e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '2'
+version: '2.3'
 services:
   web:
@@ -48,6 +48,24 @@ services:
     depends_on:
       - redis
+  storefront:
+    restart: unless-stopped
+    build:
+      context: https://github.com/mirumee/saleor-storefront.git
+      dockerfile: ./Dockerfile
+      target: builder
+    depends_on:
+      - web
+
+  dashboard:
+    restart: unless-stopped
+    build:
+      context: https://github.com/mirumee/saleor-dashboard.git
+      dockerfile: ./Dockerfile
+      target: builder
+    depends_on:
+      - web
+
 volumes:
   saleor-db:
     driver: local

docker-compose.override.yml:

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index f0df7f4c5..3049fb8a2 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -1,4 +1,4 @@
-version: '2'
+version: '2.3'
 services:
   web:
@@ -15,6 +15,16 @@ services:
       # shared volume between celery and web for media
       - saleor-media:/app/media
+  dashboard:
+    ports:
+      - 9000:9000
+    command: /app/node_modules/.bin/webpack-dev-server --host 0.0.0.0 --port 9000
+
+  storefront:
+    ports:
+      - 3000:3000
+    command: /app/node_modules/.bin/webpack-dev-server --host 0.0.0.0 --port 3000
+
   db:
     ports:
       - 5432:5432

In the post go more into how and why everything works, and how to move from this to active development on repositories you control by either specifying tags/branches/revisions in the Docker files, or by using git submodules. You can probably extrapolate from here -- feel free to reach out if you have any questions!

Edited

9:50pm

Also, if you spot any errors or possible improvements, please let me know!

Dan Atkinson@tailsdog

9:50pm

@chad-cassady

thanks for that! Look forward to seeing the blog post when it's ready.

Chad Cassady@chad-cassady

10:39pm

I just noticed that it was silly to use the Webpack dev server and target the builder stage when I could just bind ports 3000 and 9000 on the host to port 80 on the storefront and dashboard respectively. This eliminates the need to use version 2.3 of the Docker Compose file format, and it's faster at runtime (the Webpack dev server seems to want to ponder for a few minutes before it's ready after you run docker-compose up).

But you might want to use the prior version for development after all. There's also an open question in my mind about how to use volumes on the PWA containers for hot reloading. I hit a word count and kinda had to wrap things up. Anyway, here's the version that uses the included nginx configs for the storefront and dashboard containers:

docker-compose.yml:

diff --git a/docker-compose.yml b/docker-compose.yml
index 53f6bab60..e57b951dd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -48,6 +48,22 @@ services:
     depends_on:
       - redis
+  storefront:
+    restart: unless-stopped
+    build:
+      context: https://github.com/mirumee/saleor-storefront.git
+      dockerfile: ./Dockerfile
+    depends_on:
+      - web
+
+  dashboard:
+    restart: unless-stopped
+    build:
+      context: https://github.com/mirumee/saleor-dashboard.git
+      dockerfile: ./Dockerfile
+    depends_on:
+      - web
+
 volumes:
   saleor-db:
     driver: local

docker-compose.override.yml:

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index f0df7f4c5..419eaacf8 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -15,6 +15,14 @@ services:
       # shared volume between celery and web for media
       - saleor-media:/app/media
+  dashboard:
+    ports:
+      - 9000:80
+
+  storefront:
+    ports:
+      - 3000:80
+
   db:
     ports:
       - 5432:5432

Edited

January 21, 2020 at 10:52pm

jyoost@jyoost

10:52pm

You rock Chad. Be sure to post a link to your blog.