Fix loading assets at sketch runtime

Author: catarak

client/modules/IDE/actions/ide.js

@@ -266,8 +266,11 @@ export function startSketch() {
     dispatch(startVisualSketch());
     const state = getState();
     dispatchMessage({
-      type: MessageTypes.FILES,
-      payload: state.files
+      type: MessageTypes.SKETCH,
+      payload: {
+        files: state.files,
+        basePath: window.location.pathname
+      }
     });
     dispatchMessage({
       type: MessageTypes.START

client/modules/Preview/EmbedFrame.jsx

@@ -192,14 +192,14 @@ function addLoopProtect(sketchDoc) {
   });
 }
 
-function injectLocalFiles(files, htmlFile) {
+function injectLocalFiles(files, htmlFile, basePath) {
   let scriptOffs = [];
   const resolvedFiles = resolveJSAndCSSLinks(files);
   const parser = new DOMParser();
   const sketchDoc = parser.parseFromString(htmlFile.content, 'text/html');
 
   const base = sketchDoc.createElement('base');
-  base.href = `${window.location.href}/`;
+  base.href = `${basePath}/`;
   sketchDoc.head.appendChild(base);
 
   resolvePathsForElementsWithAttribute('src', sketchDoc, resolvedFiles);
@@ -230,7 +230,7 @@ function getHtmlFile(files) {
   return files.filter((file) => file.name.match(/.*\.html$/i))[0];
 }
 
-function EmbedFrame({ files, isPlaying }) {
+function EmbedFrame({ files, isPlaying, basePath }) {
   const iframe = useRef();
   const htmlFile = useMemo(() => getHtmlFile(files), [files]);
 
@@ -247,7 +247,7 @@ function EmbedFrame({ files, isPlaying }) {
   function renderSketch() {
     const doc = iframe.current;
     if (isPlaying) {
-      const htmlDoc = injectLocalFiles(files, htmlFile);
+      const htmlDoc = injectLocalFiles(files, htmlFile, basePath);
       srcDoc.set(doc, htmlDoc);
     } else {
       doc.srcdoc = '';
@@ -275,7 +275,8 @@ EmbedFrame.propTypes = {
     name: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired
   }).isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  isPlaying: PropTypes.bool.isRequired,
+  basePath: PropTypes.string.isRequired
 };
 
 export default EmbedFrame;

client/modules/Preview/previewIndex.jsx

@@ -21,13 +21,15 @@ const GlobalStyle = createGlobalStyle`
 const App = () => {
   const [state, dispatch] = useReducer(filesReducer, [], initialState);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [basePath, setBasePath] = useState('');
   registerFrame(window.parent, getConfig('EDITOR_URL'));
 
   function handleMessageEvent(message) {
     const { type, payload } = message;
     switch (type) {
-      case MessageTypes.FILES:
-        dispatch(setFiles(payload));
+      case MessageTypes.SKETCH:
+        dispatch(setFiles(payload.files));
+        setBasePath(payload.basePath);
         break;
       case MessageTypes.START:
         setIsPlaying(true);
@@ -55,7 +57,7 @@ const App = () => {
   return (
     <React.Fragment>
       <GlobalStyle />
-      <EmbedFrame files={state} isPlaying={isPlaying} />
+      <EmbedFrame files={state} isPlaying={isPlaying} basePath={basePath} />
     </React.Fragment>
   );
 };

client/utils/dispatcher.js

@@ -9,6 +9,7 @@ export const MessageTypes = {
   START: 'START',
   STOP: 'STOP',
   FILES: 'FILES',
+  SKETCH: 'SKETCH',
   REGISTER: 'REGISTER',
   EXECUTE: 'EXECUTE'
 };

server/previewServer.js

@@ -5,6 +5,7 @@ import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import config from '../webpack/config.dev';
 import embedRoutes from './routes/embed.routes';
+import assetRoutes from './routes/asset.routes';
 import renderPreviewIndex from './views/previewIndex';
 
 const app = new Express();
@@ -33,6 +34,7 @@ app.get('/', (req, res) => {
 });
 
 app.use('/', embedRoutes);
+app.use('/', assetRoutes);
 
 app.listen(process.env.PREVIEW_PORT, (error) => {
   if (!error) {

server/server.js

@@ -141,8 +141,6 @@ app.use('/editor', requestsOfTypeJSON(), collections);
 // isomorphic rendering
 app.use('/', serverRoutes);
 
-app.use(assetRoutes);
-
 app.use('/', redirectEmbedRoutes);
 app.use('/', passportRoutes);