menu

Saleor Commerce

The world’s fastest growing open-source e-commerce platform with billions of dollars transacted. Powered by Python, GraphQL, ReactJS and PWA.

Channels
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Design
view-forward
# Development
view-forward
# Saleor 3.0
view-forward
# Saleor Features
view-forward
Team

Saleor install with frontend and dashboard

January 17, 2020 at 9:36pm

Saleor install with frontend and dashboard

January 17, 2020 at 9:36pm
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
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
like-fill
2
  • reply
  • like
Also, if you spot any errors or possible improvements, please let me know!
  • reply
  • like
thanks for that! Look forward to seeing the blog post when it's ready.
like-fill
2
  • reply
  • like
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
like-fill
1
  • reply
  • like

January 21, 2020 at 10:52pm
You rock Chad. Be sure to post a link to your blog.
like-fill
2
  • reply
  • like