Add %PUBLIC_URL% support (#474)

* Add %PUBLIC_URL% support * Add %PUBLIC_URL% to documentation
FredKSchott · Jun 11, 2020 · f268af6 · f268af6
1 parent 3280de3
commit f268af6
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 0 deletions.
diff --git a/docs/05-configuration.md b/docs/05-configuration.md
@@ -123,6 +123,8 @@ $ snowpack dev --no-bundle
 
 #### Build Options
 
+- **`baseUrl`** | `string` | Default: `/`
+  - In your HTML, replace all instances of `%PUBLIC_URL%` with this (inspired by the same [Create React App](https://create-react-app.dev/docs/using-the-public-folder/) concept). This is useful if your app will be deployed to a subdirectory.
 - **`metaDir`** | `string` | Default: `__snowpack__`
   - By default, Snowpack outputs Snowpack-related metadata such as [HMR](#hot-module-replacement) and [ENV](#environment-variables) info to a folder called `__snowpack__`. You can rename that folder with this option (e.g.: `metaDir: 'static/snowpack'`).
 

diff --git a/src/commands/build-util.ts b/src/commands/build-util.ts
@@ -107,6 +107,9 @@ export function wrapHtmlResponse({
   hasHmr?: boolean;
   buildOptions: SnowpackConfig['buildOptions'];
 }) {
+  // replace %PUBLIC_URL% in HTML files (along with surrounding slashes, if any)
+  code = code.replace(/\/?%PUBLIC_URL%\/?/g, '/');
+
   if (hasHmr) {
     code += `<script type="module" src="/${buildOptions.metaDir}/hmr.js"></script>`;
   }

diff --git a/src/commands/build.ts b/src/commands/build.ts
@@ -209,6 +209,13 @@ export async function command(commandOptions: CommandOptions) {
           }
           const outPath = f.replace(dirDisk, dirDest);
           mkdirp.sync(path.dirname(outPath));
+
+          // replace %PUBLIC_URL% in HTML files
+          if (path.extname(f) === '.html') {
+            let code = await fs.readFile(f, 'utf8');
+            code = code.replace(/%PUBLIC_URL%\/?/g, config.buildOptions.baseUrl);
+            return fs.writeFile(outPath, code, 'utf8');
+          }
           return fs.copyFile(f, outPath);
         }),
       );

diff --git a/src/config.ts b/src/config.ts
@@ -115,6 +115,7 @@ export interface SnowpackConfig {
     };
   };
   buildOptions: {
+    baseUrl: string;
     metaDir: string;
   };
   proxy: Proxy[];
@@ -156,6 +157,7 @@ const DEFAULT_CONFIG: Partial<SnowpackConfig> = {
     bundle: undefined,
   },
   buildOptions: {
+    baseUrl: '/',
     metaDir: '__snowpack__',
   },
 };
@@ -224,6 +226,7 @@ const configSchema = {
     buildOptions: {
       type: ['object'],
       properties: {
+        baseUrl: {type: 'string'},
         metaDir: {type: 'string'},
       },
     },

diff --git a/test/build/base-url/.gitignore b/test/build/base-url/.gitignore
@@ -0,0 +1,2 @@
+build
+node_modules
diff --git a/test/build/base-url/index.test.js b/test/build/base-url/index.test.js
@@ -0,0 +1,18 @@
+const fs = require('fs');
+const path = require('path');
+const execa = require('execa');
+
+it('buildOptions.baseUrl', () => {
+  // %PUBLIC_URL% gets replaced with this setting
+  execa.sync('npm', ['run', 'TEST'], {cwd: __dirname});
+
+  const outputHTML = fs.readFileSync(path.resolve(__dirname, 'build', 'index.html'), 'utf8');
+
+  const iconMatch = outputHTML.match(/<link rel="icon" href="([^"]+)/)[1];
+  const cssMatch = outputHTML.match(/<link rel="stylesheet" type="text\/css" href="([^"]+)/)[1];
+  const jsMatch = outputHTML.match(/<script type="module" src="([^"]+)/)[1];
+
+  expect(iconMatch).toBe('/static/favicon.ico');
+  expect(cssMatch).toBe('/static/index.css');
+  expect(jsMatch).toBe('/static/_dist_/index.js');
+});
diff --git a/test/build/base-url/package.json b/test/build/base-url/package.json
@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "start": "node ../../../pkg/dist-node/index.bin.js dev",
+    "TEST": "node ../../../pkg/dist-node/index.bin.js build"
+  },
+  "snowpack": {
+    "scripts": {
+      "mount:public": "mount public --to /",
+      "mount:src": "mount src --to /_dist_"
+    },
+    "buildOptions": {
+      "baseUrl": "/static/"
+    }
+  },
+  "dependencies": {}
+}
diff --git a/test/build/base-url/public/favicon.ico b/test/build/base-url/public/favicon.ico
diff --git a/test/build/base-url/public/index.css b/test/build/base-url/public/index.css
@@ -0,0 +1,14 @@
+#img {
+  display: block;
+  margin: auto;
+  height: 128px;
+  width: 128px;
+  padding: 2rem;
+}
+
+#canvas {
+  display: block;
+  margin: 2rem auto;
+  width: 540px;
+  height: 540px;
+}
diff --git a/test/build/base-url/public/index.html b/test/build/base-url/public/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Web site created using create-snowpack-app" />
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/index.css" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/test/build/base-url/src/index.js b/test/build/base-url/src/index.js
@@ -0,0 +1,3 @@
+export default function doNothing() {
+  // I do nothing 🎉
+}