ReasonReact basic greekmythology app created 🤘

vardhanapoorv · Oct 2, 2019 · 09d2f49 · 09d2f49
1 parent dc3effe
commit 09d2f49
Show file tree

Hide file tree

Showing 18 changed files with 7,111 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .idea
 .vscode
+.DS_Store
diff --git a/reasonreact/greek-mythology/.gitignore b/reasonreact/greek-mythology/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+.merlin
+.bsb.lock
+npm-debug.log
+/lib/bs/
+/node_modules/
diff --git a/reasonreact/greek-mythology/README.md b/reasonreact/greek-mythology/README.md
@@ -0,0 +1,36 @@
+# Greek Mythology
+
+## 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 clean
+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/reasonreact/greek-mythology/bsconfig.json b/reasonreact/greek-mythology/bsconfig.json
@@ -0,0 +1,21 @@
+
+{
+  "name": "react-hooks-template",
+  "reason": {
+    "react-jsx": 3
+  },
+  "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/reasonreact/greek-mythology/build/Index.js b/reasonreact/greek-mythology/build/Index.js
diff --git a/reasonreact/greek-mythology/build/index.html b/reasonreact/greek-mythology/build/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+
+    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
+    <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <title>Greek Mythology</title>
+</head>
+<body>
+  <div id="base"></div>
+  <script src="Index.js"></script>
+</body>
+</html>