- mkdir terradashboard
- yo react-fullstack
- npm install
- npm i -D karma
- npm i -D karma-spec-reporter
- npm i -D chai
- npm i -D karma-chai
- npm i -D mocha
- npm i -D karma-mocha
- npm i -D karma-chrome-launcher
- npm i -D karma-sourcemap-loader
- npm i -D karma-phantomjs-launcher
- npm i -D karma-webpack
- npm uninstall jest
- remove all references to jest in package.json
- comment out
"extends": "airbnb"in .eslintrc - Make the following changes to package.json
"karma": "SET BABEL_ENV=development&&SET NODE_ENV=test&&karma start config/karma.conf.js"
"test": "npm run karma -- --no-single-run",- Create config/karma.conf.js with the following initial value
var path = require('path');
var testHelperPath = path.resolve('test/testHelper.js')
module.exports = function(config) {
config.set({
// use the PhantomJS browser
browsers: ['PhantomJS'],
reporters: ['spec'],
// use mocha and chai
frameworks: ['mocha', 'chai'],
// files that Karma will server to the browser
files: [
// entry file for Webpack
testHelperPath
],
// before serving test/testHelper.js to the browser
preprocessors: {
[testHelperPath]: [
// use karma-webpack to preprocess the file via webpack
'webpack',
// use karma-sourcemap-loader to utilize sourcemaps generated by webpack
'sourcemap'
]
},
// webpack configuration used by karma-webpack
webpack: {
// generate sourcemaps
devtool: 'inline-source-map',
// enzyme-specific setup
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
},
module: {
// lint JavaScript with Eslint
preLoaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint'
}
],
// use same loaders as Create React App
loaders: [
{
exclude: [
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
],
loader: 'file',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
// relative path starts out at the src folder when importing modules
resolve: {
root: path.resolve('./src')
}
},
webpackMiddleware: {
// only output webpack error messages
stats: 'errors-only'
},
})
}- Create test/testhelper.js
// polyfill PhantomJS environment
import 'babel-polyfill'
import 'whatwg-fetch'
// require all the test files in the test folder that end with Spec.js or Spec.jsx
const testsContext = require.context(".", true, /spec.jsx?$/);
testsContext.keys().forEach(testsContext);
// output at when the test were run
console.info(`TESTS RAN AT ${new Date().toLocaleTimeString()}`);- delete tests folder.
React Starter Kit is an opinionated boilerplate for web development built on top of Facebook's React library, Node.js / Express server and Flux architecture. Containing modern web development tools such as Webpack, Babel and BrowserSync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.
See demo | docs | to-do list | join #react-starter-kit chatroom to stay up to date | visit our sponsors:
- Follow the getting started guide to download and run the project
- Check the code recipes used in this boilerplate, or share yours
.
├── /build/ # The folder for compiled output
├── /docs/ # Documentation files for the project
├── /node_modules/ # 3rd-party libraries and utilities
├── /src/ # The source code of the application
│ ├── /actions/ # Action creators that allow to trigger a dispatch to stores
│ ├── /components/ # React components
│ ├── /constants/ # Constants (action types etc.)
│ ├── /content/ # Static content (plain HTML or Markdown, Jade, you name it)
│ ├── /core/ # Core framework and utility functions
│ ├── /data/ # GraphQL server schema
│ ├── /decorators/ # Higher-order React components
│ ├── /public/ # Static files which are copied into the /build/public folder
│ ├── /routes/ # Page/screen components along with the routing information
│ ├── /stores/ # Stores contain the application state and logic
│ ├── /views/ # Express.js views for index and error pages
│ ├── /client.js # Client-side startup script
│ ├── /config.js # Global application settings
│ ├── /routes.js # Universal (isomorphic) application routes
│ └── /server.js # Server-side startup script
├── /tools/ # Build automation scripts and utilities
│ ├── /lib/ # Library for utility snippets
│ ├── /build.js # Builds the project from source to output (build) folder
│ ├── /bundle.js # Bundles the web resources into package(s) through Webpack
│ ├── /clean.js # Cleans up the output (build) folder
│ ├── /copy.js # Copies static files to output (build) folder
│ ├── /deploy.js # Deploys your web application
│ ├── /run.js # Helper function for running build automation tasks
│ ├── /runServer.js # Launches (or restarts) Node.js server
│ ├── /start.js # Launches the development web server with "live reload"
│ └── /webpack.config.js # Configurations for client-side and server-side bundles
│── package.json # The list of 3rd party libraries and utilities
└── preprocessor.js # ES6 transpiler settings for Jest
- Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
- React Static Boilerplate — Generates static websites from React components
- Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries
- Getting Started with React.js
- Getting Started with GraphQL and Relay
- React.js Questions on StackOverflow
- React.js Discussion Board
- Flux Architecture for Building User Interfaces
- Jest - Painless Unit Testing
- Flow - A static type checker for JavaScript
- The Future of React
- Learn ES6, ES6 Features
- #react-starter-kit on Stack Overflow — Questions and answers
- #react-starter-kit on Gitter — Watch announcements, share ideas and feedback
- GitHub issues, or Scrum board — File issues, send feature requests
- appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, Startups, etc.)
- @koistya on Codementor, or Skype — Private consulting
Copyright © 2014-2016 Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.
Made with ♥ by Konstantin Tarkus (@koistya) and contributors