fix Cannot create a SharedArrayBuffer problem

.env.example

@@ -24,6 +24,7 @@ PORT=8000
 PREVIEW_PORT=8002
 EDITOR_URL=http://localhost:8000
 PREVIEW_URL=http://localhost:8002
+PREVIEW_SERVER_URL=http://localhost:8000/preview
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production

client/modules/IDE/components/PreviewFrame.jsx

@@ -13,7 +13,8 @@ const Frame = styled.iframe`
 
 function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
-  const previewUrl = getConfig('PREVIEW_URL');
+  const previewUrl = getConfig('PREVIEW_SERVER_URL');
+  console.log(previewUrl);
   useEffect(() => {
     const unsubscribe = registerFrame(iframe.current.contentWindow, previewUrl);
     return () => {

package.json

@@ -197,6 +197,7 @@
     "fuse.js": "^6.6.2",
     "history": "^4.10.1",
     "htmlhint": "^0.15.1",
+    "http-proxy-middleware": "^2.0.7",
     "i18next": "^19.9.2",
     "i18next-http-backend": "^1.2.6",
     "is-url": "^1.2.4",

server/previewServer.js

@@ -48,6 +48,7 @@ const allowedCorsOrigins = [
   process.env.PREVIEW_URL
 ];
 
+//
 // to allow client-only development
 if (process.env.CORS_ALLOW_LOCALHOST === 'true') {
   allowedCorsOrigins.push(/localhost/);
@@ -62,6 +63,12 @@ app.use(corsMiddleware);
 // Enable pre-flight OPTIONS route for all end-points
 app.options('*', corsMiddleware);
 
+app.use((req, res, next) => {
+  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+  next();
+});
+
 // Run Webpack dev server in development mode
 if (process.env.NODE_ENV === 'development') {
   const compiler = webpack(config);

server/server.js

@@ -3,6 +3,7 @@ import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import cors from 'cors';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 import session from 'express-session';
 import connectMongo from 'connect-mongo';
 import passport from 'passport';
@@ -66,6 +67,7 @@ const corsMiddleware = cors({
   credentials: true,
   origin: allowedCorsOrigins
 });
+
 app.use(corsMiddleware);
 // Enable pre-flight OPTIONS route for all end-points
 app.options('*', corsMiddleware);
@@ -85,6 +87,18 @@ const clientPromise = mongoose
   })
   .then((m) => m.connection.getClient());
 
+app.use(
+  '/preview',
+  createProxyMiddleware({
+    target: process.env.PREVIEW_URL, // Preview server address
+    changeOrigin: true, // Changes the origin of the host header to the target URL
+    pathRewrite: {
+      '^/preview': '/' // Optionally rewrite the path
+    },
+    logLevel: 'debug' // Logs proxy activity for debugging
+  })
+);
+
 app.use(
   session({
     resave: true,
@@ -103,6 +117,12 @@ app.use(
   })
 );
 
+app.use((req, res, next) => {
+  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+  next();
+});
+
 app.use('/api/v1', requestsOfTypeJSON(), api);
 // This is a temporary way to test access via Personal Access Tokens
 // Sending a valid username:<personal-access-token> combination will
@@ -164,6 +184,8 @@ app.use('/', passportRoutes);
 require('./config/passport');
 
 app.get('/', (req, res) => {
+  //    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+  //    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
   res.sendFile(renderIndex());
 });
 

server/views/index.js

@@ -35,7 +35,7 @@ export function renderIndex() {
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
         window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
-        window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
+        window.process.env.PREVIEW_SERVER_URL = '${process.env.PREVIEW_SERVER_URL}';
         window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
       </script>
     </head>
@@ -83,7 +83,7 @@ export function renderProjectIndex(username, projectName) {
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
         window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
-        window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
+        window.process.env.PREVIEW_SERVER_URL = '${process.env.PREVIEW_SERVER_URL}';
         window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
       </script>
     </head>