mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
bootstrap frontend
This commit is contained in:
parent
8e832f9f03
commit
d75ca9ffd4
8
cloudapi-graphql/src/endpoint.js
Normal file
8
cloudapi-graphql/src/endpoint.js
Normal file
@ -0,0 +1,8 @@
|
||||
const graphqlHTTP = require('express-graphql');
|
||||
const schema = require('./schema');
|
||||
|
||||
module.exports = graphqlHTTP(() => ({
|
||||
schema: schema,
|
||||
graphiql: true,
|
||||
pretty: true
|
||||
}));
|
@ -1,14 +1,8 @@
|
||||
const express = require('express');
|
||||
const graphqlHTTP = require('express-graphql');
|
||||
const schema = require('./schema');
|
||||
|
||||
const app = express();
|
||||
|
||||
app.use('/graphql', graphqlHTTP(() => ({
|
||||
schema: schema,
|
||||
graphiql: true,
|
||||
pretty: true
|
||||
})));
|
||||
app.use('/graphql', require('./endpoint'));
|
||||
|
||||
app.listen(3000, (err) => {
|
||||
if (err) {
|
||||
|
36
frontend/.babelrc
Normal file
36
frontend/.babelrc
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"sourceMaps": "both",
|
||||
"presets": [
|
||||
"react"
|
||||
],
|
||||
"plugins": [
|
||||
"react-hot-loader/babel",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"add-module-exports",
|
||||
"transform-exponentiation-operator",
|
||||
"syntax-async-functions",
|
||||
["transform-object-rest-spread", {
|
||||
"useBuiltIns": true
|
||||
}],
|
||||
["fast-async", {
|
||||
"runtimePatten": "directive",
|
||||
"compiler": {
|
||||
"promises": false,
|
||||
"es7": true,
|
||||
"lazyThenables": true
|
||||
}
|
||||
}]
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
"transform-async-to-generator", [
|
||||
"transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": false
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
3
frontend/.eslintignore
Normal file
3
frontend/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
29
frontend/.eslintrc
Normal file
29
frontend/.eslintrc
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"extends": "semistandard",
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"babel",
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"generator-star-spacing": 0,
|
||||
"babel/generator-star-spacing": 1,
|
||||
"space-before-function-paren": [2, "never"],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
"object-curly-newline": ["error", {
|
||||
"minProperties": 1
|
||||
}],
|
||||
"sort-vars": ["error", {
|
||||
"ignoreCase": true
|
||||
}]
|
||||
}
|
||||
}
|
15
frontend/.tern-project
Normal file
15
frontend/.tern-project
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"libs": [
|
||||
"ecmascript",
|
||||
"browser"
|
||||
],
|
||||
"plugins": {
|
||||
"doc_comment": true,
|
||||
"local-scope": true,
|
||||
"jsx": true,
|
||||
"node": true,
|
||||
"webpack": {
|
||||
"configPath": "./webpack/index.js"
|
||||
}
|
||||
}
|
||||
}
|
45
frontend/README.md
Normal file
45
frontend/README.md
Normal file
@ -0,0 +1,45 @@
|
||||
# Joyent Dashboard Frontend
|
||||
|
||||
## start
|
||||
|
||||
```
|
||||
npm run start
|
||||
```
|
||||
|
||||
## test
|
||||
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
## structure
|
||||
|
||||
```
|
||||
.
|
||||
├── src
|
||||
│ ├── containers
|
||||
│ ├── index.js
|
||||
│ ├── root.js
|
||||
│ └── state
|
||||
│ ├── actions.js
|
||||
│ ├── reducers
|
||||
│ ├── store.js
|
||||
│ └── thunks
|
||||
├── static
|
||||
├── test
|
||||
├── webpack
|
||||
├── .babelrc
|
||||
└── .eslintrc
|
||||
```
|
||||
|
||||
- **src/index.js**: Renders `src/root.js` and bootstraps hot module reloading.
|
||||
- **src/root.js**: The main component that wraps `react-redux`, `react-router` and `react-hot-loader`.
|
||||
- **src/state/store.js**: Exports a function that creates a `redux` store instance with all the middlewares and reducers configured.
|
||||
- **src/state/actions.js**: Not only exports all the actions available (declared in the file), but also goes through all the thunks and exports them.
|
||||
- **src/state/thunks**: Directory to place thunks so that actions or reducers don't get too confusing.
|
||||
- **src/state/reducers**: Each file here represents a reducer scope. So, `state.app` will be controlled in `reducers/app.js`.
|
||||
- **test**: Self explanatory.
|
||||
- **webpack**: Webpack configuration for multiple enviroments. Development configuration includes a dev-server and hot module replacement support.
|
||||
- **.babelrc**: This babel configuration outputs ES2015 code, so it will produce code only for modern browsers.
|
||||
Also, async/await is supported.
|
||||
- **.eslintrc**:ESLint configuration. It's basically [semistandard](https://github.com/Flet/semistandard) with `space-before-function-paren` probited;
|
70
frontend/package.json
Normal file
70
frontend/package.json
Normal file
@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "joyent-dashboard",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"license": "private",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --open --config webpack/index.js",
|
||||
"lint": "eslint .",
|
||||
"test": "NODE_ENV=test nyc ava test/*.js --verbose",
|
||||
"open": "nyc report --reporter=html & open coverage/index.html",
|
||||
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": "^6.17.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.16.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"constant-case": "^2.0.0",
|
||||
"fast-async": "^6.1.1",
|
||||
"json-loader": "^0.5.4",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"react-redux": "^4.4.5",
|
||||
"react-router": "^4.0.0-alpha.4",
|
||||
"reduce-reducers": "^0.1.2",
|
||||
"redux": "^3.6.0",
|
||||
"redux-actions": "^0.12.0",
|
||||
"redux-batched-actions": "^0.1.3",
|
||||
"redux-logger": "^2.7.0",
|
||||
"redux-promise-middleware": "^4.1.0",
|
||||
"redux-thunk": "^2.1.0",
|
||||
"webpack": "^2.1.0-beta.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^0.16.0",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-plugin-transform-async-to-generator": "^6.16.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-register": "^6.16.3",
|
||||
"enzyme": "^2.5.1",
|
||||
"eslint": "^3.8.1",
|
||||
"eslint-config-semistandard": "^7.0.0",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
"eslint-plugin-babel": "^3.3.0",
|
||||
"eslint-plugin-promise": "^3.3.0",
|
||||
"eslint-plugin-react": "^6.4.1",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"nyc": "^8.3.1",
|
||||
"pre-commit": "^1.1.3",
|
||||
"react-addons-test-utils": "^15.3.2",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
},
|
||||
"ava": {
|
||||
"failFast": true,
|
||||
"cache": false,
|
||||
"require": [
|
||||
"babel-register"
|
||||
],
|
||||
"babel": "inherit"
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint",
|
||||
"test",
|
||||
"coverage"
|
||||
]
|
||||
}
|
57
frontend/src/containers/app.js
Normal file
57
frontend/src/containers/app.js
Normal file
@ -0,0 +1,57 @@
|
||||
const React = require('react');
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const actions = require('../state/actions');
|
||||
const Home = require('./home');
|
||||
const NotFound = require('./not-found');
|
||||
|
||||
const {
|
||||
updateRouter
|
||||
} = actions;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
Miss,
|
||||
Match
|
||||
} = ReactRouter;
|
||||
|
||||
const App = connect()(React.createClass({
|
||||
componentWillMount: function() {
|
||||
const {
|
||||
router,
|
||||
dispatch
|
||||
} = this.props;
|
||||
|
||||
// ugly hack needed because of a limitation of react-router api
|
||||
// that doens't pass it's instance to matched routes
|
||||
dispatch(updateRouter(router));
|
||||
},
|
||||
render: function() {
|
||||
const {
|
||||
children
|
||||
} = this.props;
|
||||
|
||||
if (!Array.isArray(children)) {
|
||||
return children;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}));
|
||||
|
||||
module.exports = (props) => {
|
||||
return (
|
||||
<App {...props}>
|
||||
<Match exactly pattern='/' component={Home} />
|
||||
<Miss component={NotFound}/>
|
||||
</App>
|
||||
);
|
||||
};
|
9
frontend/src/containers/home.js
Normal file
9
frontend/src/containers/home.js
Normal file
@ -0,0 +1,9 @@
|
||||
const React = require('react');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Home</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
10
frontend/src/containers/not-found.js
Normal file
10
frontend/src/containers/not-found.js
Normal file
@ -0,0 +1,10 @@
|
||||
const React = require('react');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>404</h1>
|
||||
<h4>Not Found</h4>
|
||||
</div>
|
||||
);
|
||||
};
|
17
frontend/src/index.js
Normal file
17
frontend/src/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
const ReactDOM = require('react-dom');
|
||||
const React = require('react');
|
||||
|
||||
const render = () => {
|
||||
const Root = require('./root');
|
||||
|
||||
ReactDOM.render(
|
||||
<Root />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', render);
|
||||
}
|
31
frontend/src/root.js
Normal file
31
frontend/src/root.js
Normal file
@ -0,0 +1,31 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const App = require('./containers/app');
|
||||
const store = require('./state/store');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
const {
|
||||
Provider
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
BrowserRouter
|
||||
} = ReactRouter;
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<Provider store={store()}>
|
||||
<BrowserRouter>
|
||||
{App}
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
13
frontend/src/state/actions.js
Normal file
13
frontend/src/state/actions.js
Normal file
@ -0,0 +1,13 @@
|
||||
const constantCase = require('constant-case');
|
||||
const ReduxActions = require('redux-actions');
|
||||
|
||||
const {
|
||||
createAction
|
||||
} = ReduxActions;
|
||||
|
||||
const APP = constantCase(process.env['APP_NAME']);
|
||||
|
||||
module.exports = {
|
||||
...require('./thunks'),
|
||||
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`)
|
||||
};
|
19
frontend/src/state/reducers/app.js
Normal file
19
frontend/src/state/reducers/app.js
Normal file
@ -0,0 +1,19 @@
|
||||
const ReduxActions = require('redux-actions');
|
||||
const actions = require('../actions');
|
||||
|
||||
const {
|
||||
handleActions
|
||||
} = ReduxActions;
|
||||
|
||||
const {
|
||||
updateRouter
|
||||
} = actions;
|
||||
|
||||
module.exports = handleActions({
|
||||
[updateRouter.toString()]: (state, action) => {
|
||||
return {
|
||||
...state,
|
||||
router: action.payload
|
||||
};
|
||||
}
|
||||
}, {});
|
11
frontend/src/state/reducers/index.js
Normal file
11
frontend/src/state/reducers/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
const Redux = require('redux');
|
||||
|
||||
const {
|
||||
combineReducers
|
||||
} = Redux;
|
||||
|
||||
module.exports = () => {
|
||||
return combineReducers({
|
||||
app: require('./app.js')
|
||||
});
|
||||
};
|
26
frontend/src/state/store.js
Normal file
26
frontend/src/state/store.js
Normal file
@ -0,0 +1,26 @@
|
||||
const createLogger = require('redux-logger');
|
||||
const createReducer = require('./reducers');
|
||||
const enableBatching = require('redux-batched-actions').enableBatching;
|
||||
const promiseMiddleware = require('redux-promise-middleware').default;
|
||||
const redux = require('redux');
|
||||
const thunk = require('redux-thunk').default;
|
||||
|
||||
const {
|
||||
createStore,
|
||||
compose,
|
||||
applyMiddleware
|
||||
} = redux;
|
||||
|
||||
module.exports = (state = Object.freeze({})) => {
|
||||
return createStore(
|
||||
enableBatching(createReducer()),
|
||||
state,
|
||||
compose(
|
||||
applyMiddleware(
|
||||
createLogger(),
|
||||
promiseMiddleware(),
|
||||
thunk
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
15
frontend/src/state/thunks/app.js
Normal file
15
frontend/src/state/thunks/app.js
Normal file
@ -0,0 +1,15 @@
|
||||
const transitionTo = (pathname) => (dispatch, getState) => {
|
||||
const {
|
||||
app: {
|
||||
router: {
|
||||
transitionTo
|
||||
}
|
||||
}
|
||||
} = getState();
|
||||
|
||||
return transitionTo(pathname);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
transitionTo
|
||||
};
|
3
frontend/src/state/thunks/index.js
Normal file
3
frontend/src/state/thunks/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
...require('./app')
|
||||
};
|
0
frontend/static/.gitkeep
Normal file
0
frontend/static/.gitkeep
Normal file
10
frontend/static/index.html
Normal file
10
frontend/static/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>React Boilerplate</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'></div>
|
||||
<script src='/static/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
25
frontend/test/index.js
Normal file
25
frontend/test/index.js
Normal file
@ -0,0 +1,25 @@
|
||||
const test = require('ava');
|
||||
const enzyme = require('enzyme');
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
shallow
|
||||
} = enzyme;
|
||||
|
||||
test('renders <App> without exploding', (t) => {
|
||||
const App = require('../src/containers/app');
|
||||
const wrapper = shallow(<App />);
|
||||
t.deepEqual(wrapper.length, 1);
|
||||
});
|
||||
|
||||
test('renders <Home> without exploding', (t) => {
|
||||
const Home = require('../src/containers/home');
|
||||
const wrapper = shallow(<Home />);
|
||||
t.deepEqual(wrapper.length, 1);
|
||||
});
|
||||
|
||||
test('renders <NotFound> without exploding', (t) => {
|
||||
const NotFound = require('../src/containers/not-found');
|
||||
const wrapper = shallow(<NotFound />);
|
||||
t.deepEqual(wrapper.length, 1);
|
||||
});
|
39
frontend/webpack/config.js
Normal file
39
frontend/webpack/config.js
Normal file
@ -0,0 +1,39 @@
|
||||
const pkg = require('../package.json');
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
context: path.join(__dirname, '../src'),
|
||||
output: {
|
||||
path: path.join(__dirname, '../static'),
|
||||
publicPath: '/static/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env['NODE_ENV'] || 'development'),
|
||||
APP_NAME: JSON.stringify(pkg.name),
|
||||
APP_VERSION: JSON.stringify(pkg.version)
|
||||
}
|
||||
})
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /js?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, '../src')
|
||||
],
|
||||
loaders: ['babel']
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, '../src')
|
||||
],
|
||||
loaders: ['json']
|
||||
}]
|
||||
}
|
||||
};
|
30
frontend/webpack/development.js
Normal file
30
frontend/webpack/development.js
Normal file
@ -0,0 +1,30 @@
|
||||
const graphql = require('../../cloudapi-graphql/src/endpoint');
|
||||
const config = require('./config.js');
|
||||
const webpack = require('webpack');
|
||||
|
||||
const devServer = {
|
||||
hot: true,
|
||||
compress: true,
|
||||
lazy: false,
|
||||
publicPath: config.output.publicPath,
|
||||
setup: (app) => {
|
||||
app.use('/graphql', graphql);
|
||||
},
|
||||
historyApiFallback: {
|
||||
index: './static/index.html'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Object.assign(config, {
|
||||
entry: [
|
||||
'react-hot-loader/patch',
|
||||
'webpack-dev-server/client?http://localhost:8080',
|
||||
'webpack/hot/only-dev-server',
|
||||
'./index.js'
|
||||
],
|
||||
plugins: config.plugins.concat([
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
]),
|
||||
devtool: 'source-map',
|
||||
devServer
|
||||
});
|
2
frontend/webpack/index.js
Normal file
2
frontend/webpack/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
const NODE_ENV = process.env['NODE_ENV'] || 'development';
|
||||
module.exports = require(`./${NODE_ENV}`);
|
22
frontend/webpack/production.js
Normal file
22
frontend/webpack/production.js
Normal file
@ -0,0 +1,22 @@
|
||||
const config = require('./config.js');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = Object.assign(config, {
|
||||
entry: [
|
||||
'./index.js'
|
||||
],
|
||||
plugins: config.plugins.concat([
|
||||
new webpack.optimize.DedupePlugin(),
|
||||
new webpack.optimize.OccurrenceOrderPlugin(true),
|
||||
new webpack.optimize.UglifyJsPlugin()
|
||||
]),
|
||||
devtool: 'eval'
|
||||
});
|
||||
|
||||
/*
|
||||
* Maybe add in the future:
|
||||
* - https://github.com/lettertwo/appcache-webpack-plugin
|
||||
* - https://github.com/NekR/offline-plugin
|
||||
* - https://github.com/goldhand/sw-precache-webpack-plugin
|
||||
* - https://github.com/Klathmon/imagemin-webpack-plugin
|
||||
*/
|
Loading…
Reference in New Issue
Block a user