Coder Social home page Coder Social logo

generator-vue-storefront's Issues

server side render error?

Describe the bug

Upon starting the generated app, and upon every browser refresh, the page redirects to /error. Routing inside of the app works, but not from the outside. Perhaps Webpack cannot connect to vue-api upon SSR (assuming there is SSR?)

To Reproduce

Steps to reproduce the behavior:

  1. Start the system with docker-compose up --build
  2. open browser at http://localhost:3000
  3. observe being redirected to error page http://localhost:3000/error
  4. Click on one of the categories in the footer
  5. access the category view, observe requests reach api
  6. refresh the page in browser
  7. observe being redirected to error page http://localhost:3000/error

Expected behavior

Upon browser page request, the view should be rendered without errors.

Logs

This happens upon page request:

elasticsearch | [2019-08-27T13:37:29,458][WARN ][o.e.c.r.a.DiskThresholdMonitor] [VerPbnU] high disk watermark [90%] exceeded on [VerPbnUjSTq6NgZOVq9HZg][VerPbnU][/usr/share/elasticsearch/data/nodes/0] free: 8.7gb[3.7%], shards will be relocated away from this node
app_1      | [GTM] Google Tag Manager extensions is not working. Ensure Google Tag Manager container ID is defined in config null
app_1      | [module] VS Modules registration finished. { succesfulyRegistered: '26 / 26',
app_1      |   registrationOrder:
app_1      |    [ { key: 'breadcrumbs', store: [Object] },
app_1      |      { key: 'cms',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'order',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'user',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration],
app_1      |        router: [Object] },
app_1      |      { key: 'checkout',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'catalog',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'cart',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'compare',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'review', store: [Object] },
app_1      |      { key: 'mailer', store: [Object] },
app_1      |      { key: 'wishlist', store: [Object] },
app_1      |      { key: 'newsletter', store: [Object] },
app_1      |      { key: 'notification', store: [Object] },
app_1      |      { key: 'ui', store: [Object] },
app_1      |      { key: 'recently-viewed',
app_1      |        store: [Object],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'homepage', store: [Object] },
app_1      |      { key: 'claims',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'promoted', store: [Object] },
app_1      |      { key: 'google-tag-manager',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'payment-backend-methods',
app_1      |        store: [Object],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'payment-cash-on-delivery',
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'raw-output-example', router: [Object] },
app_1      |      { key: 'amp-renderer', router: [Object], store: [Object] },
app_1      |      { key: 'instant-checkout' },
app_1      |      { key: 'url', store: [Object], router: [Object] },
app_1      |      { key: 'order-history' } ] }
app_1      | Calling asyncData in Home (theme) null
app_1      | Entity cache is enabled for productList null
app_1      | [search] Can not connect the vue-storefront-api / ElasticSearch instance! { FetchError: request to http://localhost:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=updated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc failed, reason: connect ECONNREFUSED 127.0.0.1:8080
app_1      |     at ClientRequest.<anonymous> (/var/www/node_modules/node-fetch/index.js:133:11)
app_1      |     at ClientRequest.emit (events.js:198:13)
app_1      |     at ClientRequest.EventEmitter.emit (domain.js:448:20)
app_1      |     at Socket.socketErrorListener (_http_client.js:392:9)
app_1      |     at Socket.emit (events.js:198:13)
app_1      |     at Socket.EventEmitter.emit (domain.js:448:20)
app_1      |     at emitErrorNT (internal/streams/destroy.js:91:8)
app_1      |     at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
app_1      |     at process._tickCallback (internal/process/next_tick.js:63:19)
app_1      |   name: 'FetchError',
app_1      |   message:
app_1      |    'request to http://localhost:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=updated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc failed, reason: connect ECONNREFUSED 127.0.0.1:8080',
app_1      |   type: 'system',
app_1      |   errno: 'ECONNREFUSED',
app_1      |   code: 'ECONNREFUSED' }
app_1      | Error during render : /
app_1      | Error: request to http://localhost:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=updated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc failed, reason: connect ECONNREFUSED 127.0.0.1:8080
app_1      |     at _commonErrorHandler (core/server-entry.ts:17:11)
app_1      |     at server-bundle.js:13282:41
app_1      |     at process._tickCallback (internal/process/next_tick.js:68:7)
app_1      | [GTM] Google Tag Manager extensions is not working. Ensure Google Tag Manager container ID is defined in config null
app_1      | [module] VS Modules registration finished. { succesfulyRegistered: '26 / 26',
app_1      |   registrationOrder:
app_1      |    [ { key: 'breadcrumbs', store: [Object] },
app_1      |      { key: 'cms',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'order',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'user',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration],
app_1      |        router: [Object] },
app_1      |      { key: 'checkout',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'catalog',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'cart',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'compare',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'review', store: [Object] },
app_1      |      { key: 'mailer', store: [Object] },
app_1      |      { key: 'wishlist', store: [Object] },
app_1      |      { key: 'newsletter', store: [Object] },
app_1      |      { key: 'notification', store: [Object] },
app_1      |      { key: 'ui', store: [Object] },
app_1      |      { key: 'recently-viewed',
app_1      |        store: [Object],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'homepage', store: [Object] },
app_1      |      { key: 'claims',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration] },
app_1      |      { key: 'promoted', store: [Object] },
app_1      |      { key: 'google-tag-manager',
app_1      |        store: [Object],
app_1      |        beforeRegistration: [Function: beforeRegistration],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'payment-backend-methods',
app_1      |        store: [Object],
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'payment-cash-on-delivery',
app_1      |        afterRegistration: [Function: afterRegistration] },
app_1      |      { key: 'raw-output-example', router: [Object] },
app_1      |      { key: 'amp-renderer', router: [Object], store: [Object] },
app_1      |      { key: 'instant-checkout' },
app_1      |      { key: 'url', store: [Object], router: [Object] },
app_1      |      { key: 'order-history' } ] }
app_1      | Calling asyncData for Error page Tue Aug 27 2019 13:37:33 GMT+0000 (Coordinated Universal Time) null
app_1      | whole request [/error]: 103ms
vue-api_1  | OPTIONS /api/cart/pull?token=&cartId=01154f2b303099545a8edf42dfc28125 204 0.124 ms - 0
vue-api_1  | GET /api/cart/pull?token=&cartId=01154f2b303099545a8edf42dfc28125 200 136.168 ms - 24
elasticsearch | [2019-08-27T13:37:59,654][WARN ][o.e.c.r.a.DiskThresholdMonitor] [VerPbnU] high disk watermark [90%] exceeded on [VerPbnUjSTq6NgZOVq9HZg][VerPbnU][/usr/share/elasticsearch/data/nodes/0] free: 8.7gb[3.7%], shards will be relocated away from this node

Create a Magento backend configuration

Is your feature request related to a problem? Please describe.
As it is right now, the generator produces the storefront and api with generic data retrieved from elasticsearch without using an eCommerce backend.

Pimcore is one of the frameworks supported by Divante through https://github.com/DivanteLtd/coreshop-vsbridge/ and the one we are more familiar with. We need to allow for a generated storefront app to connect to a pimcore instance out of the box.

Describe the solution you'd like
Using the previously referenced link as a guide, we'll modify the config generation scripts to apply the pimcore instance's endpoint to the relevant configuration sections. This application would be triggered by the existence of a PIMCORE_ENDPOINT env variable.

Create helm charts for easy deployment in kubernetes

Is your feature request related to a problem? Please describe.
Now the generator can produce ready version of both the vue-storefront and vue-storefront-api, we need for them to be easily deployable in a Kubernetes environment.

Describe the solution you'd like
Create helm charts that leverage the generator to allow for a Kubernetes deployment. The end result would be a fully accessible vue-storefront deployment with all dependencies loaded into the cluster.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.