[wip] webpack-dev-server orphan issue

superhawk610 · Oct 31, 2018 · 59c42e9 · 59c42e9
commit 59c42e9
Show file tree

Hide file tree

Showing 18 changed files with 4,795 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+.merlin
+.bsb.lock
+npm-debug.log
+/lib/bs/
+/node_modules/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "flow.enabled": false,
+  "files.exclude": {
+    "**/*.bs.js": false
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# the-completionist
+
+## Run Project
+
+```sh
+npm install
+npm start
+# in another tab
+npm run webpack
+```
+
+After you see the webpack compilation succeed (the `npm run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
+
+**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
+
+## Run Project with Server
+
+To run with the webpack development server run `npm run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
+
+Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
+
+To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`).
+
+## Build for Production
+
+```sh
+npm run build
+npm run webpack:production
+```
+
+This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
+
+If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
+
+**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.
diff --git a/bsconfig.json b/bsconfig.json
@@ -0,0 +1,24 @@
+/* This is the BuckleScript configuration file. Note that this is a comment;
+  BuckleScript comes with a JSON parser that supports comments and trailing
+  comma. If this screws with your editor highlighting, please tell us by filing
+  an issue! */
+{
+  "name": "react-template",
+  "reason": {
+    "react-jsx": 2
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react"
+  ],
+  "refmt": 3
+}
diff --git a/build/Index.js b/build/Index.js
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Playground</title>
+</head>
+
+<body>
+  <div id="page-wrapper">
+    <div id="root"></div>
+  </div>
+  <script type="text/javascript" src="Index.js"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "the-completionist",
+  "description": "Track your progress toward finishing all those shows on your watch list!",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "bsb -make-world",
+    "start": "bsb -make-world -w",
+    "clean": "bsb -clean-world",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "webpack": "webpack -w",
+    "webpack:production": "NODE_ENV=production webpack",
+    "server": "webpack-dev-server"
+  },
+  "keywords": [
+    "BuckleScript"
+  ],
+  "author": "Aaron Ross <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "reason-react": ">=0.4.0"
+  },
+  "devDependencies": {
+    "bs-platform": "^4.0.7",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.8"
+  }
+}
diff --git a/src/Index.bs.js b/src/Index.bs.js
diff --git a/src/Index.re b/src/Index.re
@@ -0,0 +1 @@
+ReactDOMRe.renderToElementWithId(<App />, "root");
diff --git a/src/components/App/App.bs.js b/src/components/App/App.bs.js
diff --git a/src/components/App/App.re b/src/components/App/App.re
@@ -0,0 +1,11 @@
+let component = ReasonReact.statelessComponent("App");
+
+let make = (_children) => {
+  ...component,
+  render: (_self) => (
+    <div>
+      <Greeting name="Aaron" />
+      <Stateful greeting="foo" />
+    </div>
+  ),
+};
diff --git a/src/components/Greeting/Greeting.bs.js b/src/components/Greeting/Greeting.bs.js
diff --git a/src/components/Greeting/Greeting.re b/src/components/Greeting/Greeting.re
@@ -0,0 +1,6 @@
+let component = ReasonReact.statelessComponent("Greeting");
+
+let make = (~name, _children) => {
+  ...component,
+  render: (_self) => <div> {ReasonReact.string("Hello " ++ name ++ "!")} </div>
+};
diff --git a/src/components/Stateful/Stateful.bs.js b/src/components/Stateful/Stateful.bs.js
diff --git a/src/components/Stateful/Stateful.re b/src/components/Stateful/Stateful.re
@@ -0,0 +1,41 @@
+type state = {
+  count: int,
+  show: bool,
+};
+
+type action =
+  | Increment
+  | Decrement
+  | Toggle;
+
+let component = ReasonReact.reducerComponent("Stateful");
+
+let make = (~greeting, _children) => {
+  ...component,
+  initialState: () => {count: 0, show: true},
+  reducer: (action, state) =>
+    switch (action) {
+    | Increment => ReasonReact.Update({...state, count: state.count + 1})
+    | Decrement => ReasonReact.Update({...state, count: state.count - 1})
+    | Toggle => ReasonReact.Update({...state, show: !state.show})
+    },
+  render: self => {
+    let message = "You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)";
+    <div>
+      <button onClick=(_event => self.send(Increment))>
+        (ReasonReact.string("-"))
+      </button>
+      <button onClick=(_event => self.send(Decrement))>
+        (ReasonReact.string("+"))
+      </button>
+      <button onClick=(_event => self.send(Toggle))>
+        (ReasonReact.string("Toggle greeting"))
+      </button>
+      (
+        self.state.show
+        ? ReasonReact.string(greeting)
+        : ReasonReact.null
+      )
+    </div>;
+  },
+};
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Playground</title>
+</head>
+
+<body>
+  <div id="page-wrapper">
+    <div id="root"></div>
+  </div>
+  <script type="text/javascript" src="Index.js"></script>
+</body>
+
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const outputDir = path.join(__dirname, 'build/');
+
+const isProd = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  entry: './src/Index.bs.js',
+  mode: isProd ? 'production' : 'development',
+  output: {
+    path: outputDir,
+    publicPath: outputDir,
+    filename: 'Index.js',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+      inject: false
+    })
+  ],
+  devServer: {
+    compress: true,
+    contentBase: outputDir,
+    port: process.env.PORT || 8000,
+    historyApiFallback: true
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ReactDOMRe.renderToElementWithId(<App />, "root");