chore(web): use react-scripts for web bundle (#13)

* chore: remove webpack & related plugin

* chore: update gitignore

* chore: make it compatible with react-scripts
update Dockerfile
update scripts in web
add logo favicon and manifest
update index.html
add index.js for support react-scripts
updaate bsconfig.json for bs-webapi

* refactor: update in Index.re & Link.re

* chore: update icon

* chore: improve docker build for go project

.gitignore

@@ -3,4 +3,7 @@ gow
 .env
 
 *.db
-*.log
+*.log
+**/*.swp
+**/*.swo
+

Dockerfile

@@ -2,23 +2,23 @@ FROM node:10.16.3 as frontendBuilder
 
 # RUN apt install g++ make python
 
-ADD web/package.json web/package-lock.json /app/
+ADD web/bsconfig.json web/package.json web/package-lock.json /app/
 
 WORKDIR /app
 RUN npm install
 
 COPY web ./
-
+COPY web/.env.example ./.env
 RUN npm run build
 
 FROM golang:alpine AS apiBuilder
 WORKDIR /go/src/github.com/evilfactorylabs/gow
 
-RUN apk add --update git gcc musl-dev
+RUN apk add --update git gcc musl-dev --no-cache
 RUN go get -u github.com/gobuffalo/packr/packr
 
 COPY . ./
-COPY --from=frontendBuilder /app/dist ./web/dist
+COPY --from=frontendBuilder /app/build ./web/dist
 
 RUN GOOS=linux GOARCH=amd64 packr build -v -ldflags "-s"
 

web/.env.example

@@ -0,0 +1,3 @@
+EXTEND_ESLINT=true
+REACT_APP_NAME=Gow from Evilfactorylabs
+REACT_APP_DESCRIPTION=Simple URL shortener with simple analytics.

web/.eslintignore

@@ -0,0 +1,3 @@
+**/*.bs.js
+*.gen.tsx
+*.gen.js

web/.gitignore

@@ -9,4 +9,8 @@ node_modules
 dist
 
 # :))
-*.bs.js
+*.bs.js
+**/*.swp
+**/*.swo
+
+build/

web/bsconfig.json

@@ -16,9 +16,16 @@
   ],
   "suffix": ".bs.js",
   "namespace": true,
-  "bs-dependencies": ["reason-react", "bs-fetch", "bs-abstract", "decco", "relude", "relude-fetch", "relude-reason-react"],
-  "ppx-flags": [
-    "decco/ppx" 
+  "bs-dependencies": [
+    "reason-react",
+    "bs-fetch",
+    "bs-bastet",
+    "bs-webapi",
+    "decco",
+    "relude",
+    "relude-fetch",
+    "relude-reason-react"
   ],
+  "ppx-flags": ["decco/ppx"],
   "refmt": 3
 }

web/package.json

@@ -1,35 +1,47 @@
 {
   "name": "@evilfactorylabs/gow",
+  "description": "Simple URL shortener with simple analytics.",
   "private": true,
   "version": "0.4.0",
   "license": "MIT",
   "scripts": {
-    "start": "npm run bs:start",
-    "build": "npm run bs:build && webpack",
-    "clean": "bsb -clean-world",
-    "bs:start": "bsb -make-world -w -ws _",
-    "bs:build": "bsb -make-world",
-    "dev": "npm-run-all --parallel dev:*",
-    "dev:web": "webpack-dev-server",
-    "dev:bs": "npm run bs:start"
+    "start": "run-p --print-name start:*",
+    "start:bsb": "bsb -make-world -w -ws _",
+    "start:web": "react-scripts start",
+    "prebuild": "bsb -clean-world -make-world",
+    "build": "react-scripts build",
+    "clean": "bsb -clean-world"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
   "dependencies": {
-    "bs-abstract": "^0.18.0",
-    "bs-fetch": "^0.5.2",
-    "decco": "^1.2.0",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "reason-react": ">=0.7.0",
-    "relude": "^0.55.0",
-    "relude-fetch": "^0.6.0",
-    "relude-reason-react": "^0.8.2"
+    "bs-bastet": "^1.2.5",
+    "bs-fetch": "^0.6.2",
+    "bs-webapi": "^0.17.1",
+    "decco": "^1.2.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "reason-react": ">=0.9.1",
+    "relude": "^0.63.1",
+    "relude-fetch": "^0.8.0",
+    "relude-reason-react": "^0.10.0"
   },
   "devDependencies": {
-    "bs-platform": "^7.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "npm-run-all": "^4.1.5",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.3"
+    "bs-platform": "^8.0.3",
+    "npm-run-all": "^4.1.5"
   }
 }

web/public/index.html

@@ -0,0 +1,55 @@
+<!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="theme-color" content="#000000" />
+    <meta name="description" content="%REACT_APP_DESCRIPTION%" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/144.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>%REACT_APP_NAME%</title>
+  </head>
+  <body>
+    <div id="g0W">
+    <!--
+        preloaded content
+    -->
+      <span>
+        <svg
+          style="
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -25px 0 0 -25px;
+          "
+        >
+          <image xlink:href="%PUBLIC_URL%/256.svg" src="%PUBLIC_URL%/256.png" />
+        </svg>
+      </span>
+    </div>
+    <!--
+      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>

web/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Gow from Evilfactorylabs",
+  "name": "Simple URL shortener with simple analytics.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "144.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#001B44",
+  "background_color": "#D01C22"
+}

web/src/App.re

@@ -14,14 +14,14 @@ let make = () => {
   <Container>
     <Navbar path={url.hash} />
     <main style=fragmentContainer>
-      {
-        switch (route) {
-        | Home => <Home />
-        | New => <New />
-        | Stats(slug) => <Stats slug />
-        | Notfound => <Notfound />
-        }
-      }
+      {switch (route) {
+       | Home => <Home />
+       | New => <New />
+       | Stats(slug) => <Stats slug />
+       | Notfound => <Notfound />
+       }}
     </main>
   </Container>;
 };
+
+let default = make;

web/src/Index.re

@@ -1 +1,25 @@
-ReactDOMRe.renderToElementWithId(<App />, "app");
+/* our gow react app ID */
+let appId = "g0W";
+
+/*
+ cause HTMLBodyElement not implemented in Webapi.Dom
+ and our need to create new Element in `document.body`.
+ unsafe_document##body##appendChild(dom)
+ */
+[@bs.val] external unsafe_document: Js.t({..}) = "document";
+
+/*
+ use Webapi for communicate DOM (non-react) in Reason
+ open Webapi.Dom;
+   checking appId in DOM, when exists our `hydrate` VDOM to DOM
+   when not exist, we create new element and `render` VDOM to DOM
+  switch (document |> Document.getElementById(appId)) {
+  | Some(_) => ReactDOMRe.hydrateToElementWithId(<App />, appId)
+  | None =>
+    let dom = document |> Document.createElement("div");
+    dom |> Element.setAttribute("id", appId);
+    unsafe_document##body##appendChild(dom)->ignore;
+    ReactDOMRe.renderToElementWithId(<App />, appId);
+  };
+   */
+ReactDOMRe.renderToElementWithId(<App />, appId);

web/src/components/Link.re

@@ -1,11 +1,15 @@
 [@react.component]
-let make = (~href:Router.t , ~className="", ~style: ReactDOMRe.Style.t=?, ~children) => {
+let make = (~href: Router.t, ~className="", ~style=?, ~children) => {
   let handleClick = (href, e) => {
     ReactEvent.Mouse.preventDefault(e);
     ReasonReactRouter.push(href->Router.unwrap);
   };
 
-  <a href={href->Router.unwrap } style className onClick={e => handleClick(href, e)}>
+  <a
+    href={href->Router.unwrap}
+    ?style
+    className
+    onClick={e => handleClick(href, e)}>
     children
   </a>;
 };

web/src/index.js

@@ -0,0 +1 @@
+import "./Index.bs.js";