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
skirianov•2y 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
krzysztof.wolowskiOP•2y 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
skirianov•2y 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
krzysztof.wolowskiOP•2y 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
rohrig•2y 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
krzysztof.wolowskiOP•2y ago
Just to confirm. Running Magento with ssl solved the problem.

Did you find this page helpful?