Alokai•13mo ago

Local Setup

Hi, guys. I'm trying to set things up according to https://docs.vuestorefront.io/magento/installation-setup/installation.html. Magento is up and running, GraphQL is enabled and working. My .env looks like this:

VSF_NUXT_APP_ENV=development
VSF_NUXT_APP_PORT=3000
VSF_NUXT_APP_HOST=0.0.0.0

VSF_STORE_URL=http://localhost:3000

# Previously VSF_MIDDLEWARE_URL
API_BASE_URL=http://localhost:3000/api/
# Previously VSF_SSR_MIDDLEWARE_URL
API_SSR_BASE_URL=http://localhost:3000/api/

VSF_MAGENTO_BASE_URL=http://vsf-playground.local:41302/
VSF_MAGENTO_GRAPHQL_URL=http://vsf-playground.local:41302/graphql

VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=http://vsf-playground.local
VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync

NUXT_IMAGE_PROVIDER=ipx
NUXT_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
NUXT_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com

VSF_NUXT_APP_ENV=development
VSF_NUXT_APP_PORT=3000
VSF_NUXT_APP_HOST=0.0.0.0

VSF_STORE_URL=http://localhost:3000

# Previously VSF_MIDDLEWARE_URL
API_BASE_URL=http://localhost:3000/api/
# Previously VSF_SSR_MIDDLEWARE_URL
API_SSR_BASE_URL=http://localhost:3000/api/

VSF_MAGENTO_BASE_URL=http://vsf-playground.local:41302/
VSF_MAGENTO_GRAPHQL_URL=http://vsf-playground.local:41302/graphql

VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=http://vsf-playground.local
VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync

NUXT_IMAGE_PROVIDER=ipx
NUXT_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
NUXT_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com

I'm getting several TypeError [ERR_INVALID_PROTOCOL]: Protocol "http:" not supported. Expected "https:" error messages when opening http://localhost:3000 in the browser. I'm not sure if the two are related, but there are 500 Internal Server Error messages for http://localhost:3000/ and http://localhost:3000/api/magento/customQuery.

6 Replies

skirianov•13mo ago

hey 👋 What's the correct URL to access your Magento backend? Also, can you please check nuxt.config.js server property, does it require https?

krzysztof.wolowski•13mo ago

The correct URL to Magento is exactly the one configured: http://vsf-playground.local:41302/. I haven't made any changes to nuxt.config.js. The server property there doesn't require https. I also found that the error comes from Apollo: `````` { "name": "ApolloError", "graphQLErrors": [], "clientErrors": [], "networkError": { "code": "ERR_INVALID_PROTOCOL" }, "message": "Protocol "http:" not supported. Expected "https:"" }

skirianov•13mo ago

hmm...just in case, can you try to replace http to https in the .env file and restart the app? only for magento URLs

krzysztof.wolowski•13mo ago

Sure. This time it's:

FetchError: request to https://vsf-playground.local:41302/graphql?query=query+getStoresAndCurrencies%7BavailableStores%7Bstore_code+__typename%7Dcurrency%7Bavailable_currency_codes+__typename%7D%7D&operationName=getStoresAndCurrencies&variables=%7B%7D failed, reason: write EPROTO 140618928920512:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:332

rohrig•13mo ago

hi @krzysztof.wolowski 👋 , can you try disabling ssl via the middleware config? Or doing the setup for local development with ssl? https://docs.vuestorefront.io/magento/installation-setup/advanced-configuration.html

Vue Storefront Advanced Configuration | Vue Storefront 2 for Magento

Documentation for the Magento connector for Vue Storefront 2

krzysztof.wolowski•13mo ago

Just to confirm. Running Magento with ssl solved the problem.

Gaming

Programming

Local Setup