Static site cannot be generated

[kbulte]

Current behavior

I am using vuestorefront version 1.12.0 with capybara theme. I am able to run the site via the dev script. However I wanted to generate vuestorefront as a static site so I can host it via a CDN. When I execute the following commands:

yarn build

yarn generate all

I get the following typescript errors:

Expected behavior

A folder with the name 'static' is generated and this folder contains the rendered index.html and product pages.

Steps to reproduce the issue

1. Clone Vuestorefront 1.12.0
2. Install the Capybara theme
3. build the project by executing yarn build
4. generate a static version by executing yarn generate all

Repository

https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/generate.ts

Environment details

VS code: 1.46.0
OS: macOS catalina 10.15.5
Node: 14.2.9
Yarn: 1.22.4
Typescript: 3.9.4
Vuestorefront: 1.12.0
Capybara theme: 1.0.1

[medteck]

This issue is being very critical for our project. We've been trying to fix it by ourselves (and make a PR) since last week but still no result.
Is there a due date for 1.12.3 ? That would help us figure out if we can wait for that version or not.
Thanks!

[gibkigonzo]

I've took a deeper look into this issue and imo it's not gonna be a quick fix. Code is a little bit outdated. Also I think we can do it much simpler and more extendable. Right now there are predefined queries which may look different for each project. So there is no way to add your custom routes.

My proposition for yarn generate:

• run normal express app - yarn start
• add listener for afterOutputRenderedResponse in server.ts to catch output and save it in file
• add custom generate.ts file in theme folder. In this file you will need to export function that has searchAdapter (to fetch data) and routes array (to have a list of routes that we want to render) as arguments. This function will need to return array of string which will be an array of urls that we need to render.

With this approach we will not need to manage separate rendering script (it will be same as server.ts) also we will be sure that it runs same as normal mode. Devs will also have more flexibility with defining what urls they want to render. We can also add info in docs how can may look example generate.ts in theme folder.
@Fifciu

[elvinristi]

Got exactly same error with yarn dev (theme based default-theme), but I don't think it's the case of VSF. It's like some hidden error which is not shown and therefor doesn't initialise during build some parts.

I had custom module which included src/modules/<module-name>/server.ts. When I removed the file then there was no error anymore.

After putting it back I debugged it to the line where was used getApiEndpointUrl() - have custom server-side proxy on POST (payment gateway callback).

After replacing this usage I got rid of this issue.

In my case>

- import getApiEndpointUrl from '@vue-storefront/core/helpers/getApiEndpointUrl';
...
...
-      const apiUrl = getApiEndpointUrl(configMakecommerce.endpoint.callbacks, callType);
+      const apiUrl = configMakecommerce.endpoint.callbacks[callType];

[davidwindell]

@medteck did you manage to find a solution for this? Thanks!

[davidwindell]

@gibkigonzo should this be elevated to P1? It means that no one can use static generation for VSF which seems like quite a big issue to me?

[medteck]

@medteck did you manage to find a solution for this? Thanks!

We didn't find any solution and ended up abandoning VSF because of this specific bug. As I said it was very critical for us.

[saraElsanan]

I have the same Problem ... Any solutions yet ?

[Fifciu]

VSF1 is not supporting static site generation anymore and is not going to. There is possibility to support it in the future of VSF2

[martijnvdbrug]

Hi @Fifciu!

Is there any update on this? I see VSF2 is out now, but I don't think SSG is supported yet.

With my company Pinelab I am building most of my storefronts as static sites using Vendure. I see there already is an integration available for Vendure.

We are currently maintaining our own Vue e-commerce components, but I'd rather contribute to Vue Storefront.
But, I really prefer SSG for most of our storefronts.

How much effort would it require to support SSG? Is it days, weeks, months? Maybe I can contribute.

[ymaheshwari1]

SSG

As VSF1 will only support security fixes, any new functionality will not be supported in VSF1, but if you want to use VSF2 then you can create an issue on VSF2, for the same.

[martijnvdbrug]

Oops... Will do, I only see now that this is the VSF1 repo!