This is to document how I got started with saleor-storefront 0.6.0. This is saleor 0.0.0's front end made with React.

In this small walkthrough, I talk about a bunch of gotchas I encountered while trying to deploy them both. I hope this makes getting started with saleor a wee bit easier.

Most of the material online suggests that the writers are running both storefront and saleor on the same machine. I could not get this to work due to a few issues, including that the storefront won't run as described here by AbdulWaheedPasha.

Before AbdulWaheedPasha let me know about this issue, I thought it was because my many projects were putting too much strain on my Ubuntu instance. So, I decided to lighten the load a little bit and deploy the storefront to Netlify instead.

I start from the point just after we've cloned the saleor repo into our Ubuntu machine, and we've either forked or pushed the saleor-storefront to our own Git repo.

However, before deploying to Netlify, we have to set ALLOWED_HOSTS properly. This is done on the saleor site of things.

Set ALLOWED_HOSTS to *

I want to deploy saleor to https://example.com on my Ubuntu instance and saleor-storefront to https://storefront.example.com on Netlify.

In this case, because I run saleor by executing docker-compose up (sometimes with -d), I decided to add ENV ALLOWED_HOSTS 'storefront.example.com' to saleor/Dockerfile:

EXPOSE 8000
ENV PORT 8000
ENV PYTHONUNBUFFERED 1
ENV PROCESSES 4
ENV ALLOWED_HOSTS 'storefront.example.com'

This did not work. Storefront kept returning "Invalid host header" or otherwise just a blank page sometimes. So, I tried ENV ALLOWED_HOSTS 'https://storefront.example.com' instead. Did not work.

Most solutions online say to set it to *, which I felt might be a bit of a security issue because it would allow anyone to take data from the saleor back end. I went with it anyway, seeing how I couldn't solve the problem with a specific URL. It now looks like this: ENV ALLOWED_HOSTS '*'.

Before we go on, remember to run commands like npm run build-assets and npm run build-emails in accordance with the docs.

You should also run python3 manage.py migrate and python3 manage.py createsuperuser to make an admin for your site. If you also chose to use docker-compose up like I did, you can enter the saleor container with docker exec -it saleor_web_1 bash. Then run the migrate and createsuperuser commands.

Next, we turn to the saleor-storefront side of things.

Deploying saleor-storefront to Netlify

This should be pretty straightforward, I think. Follow Netlify's instructions to deploy repos. I will focus on storefront-specific things here.

Your deployment settings are in site settings > build and deploy. They should look like this:

Build command: npm run-script build
Publish directory: dist

It should build successfully, but the site will encounter a couple of problems, discussed below.

Make sure BACKEND_URL is properly set

Update 7 Oct 2019: This has been changed to API_URI.

The storefront prerequisites says: "To run the storefront, you have to set the BACKEND_URL environment to point to the Saleor instance. If you are running Saleor locally with the default settings, set BACKEND_URL to: http://localhost:8000/."

This was not straightforward. Let's recap before continuing: I've deployed saleor to https://example.com on my Ubuntu instance and storefront to https://storefront.example.com on Netlify.

To set the BACKEND_URL, I ran export BACKEND_URL=https://example.com.

Howevever, it returned 404. Looking into console, I found the requested URL to be: https://storefront.example.comhttps://example.com/graphql/

Somehow, it was concatenating the storefront URL to the saleor back end URL.

I thought maybe I had to delete the storefront URL from the graphql query code. Since it's graphql, I thought I had to set the URL in saleor-storefront/apollo.config.js. This was wrong.

After many tries I eventually figured out that I had to open up saleor-storefront/config/webpack/config.base.js and find this section:

new webpack.EnvironmentPlugin({
      "BACKEND_URL": "http://localhost:8000/",
      "SERVICE_WORKER_TIMEOUT": "60000"
    })

I then thought I could simple unset the BACKEND_URL environmental variable and place the correct URL in here. This only reproduced the problem.

The solution is to set the BACKEND_URL environmental variable and completely delete the URL in config.base.js so it's empty:

"BACKEND_URL": "",

Finally, it worked.

Products page won't load, then 404

Once the site was sort of properly up, I tried accessing a product I'd made in the admin dashboard earlier. The page would not load due to a TypeError. Something about price being undefined.

After reloading the page a couple of times, it returned 404 and remained that way.

I tried a whole slew of things I don't remember anymore and finally decided to start from scratch. I ran docker-compose down on the saleor back end, deleted the saleor_web_1 container and saleor_web image that are for the saleor Django back end. I left the redis and celery containers and images alone. I then ran docker-compose up again.

Now it works. But... it loads without the product description.

And, this is where I am right now.

I hope to write as I go along solving issues. Please let me know if you can help with on-going problems.