Starting with saleor-storefront
Tags: saleor
Published: 2019-09-20 15:54:13

This is to document how I got started with [saleor-storefront](https://github.com/mirumee/saleor-storefront) 0.6.0. This is [saleor](https://github.com/mirumee/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](https://github.com/mirumee/saleor-storefront/issues/470) 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](https://docs.saleor.io/docs/getting-started/intro/).

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](https://github.com/mirumee/saleor-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.