project setup

rbrtsmith · Jul 17, 2017 · bb654e1 · bb654e1
commit bb654e1
Show file tree

Hide file tree

Showing 17 changed files with 4,603 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,13 @@
+{
+ "presets": [
+ "react",
+ [
+ "env",
+ {
+ "targets": {
+ "browsers": ["last 2 versions", "ie 9-11"]
+ }
+ }
+ ]
+ ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+npm-debug.log
+*.DS_Store
+node_modules
+dist
diff --git a/README.md b/README.md
@@ -0,0 +1,17 @@
+# Nebula-CSS & React + ES6 + Webpack Starter Project
+
+## Get Started
+1. fork / clone this repository
+2. `npm install` OR `yarn`
+3. `npm start` OR `yarn start` to start the Webpack Development Server
+4. `npm run build` OR `yarn build` for production build
+
+**Note** This is a very minimal starter pack, you are encourage to add in your
+own unit testing framework, if you are pulling in images or SVGs you
+will require the appropriate Webpack-loaders.
+
+As is Babel and Autoprefixer are configured to support the following environments:
+```
+"last 2 versions", "ie 9-11"
+```
+These can be re-configured in your `.babelrc` and `webpack-config.babel` files.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Neblua starter</title>
+</head>
+<body>
+ <div id="app"></div>
+ <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "nebula-css-react-starter",
+ "version": "0.1.0",
+ "description": "A starting point for React JS Project consuming Nebula-CSS",
+ "main": "index.js",
+ "scripts": {
+ "build": "webpack",
+ "start": "webpack-dev-server --open"
+ },
+ "keywords": [
+ "nebula",
+ "CSS",
+ "react",
+ "starter",
+ "webpack"
+ ],
+ "author": "Robert Smith",
+ "license": "MIT",
+ "dependencies": {
+ "nebula-css": "^2.3.1",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1"
+ },
+ "devDependencies": {
+ "autoprefixer": "^7.1.2",
+ "babel-core": "^6.25.0",
+ "babel-loader": "^7.1.1",
+ "babel-preset-env": "^1.6.0",
+ "babel-preset-react": "^6.24.1",
+ "css-loader": "^0.28.4",
+ "node-sass": "^4.5.3",
+ "postcss-loader": "^2.0.6",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.18.2",
+ "webpack": "^3.3.0",
+ "webpack-dev-server": "^2.5.1",
+ "webpack-merge": "^4.1.0"
+ }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const App = ({ title }) => (
+ <div className="o-site-wrap o-site-wrap--padding">
+ <h1>{title}</h1>
+ <div className="o-grid o-grid--matrix">
+ <div className="o-grid__item u-1/2@sm">
+ grid item 1
+ </div>
+ <div className="o-grid__item u-1/2@sm">
+ grid item 2
+ </div>
+ </div>
+ </div>
+)
+
+export default App
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from 'react-dom'
+
+import App from './App'
+import './scss/main.scss'
+
+const appTitle = 'Welcome to your React + Nebula project'
+
+render(<App title={appTitle} />, document.querySelector('#app'));
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -0,0 +1 @@
+@import 'nebula-css/base';
diff --git a/src/scss/_components.scss b/src/scss/_components.scss
diff --git a/src/scss/_objects.scss b/src/scss/_objects.scss
@@ -0,0 +1 @@
+@import 'nebula-css/objects';
diff --git a/src/scss/_resets.scss b/src/scss/_resets.scss
@@ -0,0 +1 @@
+@import 'nebula-css/resets';
diff --git a/src/scss/_settings.scss b/src/scss/_settings.scss
@@ -0,0 +1 @@
+@import 'nebula-css/settings';
diff --git a/src/scss/_tools.scss b/src/scss/_tools.scss
@@ -0,0 +1 @@
+@import 'nebula-css/tools';
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
@@ -0,0 +1 @@
+@import 'nebula-css/utilities';
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -0,0 +1,8 @@
+@import 'settings';
+@import 'tools';
+@import 'resets';
+@import 'base';
+@import 'objects';
+@import 'components';
+@import 'utilities';
+
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -0,0 +1,76 @@
+import webpack from 'webpack'
+import path from 'path'
+import merge from 'webpack-merge'
+import autoprefixer from 'autoprefixer'
+
+const common = {
+ entry: path.resolve(__dirname, './src'),
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'bundle.js'
+ },
+ module: {
+ rules: [
+ { test: /\.jsx?$/, use: 'babel-loader' },
+ {
+ test: /\.s?css$/,
+ use: [{
+ loader: 'style-loader'
+ }, {
+ loader: 'css-loader'
+ }, {
+ loader: 'postcss-loader',
+ options: {
+ plugins: () => [
+ autoprefixer({ browsers: ['last 2 versions', 'ie 9-11'] })
+ ]
+ }
+ }, {
+ loader: 'sass-loader',
+ options: {
+ includePaths: [
+ path.resolve(__dirname, './node_modules/nebula-css')
+ ]
+ }
+ }]
+ }
+ ]
+ },
+ resolve: {
+ extensions: ['.js', '.jsx', '.scss']
+ }
+}
+
+const dev = {
+ devServer: {
+ historyApiFallback: true
+ },
+ devtool: 'source-map'
+}
+
+const prod = {
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify('production')
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false,
+ },
+ sourceMap: false
+ })
+ ]
+}
+
+const config = (env) => {
+ switch (env) {
+ case 'build':
+ return merge(common, prod)
+ case 'start':
+ return merge(common, dev)
+ default:
+ return common
+ }
+}
+
+export default config(process.env.npm_lifecycle_event)