Merge pull request #1 from theplant/support-create-react-app-v3.1.1

Support create react app v3.1.1

README.md

@@ -4,7 +4,114 @@ createreactappmanifest integrate Create React App with Go web application
 
 
 
-Mount expose assets with ServeMux, and GetURL get correct assets path for you.
+
+* [Type Config](#type-config)
+* [Type Data](#type-data)
+* [Type MData](#type-mdata)
+* [Type Manifest](#type-manifest)
+  * [New](#manifest-new)
+  * [Get CS SU RLs](#manifest-get-cs-su-rls)
+  * [Get JS UR Ls](#manifest-get-js-ur-ls)
+  * [Mount](#manifest-mount)
+
+
+
+
+
+
+## Type: Config
+``` go
+type Config struct {
+    // the PUBLIC_URL environment variable when do yarn build in react app
+    PublicURL   string
+    ManifestDir string
+
+    // sometime you want to excludes the files in react app public folder.
+    MountExcludeForPublic string
+    IsDev                 bool
+
+    /*
+        Disable the code splitting in development mode, so you can get only one bundle at `http://localhost:3000/static/js/bundle.js`
+        1. Install `@rescripts/cli` as a devDependency. `yarn add -D @rescripts/cli`
+        2. Change the start script in package.json from "start": "react-scripts start" to "start": "rescripts start"
+        3. Change the build script in package.json from "build": "react-scripts build" to "build": "INLINE_RUNTIME_CHUNK=false rescripts build"
+        4. Create a `.rescriptsrc.js` file at your project root with the following contents:
+        ```
+        module.exports = config => {
+        if (process.env.NODE_ENV === "development") {
+            config.optimization.runtimeChunk = false;
+            config.optimization.splitChunks = {
+            cacheGroups: {
+                default: false
+            }
+            };
+        }
+
+        return config;
+        };
+        ```
+    */
+    DevBundleURL string
+}
+```
+
+
+
+
+
+
+
+
+
+## Type: Data
+``` go
+type Data struct {
+    Files map[string]string
+}
+```
+
+
+
+
+
+
+
+
+
+## Type: MData
+``` go
+type MData struct {
+    JS  []string
+    CSS []string
+}
+```
+
+
+
+
+
+
+
+
+
+## Type: Manifest
+``` go
+type Manifest struct {
+    // contains filtered or unexported fields
+}
+```
+
+
+
+
+
+
+### Manifest: New
+``` go
+func New(cfg *Config) (m *Manifest, err error)
+```
+
+Mount expose assets with ServeMux, and GetJSURLs, GetCSSURLs get correct assets path for you.
 ```go
 	mux := http.DefaultServeMux
 
@@ -15,8 +122,17 @@ Mount expose assets with ServeMux, and GetURL get correct assets path for you.
 
 	renderTemplate := func() string {
 	    buf := bytes.NewBuffer(nil)
-	    fmt.Fprintf(buf, `<link href="%s" rel="stylesheet">`, m.GetURL("main.css"))
-	    fmt.Fprintf(buf, `<script type="text/javascript" src="%s"></script>`, m.GetURL("main.js"))
+
+	    jsURLs := m.GetJSURLs()
+	    for _, url := range jsURLs {
+	        fmt.Fprintf(buf, `<script type="text/javascript" src="%s"></script>`, url)
+	    }
+
+	    cssURLs := m.GetCSSURLs()
+	    for _, url := range cssURLs {
+	        fmt.Fprintf(buf, `<link href="%s" rel="stylesheet">`, url)
+	    }
+
 	    return buf.String()
 	}
 
@@ -29,3 +145,31 @@ Mount expose assets with ServeMux, and GetURL get correct assets path for you.
 
 
 
+### Manifest: Get CS SU RLs
+``` go
+func (m *Manifest) GetCSSURLs() (urls []string)
+```
+GetCSSURLs get all the css urls
+
+
+
+
+### Manifest: Get JS UR Ls
+``` go
+func (m *Manifest) GetJSURLs() (urls []string)
+```
+GetJSURLs get all the js urls
+
+
+
+
+### Manifest: Mount
+``` go
+func (m *Manifest) Mount(mux *http.ServeMux)
+```
+Mount automatically mounts Create React App build directory into Go ServeMux
+
+
+
+
+

example/build/asset-manifest.json

@@ -1,7 +1,18 @@
 {
-  "main.css": "static/css/main.c17080f1.css",
-  "main.css.map": "static/css/main.c17080f1.css.map",
-  "main.js": "static/js/main.33fb4ad2.js",
-  "main.js.map": "static/js/main.33fb4ad2.js.map",
-  "static/media/logo.svg": "static/media/logo.5d5d9eef.svg"
+  "files": {
+    "main.css": "/static/css/main.2cce8147.chunk.css",
+    "main.js": "/static/js/main.63bf6d37.chunk.js",
+    "main.js.map": "/static/js/main.63bf6d37.chunk.js.map",
+    "runtime~main.js": "/static/js/runtime~main.ea3e0b5a.js",
+    "runtime~main.js.map": "/static/js/runtime~main.ea3e0b5a.js.map",
+    "static/css/2.764ccc25.chunk.css": "/static/css/2.764ccc25.chunk.css",
+    "static/js/2.f8fd391a.chunk.js": "/static/js/2.f8fd391a.chunk.js",
+    "static/js/2.f8fd391a.chunk.js.map": "/static/js/2.f8fd391a.chunk.js.map",
+    "index.html": "/index.html",
+    "precache-manifest.1b17ff30715505ff589c47309a366a39.js": "/precache-manifest.1b17ff30715505ff589c47309a366a39.js",
+    "service-worker.js": "/service-worker.js",
+    "static/css/2.764ccc25.chunk.css.map": "/static/css/2.764ccc25.chunk.css.map",
+    "static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
+    "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
+  }
 }

example/build/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.c17080f1.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.33fb4ad2.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/2.764ccc25.chunk.css" rel="stylesheet"><link href="/static/css/main.2cce8147.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(p){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],Object.prototype.hasOwnProperty.call(i,t)&&i[t]&&a.push(i[t][0]),i[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(p[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return c.push.apply(c,u||[]),f()}function f(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==i[u]&&(n=!1)}n&&(c.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},i={1:0},c=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return p[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=p,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var r=window.webpackJsonpexample=window.webpackJsonpexample||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;f()}([])</script><script src="/static/js/2.f8fd391a.chunk.js"></script><script src="/static/js/main.63bf6d37.chunk.js"></script></body></html>

example/build/manifest.json

@@ -4,11 +4,21 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }	    
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

example/build/precache-manifest.1b17ff30715505ff589c47309a366a39.js

@@ -0,0 +1,30 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "ddb58dce9067ff370ee01fd3b7b39f14",
+    "url": "/index.html"
+  },
+  {
+    "revision": "b5f0199faae6cd10b708",
+    "url": "/static/css/2.764ccc25.chunk.css"
+  },
+  {
+    "revision": "d3094c032bfbab601b29",
+    "url": "/static/css/main.2cce8147.chunk.css"
+  },
+  {
+    "revision": "b5f0199faae6cd10b708",
+    "url": "/static/js/2.f8fd391a.chunk.js"
+  },
+  {
+    "revision": "d3094c032bfbab601b29",
+    "url": "/static/js/main.63bf6d37.chunk.js"
+  },
+  {
+    "revision": "e1a6e0adc44a0ed3e01e",
+    "url": "/static/js/runtime~main.ea3e0b5a.js"
+  },
+  {
+    "revision": "5d5d9eefa31e5e13a6610d9fa7a283bb",
+    "url": "/static/media/logo.5d5d9eef.svg"
+  }
+]);

example/build/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

example/build/service-worker.js

@@ -1 +1,39 @@
-"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","1eb4ae06e5d1e9f51bcd6621af85b5b7"],["/static/css/main.c17080f1.css","302476b8b379a677f648aa1e48918ebd"],["/static/js/main.33fb4ad2.js","6b2512fd0a5766fab5961f5b4303720d"],["/static/media/logo.5d5d9eef.svg","5d5d9eefa31e5e13a6610d9fa7a283bb"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/precache-manifest.1b17ff30715505ff589c47309a366a39.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
+
+  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
+});