🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

generator-startup-react-app

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

generator-startup-react-app - npm Package Compare versions

Comparing version
0.0.5
 to
0.0.6
+12
generators/app/templates/.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-decorators-legacy",
"transform-object-rest-spread",
"transform-class-properties",
"transform-runtime"
]
}
generators/app/templates/.eslintignore

Sorry, the diff of this file is not supported yet

+103
generators/app/templates/.eslintrc.js
module.exports = {
'root': true,
'env': {
'browser': true,
'node': true,
'jest': true,
'es6': true
},
'plugins': [
'react'
],
'settings': {
'import/resolver': 'webpack'
},
'parserOptions': {
'ecmaVersion': 6,
'sourceType': 'module',
'ecmaFeatures': {
'experimentalObjectRestSpread': true,
'jsx': true
}
},
'extends': [
'eslint:recommended',
'plugin:react/recommended',
'plugin:import/errors',
'plugin:import/warnings'
],
'parser': 'babel-eslint',
'rules': {
'max-params': 0,
'no-console': [
2,
{
'allow': [
'info',
'error'
]
}
],
'max-len': [
2,
100,
2,
{
'ignoreComments': true,
'ignoreUrls': true
}
],
'semi': [
'error',
'always',
{
'omitLastInOneLineBlock': true
}
],
'space-before-function-paren': [
2,
{
'anonymous': 'never',
'named': 'never'
}
],
'indent': [
'error',
4
],
'newline-per-chained-call': [
'error',
{
'ignoreChainWithDepth': 2
}
],
'valid-jsdoc': [
'error',
{
'requireReturn': false
}
],
'arrow-parens': [
'error',
'always'
],
'prefer-arrow-callback': 'error',
'object-curly-spacing': [
'error',
'always'
],
'linebreak-style': 0,
'no-new': 0,
'radix': 0,
'max-depth': [
'error',
5
],
'no-useless-escape': 0,
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/destructuring-assignment': 0,
'react/jsx-one-expression-per-line': 0,
'react/jsx-no-bind': 0
}
};
+7
generators/app/templates/.gitignore
node_modules
npm-debug.log*
dist
.idea
coverage
test_reports
logs
generators/app/templates/assets/img/favicon.png

Sorry, the diff of this file is not supported yet

+3
generators/app/templates/env.json
{
"APP_PORT": "3000"
}
+1
generators/app/templates/jest/asset_mock.js
module.exports = 'IMAGE_MOCK';
+4
generators/app/templates/jest/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter: new Adapter()});
+3
generators/app/templates/jest/style_mock.js
import idObj from 'identity-obj-proxy';
export default idObj;
+126
generators/app/templates/package.json
{
"name": "startup-react-app",
"version": "0.0.1",
"description": "Basic example react app",
"scripts": {
"dev": "cross-env NODE_ENV=development node ./server.js",
"eslint": "eslint ./src ./cloud --color",
"prestart": "yarn run eslint",
"prebuild": "yarn run eslint",
"start": "yarn run build && cross-env NODE_ENV=production node ./server.js",
"build": "cross-env NODE_ENV=production webpack",
"test": "jest --coverage",
"test:auto": "jest --watchAll"
},
"keywords": [
"react",
"flux",
"ui-material",
"react-hot-reload",
"ecmascript6",
"unitest",
"code coverage",
"webpack v3",
"jest"
],
"license": "ISC",
"devDependencies": {
"babel-cli": "~6.26.0",
"babel-core": "~6.26.0",
"babel-eslint": "~8.2.1",
"babel-jest": "~22.1.0",
"babel-loader": "~7.1.2",
"babel-plugin-transform-class-properties": "~6.24.1",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-plugin-transform-object-rest-spread": "~6.26.0",
"babel-plugin-transform-runtime": "~6.23.0",
"babel-preset-env": "~1.6.1",
"babel-preset-react": "~6.24.1",
"clean-webpack-plugin": "~0.1.17",
"compression": "~1.7.1",
"cross-env": "~5.1.1",
"css-hot-loader": "~1.3.6",
"css-loader": "~0.28.9",
"del": "~3.0.0",
"env2": "~2.2.0",
"enzyme": "~3.3.0",
"enzyme-adapter-react-16": "~1.1.1",
"es6-shim": "~0.35.3",
"eslint": "~4.16.0",
"eslint-import-resolver-webpack": "~0.8.3",
"eslint-loader": "~1.9.0",
"eslint-plugin-babel": "~4.1.2",
"eslint-plugin-import": "~2.8.0",
"eslint-plugin-jsx-a11y": "~6.0.2",
"eslint-plugin-react": "~7.6.1",
"expect": "~22.1.0",
"express": "~4.16.2",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "~1.1.5",
"html-webpack-harddisk-plugin": "~0.1.0",
"html-webpack-plugin": "~2.30.1",
"identity-obj-proxy": "~3.0.0",
"jest": "~22.1.4",
"node-sass": "~4.7.2",
"open-browser-webpack-plugin": "~0.0.5",
"postcss-apply": "~0.8.0",
"postcss-cssnext": "~3.1.0",
"postcss-import": "~11.0.0",
"postcss-loader": "~2.0.9",
"react-test-renderer": "~16.2.0",
"regenerator-runtime": "~0.11.1",
"sass-loader": "~6.0.1",
"style-loader": "~0.20.1",
"uglifyjs-webpack-plugin": "~1.1.2",
"url-loader": "~0.6.2",
"webpack": "~3.10.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "~2.21.0"
},
"dependencies": {
"flux": "~3.1.3",
"immutable": "~3.8.2",
"material-ui": "~0.20.0",
"normalize.css": "~7.0.0",
"prop-types": "~15.6.0",
"react": "~16.2.0",
"react-dom": "~16.2.0",
"react-hot-loader": "~3.1.3",
"react-router-dom": "~4.2.2",
"react-tap-event-plugin": "~3.0.2"
},
"private": false,
"author": {
"name": "Jhonatan Villanueva",
"email": "jinvilaz@gmail.com"
},
"engines": {
"node": ">= 8.9.4"
},
"repository": {
"type": "github",
"url": "https://github.com/jinvillaz/start_up_react_app.git"
},
"jest": {
"setupFiles": [
"raf/polyfill",
"<rootDir>/jest/setup.js"
],
"collectCoverageFrom": [
"src/app/**/*.js",
"!src/app/**/*.spec.js"
],
"moduleNameMapper": {
".*\\.(css|scss|sass)$": "<rootDir>/jest/styleMock.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/assetMock.js"
},
"coverageThreshold": {
"global": {
"branches": 1,
"functions": 1,
"lines": 1,
"statements": 1
}
}
}
}
+75
generators/app/templates/README.md
# start_up_react_app
# About
> startup-react-app basic example with modern technologies.
Out of the box it comes with support for:
- React 16
- Ui-material
- React-router
- Webpack 3
- Ecmascript 6 via Babel-Loader
- Style languages (sass, scss)
- Style transformations via PostCSS
- Automatic code linting via esLint
- Ability to unit test components via jest
- Code coverage with jest
- Hot-reload
## Changes since version 0.0.1
This example is written in ES2015. This means it is ___not compatible with node.js versions before 8.9.4___.
## Installation
```bash
# Make sure both is installed globally
npm install -g yarn
```
## Setting up projects
```bash
# Clone the project
git clone https://github.com/jinvillaz/start_up_react_app.git
```
### Install dependencies
```
# cd into project
cd startup-react-app
# install dependencies
yarn
```
## Usage
The following commands are available in your project:
```bash
# Start for development
yarn run dev
# Start the dev-server with the dist version
yarn run start
# Just build the dist version and copy static files
yarn run build
# Run unit tests and get code coverage
yarn run test
# Auto-run unit tests on file changes
yarn run test:auto
# Lint all files in src (also automatically done AFTER tests are run)
yarn run eslint
```
## Contribute
Contributions are welcomed. When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
## License
[MIT license](http://opensource.org/licenses/mit-license.php) 
+44
generators/app/templates/server.js
require('env2')('./env.json');
const path = require('path');
const express = require('express');
const compression = require('compression');
const isDev = process.env.NODE_ENV !== 'production';
console.log(`Starting server with NODE_ENV is ${process.env.NODE_ENV}, isDev is ${isDev}`);
const app = express();
app.use(compression());
if (isDev) {
const webpack = require('webpack');
const config = require('./webpack.config');
const compiler = webpack(config);
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const middleware = webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
});
const hotMiddleware = webpackHotMiddleware(compiler);
app.use(middleware);
app.use(hotMiddleware);
app.get('*', (req, res, next) => {
req.url = '/index.html';
return next();
}, middleware);
} else {
app.use(express.static(path.resolve(__dirname, './dist')));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, './dist/index.html')));
}
app.listen(parseInt(process.env.APP_PORT), (err) => {
if (err) {
console.error(err);
} else {
console.log(`Server started! on port ${process.env.APP_PORT}`);
}
});
+32
generators/app/templates/src/app/app.js
import './app.scss';
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import TopContainer from './components/top_container';
import SampleContainer1 from './components/sample_container1';
import SampleContainer2 from './components/sample_container2';
const muiTheme = getMuiTheme({});
class App extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Router>
<div>
<Route exact path="/" component={TopContainer}/>
<Route path="/sample1" component={SampleContainer1}/>
<Route path="/sample2" component={SampleContainer2}/>
</div>
</Router>
</MuiThemeProvider>
);
}
}
export default App;
+24
generators/app/templates/src/app/app.scss
* {
user-select: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.main-app {
background: darkgray;
display: flex;
align-items: center;
flex-direction: column;
height: 100vh;
.container {
text-align: center;
}
.world {
font-size: 5em;
color: dimgray;
}
h1 {
font-size: 20em;
margin: 0;
color: red;
cursor: pointer;
}
}
+41
generators/app/tem...src/app/components/sample_container1.js
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Link } from 'react-router-dom';
import AppBar from 'material-ui/AppBar';
import { Toolbar, ToolbarTitle } from 'material-ui/Toolbar';
import { List, ListItem } from 'material-ui/List';
import SampleStore from '../stores/store';
class _SampleContainer1 extends Component {
static getStores() {
return [SampleStore];
}
static calculateState() {
return {
sample: SampleStore.getState()
};
}
componentDidMount() {
}
render() {
return (
<div>
<AppBar title="Sample App"/>
<Toolbar>
<ToolbarTitle text="Container: SampleContainer1"/>
</Toolbar>
<List>
<ListItem><Link to="/">Top</Link></ListItem>
<ListItem><Link to="/sample1">Sample1</Link></ListItem>
<ListItem><Link to="/sample2">Sample2</Link></ListItem>
</List>
</div>
);
}
}
const SampleContainer1 = Container.create(_SampleContainer1);
export default SampleContainer1;
+41
generators/app/tem...src/app/components/sample_container2.js
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Link } from 'react-router-dom';
import AppBar from 'material-ui/AppBar';
import { Toolbar, ToolbarTitle } from 'material-ui/Toolbar';
import { List, ListItem } from 'material-ui/List';
import SampleStore from '../stores/store';
class _SampleContainer2 extends Component {
static getStores() {
return [SampleStore];
}
static calculateState() {
return {
sample: SampleStore.getState()
};
}
componentDidMount() {
}
render() {
return (
<div>
<AppBar title="Sample App"/>
<Toolbar>
<ToolbarTitle text="Container: SampleContainer2"/>
</Toolbar>
<List>
<ListItem><Link to="/">Top</Link></ListItem>
<ListItem><Link to="/sample1">Sample1</Link></ListItem>
<ListItem><Link to="/sample2">Sample2</Link></ListItem>
</List>
</div>
);
}
}
const SampleContainer2 = Container.create(_SampleContainer2);
export default SampleContainer2;
+20
generators/app/templates/src/app/components/sample.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Sample extends Component {
static propTypes = {
title: PropTypes.string.isRequired
};
render() {
return (
<div>
<h1>Hello</h1>
<p>{this.props.title}</p>
</div>
);
}
}
export default Sample;
+8
generators/app/templates/src/app/components/sample.spec.js
import Sample from './sample';
describe('Test Sample', () => {
it('Should be retuns it is par', () => {
console.info(Sample);
expect(0).toEqual(0);
});
});
+41
generators/app/templates/src/app/components/top_container.js
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Link } from 'react-router-dom';
import AppBar from 'material-ui/AppBar';
import { Toolbar, ToolbarTitle } from 'material-ui/Toolbar';
import { List, ListItem } from 'material-ui/List';
import SampleStore from '../stores/store';
class _TopContainer extends Component {
static getStores() {
return [SampleStore];
}
static calculateState() {
return {
sample: SampleStore.getState()
};
}
componentDidMount() {
}
render() {
return (
<div>
<AppBar title="Sample App"/>
<Toolbar>
<ToolbarTitle text="Container: TopContainer"/>
</Toolbar>
<List>
<ListItem><Link to="/">Top</Link></ListItem>
<ListItem><Link to="/sample1">Sample1</Link></ListItem>
<ListItem><Link to="/sample2">Sample2</Link></ListItem>
</List>
</div>
);
}
}
const TopContainer = Container.create(_TopContainer);
export default TopContainer;
+4
generators/app/templates/src/app/constants/constants.js
export const ActionTypes = {
TYPE_001: 'type-001',
TYPE_002: 'type-002'
};
+9
generators/app/templates/src/app/dispatcher/dispatcher.js
import { Dispatcher } from 'flux';
class AppDispatcher extends Dispatcher {
dispatch(action = {}) {
super.dispatch(action);
}
}
export default new AppDispatcher();
+6
generators/app/templates/src/app/reducers/index.js
export const something = (value) => {
if (value % 2 === 0) {
return 'It is par';
}
return 'It is not par';
};
+10
generators/app/templates/src/app/reducers/index.spec.js
import { something } from './index';
describe('Test initial', () => {
it('Should be retuns it is par', () => {
expect('It is par').toEqual(something(2));
});
it('Should be retuns it is not par', () => {
expect('It is not par').toEqual(something(3));
});
});
+27
generators/app/templates/src/app/stores/store.js
import { ReduceStore } from 'flux/utils';
import Immutable from 'immutable';
import { ActionTypes } from '../constants/constants';
import AppDispatcher from '../dispatcher/dispatcher';
class SampleStore extends ReduceStore {
getInitialState() {
return Immutable.Map({
"title": "Title...",
"text": "Text..."
}).toJS();
}
reduce(state, action) {
switch (action.type) {
case ActionTypes.TYPE_001:
return state;
case ActionTypes.TYPE_002:
return Immutable.Map(action.data).set("text", "Flux is...")
.toJS();
default:
return state;
}
}
}
export default new SampleStore(AppDispatcher);
+8
generators/app/templates/src/index.html
<!doctype html>
<html>
<head></head>
<body>
<div id="root">
</div>
</body>
</html>
+30
generators/app/templates/src/index.js
import 'normalize.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import injectTapEventPlugin from 'react-tap-event-plugin';
import App from './app/app';
injectTapEventPlugin();
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root')
);
};
render(App);
if (module.hot) {
module.hot.accept('./app/app', () => {
try {
const NextApp = require('./app/app').default; // eslint-disable-line global-require
render(NextApp);
} catch (error) {
console.error(`==> ReduxState hot reloading error ${error}`);
}
});
}
+112
generators/app/templates/webpack.config.js
require('env2')('./env.json');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const isDev = process.env.NODE_ENV !== 'production';
const ifDev = (then) => (isDev ? then : null);
const ifProd = (then) => (!isDev ? then : null);
const identity = (i) => i;
console.log(`Starting compiler with NODE_ENV is ${process.env.NODE_ENV}, isDev is ${isDev}`);
module.exports = {
target: 'web',
profile: true,
entry: [ifDev('webpack-hot-middleware/client'),
ifDev('react-hot-loader/patch'),
'./index'].filter(identity),
performance: {
hints: false
},
context: path.resolve(__dirname, './src'),
devtool: isDev ? 'cheap-module-source-map' : false,
resolve: {
modules: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, './assets'),
'node_modules']
},
output: {
publicPath: '/',
path: path.resolve(__dirname, './dist'),
filename: isDev ? 'app.bundle.js' : 'app.bundle.[chunkhash].js'
},
plugins: [
ifProd(new CleanWebpackPlugin(['dist/*.*', 'logs/*.*'], {verbose: true})),
ifProd(new webpack.LoaderOptionsPlugin({minimize: true, debug: false})),
new webpack.EnvironmentPlugin({
DEBUG: isDev,
NODE_ENV: isDev ? 'development' : 'production'
}),
new HtmlWebpackPlugin({
template: 'index.html',
inject: true,
minify: {collapseWhitespace: true}
}),
ifDev(new webpack.HotModuleReplacementPlugin()),
ifDev(new webpack.NamedModulesPlugin()),
new ExtractTextPlugin({filename: 'app.bundle.[contenthash].css', disable: isDev}),
ifProd(new UglifyJsPlugin({parallel: true, cache: true, uglifyOptions: {warnings: true}})),
ifDev(new OpenBrowserPlugin({url: `http://localhost:${process.env.APP_PORT}`}))
].filter(identity),
module: {
rules: [
{
test: /\.js$/,
include: [path.resolve(__dirname, './src')],
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader"
},
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: isDev,
minimize: isDev ? false : {discardComments: {removeAll: true}}
}
},
{
loader: 'sass-loader',
options: {
noIeCompat: true,
sourceMap: isDev,
paths: [path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'src')]
}
}
]
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: ['file-loader']
}
]
}
};
generators/app/templates/yarn.lock

Sorry, the diff of this file is too big to display

+2
-2
package.json
{
"name": "generator-startup-react-app",
"version": "0.0.5",
"version": "0.0.6",
"description": "Generates a basic example react app with webpack 3 + react 16 + hot reload",

@@ -25,3 +25,3 @@ "keywords": [

"files": [
"generatos/app"
"generators/app"
],

@@ -28,0 +28,0 @@ "repository": {

+1
-1
README.md

@@ -22,3 +22,3 @@ # generator-startup-react-app

## Changes since version 0.0.5
## Changes since version 0.0.6
This generator is written in ES2015. This means it is ___not compatible with node.js versions before 8.9.4___.

@@ -25,0 +25,0 @@