feat: Add support for building using a baseUrl (#121)

README.md

@@ -62,6 +62,7 @@ module.exports = {
       Hello World!
     </Button>
   `,
+  baseUrl: '/playroom/',
   webpackConfig: () => ({
     // Custom webpack config goes here...
   })

lib/makeWebpackConfig.js

@@ -34,7 +34,7 @@ module.exports = async (playroomConfig, options) => {
     output: {
       filename: '[name].[hash].js',
       path: path.resolve(playroomConfig.cwd, playroomConfig.outputPath),
-      publicPath: ''
+      publicPath: playroomConfig.baseUrl
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
@@ -144,7 +144,8 @@ module.exports = async (playroomConfig, options) => {
           : 'Playroom',
         chunksSortMode: 'none',
         chunks: ['index'],
-        filename: 'index.html'
+        filename: 'index.html',
+        base: playroomConfig.baseUrl
       }),
       new HtmlWebpackPlugin({
         title: 'Playroom Frame',

lib/provideDefaultConfig.js

@@ -16,5 +16,6 @@ module.exports = ({ storageKey, ...restConfig }) => ({
   port: 9000,
   openBrowser: true,
   storageKey: storageKey || generateStorageKey(),
+  baseUrl: '',
   ...restConfig
 });

lib/start.js

@@ -4,7 +4,10 @@ const open = require('open');
 const makeWebpackConfig = require('./makeWebpackConfig');
 
 module.exports = async (config, callback) => {
-  const webpackConfig = await makeWebpackConfig(config, { production: false });
+  const webpackConfig = await makeWebpackConfig(
+    { ...config, baseUrl: '' },
+    { production: false }
+  );
   const webpackDevServerConfig = {
     hot: true,
     stats: {},

src/Playroom/Preview/Preview.tsx

@@ -13,6 +13,8 @@ interface PreviewProps {
   widths: PlayroomProps['widths'];
 }
 
+const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
+
 export default function Preview({ code, themes, widths }: PreviewProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
 
@@ -51,7 +53,9 @@ export default function Preview({ code, themes, widths }: PreviewProps) {
           </div>
           <Iframe
             intersectionRootRef={scrollingPanelRef}
-            src={`frame.html#?themeName=${encodeURIComponent(
+            src={`${
+              playroomConfig.baseUrl
+            }frame.html#?themeName=${encodeURIComponent(
               frame.theme
             )}&code=${encodeURIComponent(renderCode)}`}
             className={styles.frame}

src/index.d.ts

@@ -10,6 +10,7 @@ interface PlayroomConfig {
   cwd?: string;
   storageKey?: string;
   webpackConfig?: () => void;
+  baseUrl?: string;
 }
 
 interface InternalPlayroomConfig extends PlayroomConfig {