Saleor install with frontend and dashboard
January 17, 2020 at 9:36pmSaleor install with frontend and dashboard
January 17, 2020 at 9:36pmSaleor 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.ymlindex 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.ymlindex 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!
Also, if you spot any errors or possible improvements, please let me know!
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.ymlindex 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.ymlindex 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
January 21, 2020 at 10:52pm