Add react frontend

apps/subs_web/.gitignore

@@ -14,3 +14,6 @@ erl_crash.dump
 # secrets files as long as you replace their contents by environment
 # variables.
 /config/*.secret.exs
+/priv/static/*
+!/priv/static/robots.txt
+!/priv/static/favicon.ico

apps/subs_web/config/dev.exs

@@ -11,7 +11,8 @@ config :subs_web, SubsWeb.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: []
+  watchers: [node: ["node_modules/.bin/webpack", "--watch", "--display-error-details", "--color", "--stdin",
+                    cd: Path.expand("../frontend", __DIR__)]]
 
 # ## SSL Support
 #

apps/subs_web/frontend/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-2"
+  ],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./src"
+        ]
+      }
+    ]
+  ]
+}

apps/subs_web/frontend/.gitignore

@@ -0,0 +1 @@
+node_modules

apps/subs_web/frontend/assets/css/app.scss

@@ -0,0 +1,4 @@
+body {
+  height: 100%;
+  width: 100%;
+}

apps/subs_web/frontend/assets/css/index.js

@@ -0,0 +1 @@
+import './app.scss'

apps/subs_web/frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "subs",
+  "version": "1.0.0",
+  "main": "index.jsx",
+  "license": "MIT",
+  "dependencies": {
+    "immutable": "^3.8.1",
+    "phoenix": "file:../../../deps/phoenix",
+    "phoenix_html": "file:../../../deps/phoenix_html",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.6",
+    "react-router": "^3.0.5",
+    "react-router-redux": "^4.0.8",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-module-resolver": "^2.7.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "webpack": "^3.5.5"
+  }
+}

apps/subs_web/frontend/src/app.js

@@ -0,0 +1 @@
+import App from './index'

apps/subs_web/frontend/src/components/App.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const App = ({ children }) => (
+  <div>
+    {children}
+  </div>
+)
+
+export default App

apps/subs_web/frontend/src/data/initialState.js

@@ -0,0 +1 @@
+export default {}

apps/subs_web/frontend/src/data/rootReducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import { routerReducer } from 'react-router-redux'
+
+const rootReducer = combineReducers({
+  routing: routerReducer,
+})
+
+export default rootReducer

apps/subs_web/frontend/src/data/store.js

@@ -0,0 +1,24 @@
+import { createStore, applyMiddleware, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import { routerMiddleware } from 'react-router-redux'
+import { browserHistory } from 'react-router'
+import rootReducer from './rootReducer'
+
+import initialState from './initialState'
+
+// For Redux Devtools:
+// https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const initStore = () => createStore(
+  rootReducer,
+  initialState,
+  composeEnhancers(
+    applyMiddleware(
+      thunkMiddleware,
+      routerMiddleware(browserHistory),
+    ),
+  )
+)
+
+export default initStore

apps/subs_web/frontend/src/index.jsx

@@ -0,0 +1,28 @@
+import Phoenix from 'phoenix_html'
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { browserHistory, Router, Route, IndexRoute } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
+
+import '../assets/css'
+import initStore from './data/store'
+
+import App from './components/App'
+import Home from './routes/Home/Home.jsx'
+
+const store = initStore()
+const awesomeHistory = syncHistoryWithStore(browserHistory, store)
+
+if (document.getElementById('app')) {
+  render(
+    <Provider store={store} >
+      <Router history={awesomeHistory}>
+        <Route path="/" component={App}>
+          <IndexRoute component={Home} />
+        </Route>
+      </Router>
+    </Provider>,
+    document.getElementById('app'),
+  )
+}

apps/subs_web/frontend/src/routes/Home/Home.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Home = () => (
+  <div>
+    Home
+  </div>
+)
+
+export default Home

apps/subs_web/frontend/webpack.config.js

@@ -0,0 +1,49 @@
+var path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  resolve: {
+    modules: [
+      "node_modules",
+      path.resolve(__dirname, "src"),
+    ],
+    extensions: ['.js', '.jsx'],
+  },
+  entry: {
+    app: [
+      path.resolve(__dirname, './src/index.jsx'),
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, '../priv/static'),
+    filename: '[name].bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /.jsx?$/,
+        use: ['babel-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s?css$/,
+        use: ExtractTextPlugin.extract({
+          use: 'css-loader!sass-loader',
+        }),
+      },
+      {
+        test: /\.(png|gif|jpg)$/,
+        use: 'file-loader?name=images/[name].[ext]',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(ttf|eot|svg|woff|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: 'file-loader?name=images/[name].[ext]',
+        exclude: /node_modules/,
+      }
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin({ filename: 'app.bundle.css', allChunks: true }),
+  ],
+}