DEV Community

alex
alex

Posted on • Updated on

Starting with saleor-storefront

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'
Enter fullscreen mode Exit fullscreen mode

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"
    })
Enter fullscreen mode Exit fullscreen mode

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": "",
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (7)

Collapse
marquez138 profile image
mmarquez • Edited on

Hi Alex any luck on you getting the product description to work? Thanks again for your post

Collapse
alexalexyang profile image
alex Author

Nope. I ran into a lot of other issues, couldn't get answers to them, and finally decided to build my own solution since it's for a small-ish project anyway.

Collapse
marquez138 profile image
mmarquez

Any plans to write about your own solution? Im looking for my more options to run a small ecommerce project myself but not having much luck

Thread Thread
alexalexyang profile image
alex Author

I'd love to but i doubt it. I tried that with django-oscar once but couldn't manage. Writing requires a lot of spare time.

I don't know if it helps but I'm building my own little solution. The git repo is here.

Although you can run through almost the whole purchase experience right down to transactions, it is still more of a sketch and a couple of last important features are missing. I also have to write up the docs properly. But if you can read the code feel free to fork it.

Not sure how long I'll maintain this one. I did this just for a couple of small projects and as an exercise.

Thread Thread
marquez138 profile image
mmarquez

I completely understand and thanks again for sharing the repo, ill definitively have to check it out

Collapse
darris profile image
Darris

Hey Alex. Did you bump into any CORS issue that says abt Access-Control-Allow-Origin?

Collapse
alexalexyang profile image
alex Author

No, I didn't. I'm aware a bunch of other people did though. I think it should be resolved by setting API_URI. But if other people have done that and still faced the same issue then maybe it's not that simple. I don't know for sure.