How can we see the preview on local not store?

Anshu-Shar commented 9 months ago

Hello @Mini-Sylar

Please provide the steps to show the frontend preview in the local system.because it is not possible to see the preview in store if more than one member is working. Example:- For the backend: http://localhost:43045/ For the frontend: http://localhost:32991/ It is continuous changing.

Mini-Sylar commented 9 months ago

Hi @Anshu-Shar

This issue can be solved by using a tool like ngrok. This will create a publicly accessible url that anyone can connect to

Here's how to start the server using ngrok. This will also allow you to test webhooks

Update since shopify removed the tunnel option

download ngrok and add it to your system environment variables
Run ngrok http 3000 and copy the URL (keep the tab open)
run npm run shopify app dev -- --reset --tunnel-url https.....:3000 (note the port)
They should ask you to enter an authentication code, find that on your ngrok dashboard
Follow the shopify prompt
If it shows you a redirect url select "Yes by default" (This might show you a cloudflare url but don't worry just select yes)
Your dev server will up and running and anyone with that url should be able to view the frontend

note: when using the free version of ngrok the url might change everytime you restart the dev server

Hope this helps, let me know if there are any issues

Mini-Sylar commented 9 months ago

hi @Anshu-Shar I've updated the steps since Shopify has removed the tunneling flag

Anshu-Shar commented 9 months ago

Hi @Anshu-Shar

This issue can be solved by using a tool like ngrok. This will create a publicly accessible url that anyone can connect to

Here's how to start the server using ngrok. This will also allow you to test webhooks

download ngrok and add it to your system environment variables

run npm run dev -- --tunnel ngrok

They should ask you to enter an authentication code, find that on your ngrok dashboard

Follow the shopify prompt

If it shows you a redirect url select "Yes by default" (This might show you a cloudflare url but don't worry just select yes)

Your dev server will up and running and anyone with that url should be able to view the frontend

note: when using the free version of ngrok the url might change everytime you restart the dev server

Hope this helps, let me know if there are any issues

Anshu-Shar commented 9 months ago

Hello @Mini-Sylar I have setup the vue app in my local system through your repository it is working fine.I want to see the preview in my local system not in the shopify store. Please guide for the same. I want to use the frontend: http://localhost:32991/ like this url but when i hit this command on the browser it is showing-No shop provided Thanks

Anshu-Shar commented 9 months ago

Hi @Anshu-Shar

This issue can be solved by using a tool like ngrok. This will create a publicly accessible url that anyone can connect to

Here's how to start the server using ngrok. This will also allow you to test webhooks

Update since shopify removed the tunnel option

download ngrok and add it to your system environment variables

Run ngrok http 3000 and copy the URL (keep the tab open)

run npm run shopify app dev -- --reset --tunnel-url https.....:3000 (note the port)

They should ask you to enter an authentication code, find that on your ngrok dashboard

Follow the shopify prompt

If it shows you a redirect url select "Yes by default" (This might show you a cloudflare url but don't worry just select yes)

Your dev server will up and running and anyone with that url should be able to view the frontend

note: when using the free version of ngrok the url might change everytime you restart the dev server

Hope this helps, let me know if there are any issues

Thankyou for the Quick reply

Mini-Sylar commented 9 months ago

Oh, I see what you mean. @Anshu-Shar

However, this will likely break the appBridge since shopify won't be able to communicate with your app

Is there any reason why you don't prefer the embedded mode?

Anshu-Shar commented 9 months ago

Oh, I see what you mean. @Anshu-Shar

However, this will likely break the appBridge since shopify won't be able to communicate with your app

Is there any reason why you don't prefer the embedded mode?

If multiple person work on the same app and run the npm run dev in their local.How can we show app preview in that condition in the local system?

Mini-Sylar commented 9 months ago

One way around this is to just use git

So the backend developer will work on their side and then commit the changes, the frontend developer will just pull the changes the latest changes before they start working

Another option is to tunnel the app through ngrok using the steps I mentioned earlier but then you would have to modify the vite config to use that ngrok url as your proxy server

Mini-Sylar commented 9 months ago

@Anshu-Shar

Here's an example you may need to modify this to suit your needs (this disables app bridge)

in ./web/frontend/vite.config.js

Replace host in hmrConfig with your ngrok url in localhost
```
# vite.config.js
```

let hmrConfig if (host === 'localhost') { hmrConfig = { protocol: 'ws', host:'NGROK URL HERE', #ngrok url here port: 64999, clientPort: 64999 } } else { hmrConfig = { protocol: 'wss', host: host, port: process.env.FRONTEND_PORT, clientPort: 443 } }

Remove proxy as well

server: { host: 'localhost', port: process.env.FRONTEND_PORT, hmr: hmrConfig,

......

server: { host: 'localhost', port: process.env.FRONTEND_PORT, hmr: hmrConfig, / proxy: { '^/(\?.)?$': proxyOptions, '^/api(/|(\?.)?$)': proxyOptions } } / }


- Next you would have to disable appBridge in plugin

```javascript

# appBridge.js

import { createApp } from '@shopify/app-bridge'

const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST

window.__SHOPIFY_DEV_HOST = host

export const shopifyAppBridgePlugin = {
  install: (app) => {
    // const appBridge = createApp({
    //   apiKey: process.env.SHOPIFY_API_KEY, ## Alternatively you can an .env.development and place this in there
    //   host: host, ## you can provide your ngrok url here or include it in your env.development
    //   forceRedirect: false
    // })
    // app.config.globalProperties.$appBridge = appBridge
    // app.provide('useAppBridge', appBridge)
  }
}

Disable vueAuthenticatedFetch()


# vueAuthenticatedFetch.js

export function useAuthenticatedFetchVue() {
  const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST

  window.__SHOPIFY_DEV_HOST = host
  // const appBridge = createApp({
  //   apiKey: process.env.SHOPIFY_API_KEY,
  //   host: host,
  //   forceRedirect: true
  // })
  const app = {}
  const fetchFunction = authenticatedFetch(app) || fetch

  return async (uri, options) => {
    const response = await fetchFunction(uri, options)
    checkHeadersForReauthorization(response.headers, app)
    return response
  }
}

run npm run dev in web/frontend
Your app should start

Mini-Sylar commented 9 months ago

Hi @Anshu-Shar

Marking this issue as closed

Feel free to reopen if you still have questions or concerns

Mini-Sylar / shopify-app-vue-template