React frontend engine giving Blocked script execution in <URL> and CORS issue

Shopify Apps
1

I am using https://github.com/Kyon147/laravel-shopify this package to develop the Shopify app using the Laravel 11 version. Frontend engine REACT.

App Bridge is the latest.

This is my app.blade.php file:

<head>
    <meta name="shopify-api-key" content="xxx" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

    @viteReactRefresh
    @vite('resources/js/index.tsx')
</head>
<body>
    <div id="app"><!--index.jsx injects App.jsx here--></div>
</body>

And this is the index.tsx file:

import React from 'react';
import App            from './App'
import '@shopify/polaris/build/esm/styles.css';
import ReactDOM from 'react-dom/client';

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);

But giving the below error. Blade is getting perfectly but not index.tsx file.

Show More

Blocked script execution in '[details=Show More]
Access to script at ‘http://127.0.0.1:5173/@vite/client’ from origin ‘https://3385-103-95-97-72.ngrok-free.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2

Try setting your APP_URL to the ngrok url and then set the url for vite.

VITE_APP_URL=${APP_URL}

I’ve also found using Cloudflare tunnels much better then ngrok. Here is a tutorial on how to set it up if you are using valet - https://gist.github.com/irazasyed/46295bc3b823bb3b13c9acd51b96b4ad