diff --git a/.gitignore b/.gitignore
index d81e9288..4a0344c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,9 @@
## Generated Files
#############
+temporary-test-dir/
dist/
+build/
#############
## Node
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..acd405b1
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+8.6.0
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..cce02790
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+package.json
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..789ac2e5
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000..f4c66ed6
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,76 @@
+language: node_js
+sudo: false
+install:
+ - echo 'skip installation'
+
+jobs:
+ include:
+ - stage: Testing dev-toolkit...
+ env: Run feature-tests
+ script:
+ - cd feature-tests
+ - npm install
+ - npm run test
+
+ - stage: Testing dev-toolkit...
+ env: Test bootstrapping the project
+ script:
+ - npm install
+ - npm run bootstrap
+
+ - stage: Testing dev-toolkit...
+ env: Lint feature-tests
+ script:
+ - cd feature-tests
+ - npm install
+ - npm run lint
+
+ - stage: Testing dev-toolkit...
+ env: Lint packages
+ script:
+ - cd packages/babel-preset-dev-toolkit
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd packages/babel-runner
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd packages/dev-toolkit
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd packages/eslint-config-dev-toolkit
+ - npm install
+ - npm run lint
+
+ - stage: Testing dev-toolkit...
+ env: Lint templates
+ script:
+ - cd templates/standard
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd templates/with-eslint
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd templates/with-sass
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd templates/minimal
+ - npm install
+ - npm run lint
+ - cd ../..
+
+ - cd templates/serverless
+ - npm install
+ - npm run lint
+ - cd ../..
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 00000000..19bd418c
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1 @@
+* @stoikerty
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ea201928..c0209248 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,21 +1,14 @@
-# How to contribute
-Thanks for wanting to help improve the toolkit! ๐
-
-
-
- Jump-start your react-powered Web App.dynamic pagessass & css-modulesserver-renderinghot-reload
-
-## Try out the latest beta ๐
-Version 6 will be less opinionated and useful for more use-cases such as serverless. I'm looking to release v6 before the end of 2017.
-
-Please try it out and post feedback in https://github.com/stoikerty/dev-toolkit/pull/39 or open an issue.
-
-Latest beta version: `dev-toolkit@6.0.0-beta-44`
-```bash
-# Install the latest version
-npm install -g dev-toolkit@6.0.0-beta-44
-
-# Initialize a project. Optional name, template, comments
-dev-toolkit init [my_project] [--template template_name] [--skipComments]
-```
-
-*Available templates:*
-- `minimal` - done & ready
-- `standard` - done & ready (default)
-- `with-sass` - done but you might encounter bugs
-- `serverless` - in progress
-
----
-
-## Create a new project
-```bash
-# install & initialize new app
-npm install -g dev-toolkit
-dev-toolkit --init my_app
-cd my_app
-```
-```
-# run it via npm scripts
-npm run dev
-# or run it directly (-w or --watch)
-dev-toolkit --watch
-```
-
-This will give you the following structure to work with:
-```
-src
-โโโ client
-โ โโโ app.js
-โ โโโ ...
-โโโ server
- โโโ ...
-```
-
-## Generate a static build
-```bash
-# Create `build`-folder with compiled files (-b or --build)
-dev-toolkit --build
-```
-- removes previous `build`-folder
-- automatically uses production-builds of React and Redux
-- allows for a [custom vendor-bundle](#define-what-modules-are-bundled-into-vendorjs)
-- extracts css from individual modules
-- hashes assets, including `jpg`, `png`, `gif` & `svg`-files
-
-### Verify build
-Verify if static build is working correctly.
-```bash
-# Runs a minimal server that serves the build folder (--static or --serve-static)
-dev-toolkit --serve-static
-```
-
-### Generate a static build with dynamic pages
-
-To make use of dynamic pages and components for making your app load faster use the extended build command.
-
-**For advanced users only**, [refer to this gist](https://gist.github.com/stoikerty/40a668e8fd4e2919034fd1eed2252bcb) for information on how to implement it.
-```bash
-# This will create an index-file for each dynamic route (-d --dynamic or --build --dynamic)
-dev-toolkit --build --dynamic
-```
-- html is pre-rendered and inserted into the body
-- creates multiple js-bundles, one for each dynamic page
-- each `index.html` contains a `script`-link to the `app` bundle and the page-bundle
-- scripts use `async` and `defer`-attributes as appropriate
-- each subsequent page can be pre-cached and loaded on demand
-
-## Setting up tests
-You'll need to import the webpack config for running tests, [refer to this gist](https://gist.github.com/stoikerty/a202280147910b63a20e167dc4778fb8) for the setup. You'll be able to write your tests in ES2015, just like the rest of your app. Single tests can also be run in a watch-mode with the `npm run test-single`-command.
-
-## Use server with server-side rendering
-
-You can use your project as an universal/isomorphic server-side-rendered app.kindly supported by BrowserStack .
diff --git a/Readme.md b/Readme.md
new file mode 100644
index 00000000..d1a9e138
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,85 @@
+dev-toolkit
+
+Jump-start your react-powered Universal AppDesigned for Veterans
+
+react-powered Web App with minimum distractions.
-
-
-
-* [Getting Started](#getting-started) โค Installation, folder structure.
-* [Using images & files](#using-images--files) โค Import anything or use static files.
-* [Making the most of CSS](making-the-most-of-css) โค CSS-modules, Autoprefixer...
-* [Linting your files](#linting-your-files) โค With hot-reload & a useful overlay.
-* [Build & deploy](#build--deploy) โค Move your app into production.
-* [Using a test-framework](#using-a-test-framework) โค Use the default... or not.
-* [Extending your app](#extending-your-app) โค You can, but be aware of the risks.
-
-
-
-
-* [Contributing](#contributing)
-* [List of available commands](#list-of-available-commands)
-* [Specifications](#specifications) โค Main features, Default packages & compatibility.
-* [Changelog](#changelog)
-
-## Getting Started
-### Installation
-### Initial project structure
-
-## Using images & files
-### Importing in javascript
-### Using the `public-files` folder
-
-## Linting your files
-### Workflow with watch-command
-### Editor configuration
-
-## Build & deploy
-### Generating a `build` folder with all files
-#### A simple build
-#### Dynamic Pages backed by server-rendering
-### Using a javascript server
-
-## Extending your app
-### The toolkit config
-### Environment Variables
-### Extending Webpack & Babel
-#### The Risks
-#### Custom Webpack Config
-#### Custom Babel Config
-
-## Using a test-framework
-### Adding tests to your app
-### Replacing the default test-suite
-
-## Contributing
-### Acknowledgements
-### Alternatives
-
-## List of available commands
-
-## Specifications
-### Main features
-### Default packages after `dev-toolkit --init`
-### Compatiblity
-
-## Changelog
-
----
-
-# Notes / TODO
-
-Goals & Purpose:
-- fast to setup
-- run multiple apps using the same underlying principles
-- as little configuration as necessary
-- powerful enough to run production-scale apps
-- defer testing and additional setup to app
-
-Very suitable for;
-- Intermediary to advanced users
-- Creating a single-page-app from scratch
-- Migrating an old server to javascript-backed splash-page(s)
-
-Not quite suitable for:
-- Learning React as a Beginner
-- Creating small snippets of code to use in existing app
-
-TODO:
-- add script for build
-- add script for watch
-- add script for publish?
-- move readme for toolkit to root, check urls
-- change homepage urls in package.json
-- publish both packages
-
-Additional TODO for better docs with animated clips:
-- gif for starting a project
-- gif for when one creates a syntax/eslint error
-- gif for testing with watch command
-- gif for generating dynamic pages
-
-Necessities:
-- install all dependencies for all packages at once
-- build & watch all packages at once
-- build each package individually on `npm publish` of a package
diff --git a/packages/dev-toolkit/README.md b/packages/dev-toolkit/README.md
deleted file mode 100644
index 8bcdfb9c..00000000
--- a/packages/dev-toolkit/README.md
+++ /dev/null
@@ -1,185 +0,0 @@
-
-
-
- Jump-start your react-powered Web App.dynamic pagessass & css-modulesserver-renderinghot-reload
-
-## Create a new project
-```bash
-# install & initialize new app
-npm install -g dev-toolkit
-dev-toolkit --init my_app
-cd my_app
-```
-```
-# run it via npm scripts
-npm run dev
-# or run it directly (-w or --watch)
-dev-toolkit --watch
-```
-
-This will give you the following structure to work with:
-```
-src
-โโโ client
-โ โโโ app.js
-โ โโโ ...
-โโโ server
- โโโ ...
-```
-
-## Generate a static build
-```bash
-# Create `build`-folder with compiled files (-b or --build)
-dev-toolkit --build
-```
-- removes previous `build`-folder
-- automatically uses production-builds of React and Redux
-- allows for a [custom vendor-bundle](#define-what-modules-are-bundled-into-vendorjs)
-- extracts css from individual modules
-- hashes assets, including `jpg`, `png`, `gif` & `svg`-files
-
-### Verify build
-Verify if static build is working correctly.
-```bash
-# Runs a minimal server that serves the build folder (--static or --serve-static)
-dev-toolkit --serve-static
-```
-
-### Generate a static build with dynamic pages
-
-To make use of dynamic pages and components for making your app load faster use the extended build command.
-
-**For advanced users only**, [refer to this gist](https://gist.github.com/stoikerty/40a668e8fd4e2919034fd1eed2252bcb) for information on how to implement it.
-```bash
-# This will create an index-file for each dynamic route (-d --dynamic or --build --dynamic)
-dev-toolkit --build --dynamic
-```
-- html is pre-rendered and inserted into the body
-- creates multiple js-bundles, one for each dynamic page
-- each `index.html` contains a `script`-link to the `app` bundle and the page-bundle
-- scripts use `async` and `defer`-attributes as appropriate
-- each subsequent page can be pre-cached and loaded on demand
-
-## Setting up tests
-You'll need to import the webpack config for running tests, [refer to this gist](https://gist.github.com/stoikerty/a202280147910b63a20e167dc4778fb8) for the setup. You'll be able to write your tests in ES2015, just like the rest of your app. Single tests can also be run in a watch-mode with the `npm run test-single`-command.
-
-## Use server with server-side rendering
-
-You can use your project as an universal/isomorphic server-side-rendered app.kindly supported by BrowserStack .
diff --git a/packages/dev-toolkit/Readme.md b/packages/dev-toolkit/Readme.md
new file mode 100644
index 00000000..1eb5cb16
--- /dev/null
+++ b/packages/dev-toolkit/Readme.md
@@ -0,0 +1,79 @@
+dev-toolkit
+
+Jump-start your react-powered Universal AppDesigned for Veterans
+
+ [options]')
+ .command({
+ command: 'init',
+ aliases: ['init', 'i'],
+ desc: 'Initializes a new project',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ projectName: argv._[1],
+ template: argv.template || false,
+ silent: argv.silent || false,
+ skipComments: argv.skipComments || argv['skip-comments'] || false,
+ },
+ command: 'init',
+ message: 'Initializing a new project',
+ }),
+ })
+ .command({
+ command: 'build',
+ aliases: ['build', 'b'],
+ desc: 'Generates a static build',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ silent: argv.silent || false,
+ skipPreRender:
+ argv.skipPreRender || argv['skip-prerender'] || argv['skip-pre-render'] || false,
+ },
+ command: 'build',
+ message: 'Generating a static build',
+ }),
+ })
+ .command({
+ command: 'version',
+ aliases: ['version', 'v', '-v'],
+ desc: 'Outputs current version number',
+ handler: () =>
+ runCommand({
+ options: {
+ programmatic: false,
+ },
+ command: 'version',
+ message: 'Output current version number',
+ skipPrimaryLog: true,
+ }),
+ })
+ .command({
+ command: 'watch',
+ aliases: ['watch', 'w'],
+ desc: 'Watches files for development',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ silent: argv.silent || false,
+ },
+ command: 'watch',
+ message: 'Watching files for development',
+ }),
+ })
+ .command({
+ command: 'serve',
+ aliases: ['serve', 's'],
+ desc: 'Serves the app',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ silent: argv.silent || false,
+ },
+ command: 'serve',
+ message: 'Serving app with `start`-method',
+ }),
+ })
+ .command({
+ command: 'preRender',
+ aliases: ['preRender', 'prerender', 'pre-render', 'p'],
+ desc: 'preRender the app',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ silent: argv.silent || false,
+ },
+ command: 'preRender',
+ message: 'Pre-rendering app with `preRender`-method',
+ }),
+ })
+ .command({
+ command: 'bootstrap',
+ aliases: ['bootstrap'],
+ desc:
+ 'Bootstraps a file with defined babel & nodeHooks configuration and makes dev-toolkit settings available for import',
+ handler: argv =>
+ runCommand({
+ options: {
+ programmatic: false,
+ silent: argv.silent || false,
+ file: argv.file || '',
+ },
+ command: 'bootstrap',
+ message: 'Bootstrap with universal configuration & dev-toolkit settings',
+ }),
+ })
+ .help().argv;
+
+ yargs.parse(cmdArgs);
+};
+
+// Run toolkit immediately using yargs if we're not testing it
+if (!process.env.TOOLKIT_TEST) {
+ devToolkit({ cmdArgs: process.argv });
+}
+
+export default devToolkit;
diff --git a/packages/dev-toolkit/src/bin/index.spec.js b/packages/dev-toolkit/src/bin/index.spec.js
new file mode 100644
index 00000000..0b64f4c2
--- /dev/null
+++ b/packages/dev-toolkit/src/bin/index.spec.js
@@ -0,0 +1,109 @@
+import { expect } from 'chai';
+import yargs from 'yargs';
+
+import sandbox from 'dist/utilities/testHelpers/sandbox';
+
+import { devToolkit } from './index';
+
+describe('dev-toolkit', () => {
+ describe('outputs current version', () => {
+ it('when given `-v` argument', () => {
+ sandbox.spy(console, 'log');
+ devToolkit({ cmdArgs: ['dev-toolkit', '-v'], runCommand: () => {} });
+ expect(console.log.calledOnce).to.equal(true);
+ });
+ it('when given `--version` argument', () => {
+ sandbox.spy(console, 'log');
+ devToolkit({ cmdArgs: ['dev-toolkit', '--version'], runCommand: () => {} });
+ expect(console.log.calledOnce).to.equal(true);
+ });
+ });
+
+ describe('runs the watch script', () => {
+ const processedArgs = yargs.alias('w', 'watch').parse(['dev-toolkit', '-w']);
+ const expectedOutput = {
+ script: 'watch',
+ message: 'Watching files for development',
+ args: [processedArgs.watch],
+ };
+
+ it('when given `-w` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '-w'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ it('when given `--watch` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '--watch'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ });
+
+ describe('runs the serve script', () => {
+ const processedArgs = yargs.alias('s', 'serve').parse(['dev-toolkit', '-s']);
+ const expectedOutput = {
+ script: 'serve',
+ message: 'Watching files for development',
+ args: [processedArgs.serve],
+ };
+
+ it('when given `-s` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '-s'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ it('when given `--serve` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '--serve'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ });
+
+ describe('runs the serveStatic script', () => {
+ const processedArgs = yargs.alias('static', 'serve-static').parse(['dev-toolkit', '--static']);
+ const expectedOutput = {
+ script: 'serveStatic',
+ message: 'Serving the /build folder using a minimal server',
+ args: [processedArgs['serve-static']],
+ };
+
+ it('when given `--static` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '--static'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ it('when given `--serve-static` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '--serve-static'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ });
+
+ describe('runs the init script', () => {
+ const processedArgs = yargs.alias('i', 'init').parse(['dev-toolkit', '-i']);
+ const expectedOutput = {
+ script: 'init',
+ message: 'Initializing new project',
+ args: [processedArgs.init],
+ };
+
+ it('when given `-i` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '-i'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ it('when given `--init` argument', () => {
+ const runCommand = sandbox.spy();
+
+ devToolkit({ cmdArgs: ['dev-toolkit', '--init'], runCommand });
+ expect(runCommand.calledWith(expectedOutput)).to.equal(true);
+ });
+ });
+});
diff --git a/packages/dev-toolkit/src/build.js b/packages/dev-toolkit/src/build.js
deleted file mode 100644
index e626e13d..00000000
--- a/packages/dev-toolkit/src/build.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import rimraf from 'rimraf';
-import webpack from 'webpack';
-import fileExists from 'file-exists';
-import DynamicPages from 'dynamic-pages';
-
-import debug from './utils/debug';
-import config from './webpack/config';
-import { scriptOptions, PATHS } from './_userSettings';
-
-// delete previous build folder & compile all files necessary for serving
-rimraf(PATHS.buildFolder, (error) => {
- if (error) {
- console.log(error);
- }
-
- if (scriptOptions.dynamic) {
- // Use similar setup as for a test-environment (but with NODE_ENV set to `production`)
- // eslint-disable-next-line global-require
- require('./utils/testHelpers/setupDOM');
-
- debug('dynamicRender.js exists?', fileExists(PATHS.dynamicRender));
- // The external render file needs to be imported before compilation, in case any stubs exist
- DynamicPages.importDynamicRenderFile({ dynamicRenderFile: PATHS.dynamicRenderFile });
-
- // eslint-disable-next-line global-require
- require('./utils/testHelpers/setupClientApp');
- }
-
- const compiler = webpack(config);
- compiler.run((err) => {
- if (err) {
- console.log(err);
- }
-
- if (scriptOptions.dynamic) {
- // Take index.html file and create an html-file for each route
- DynamicPages.generatePages({
- publicPath: PATHS.publicPath,
- buildFolder: PATHS.buildFolder,
- manifestFile: PATHS.manifestFile,
- doneCallback: () => console.log('\n โญ๏ธ Your build with dynamic pages is ready โญ๏ธ'),
- });
- } else {
- console.log(' โญ๏ธ Your build is ready โญ๏ธ');
- }
- });
-});
diff --git a/packages/dev-toolkit/src/commands/bootstrap.js b/packages/dev-toolkit/src/commands/bootstrap.js
new file mode 100644
index 00000000..d95fff82
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/bootstrap.js
@@ -0,0 +1,23 @@
+import path from 'path';
+import { pathExistsSync } from 'fs-extra';
+
+import { projectRoot } from '../webpack/projectSettings';
+import { help, log, bootstrap } from '../utilities';
+
+bootstrap({ skipServerImport: true }).then(() => {
+ // eslint-disable-next-line no-underscore-dangle
+ const file = global.__devToolkitCommandOptions.file || false;
+
+ if (file && typeof file === 'string') {
+ log({ message: 'Import your fileโฆ\n', useSeparator: true });
+ const pathName = path.resolve(projectRoot, file);
+
+ import(pathName).catch(error => {
+ help({
+ displayedWhen: file && !pathExistsSync(pathName),
+ warning: `File '${file}' doesn't exist.`,
+ error,
+ });
+ });
+ }
+});
diff --git a/packages/dev-toolkit/src/commands/build.js b/packages/dev-toolkit/src/commands/build.js
new file mode 100644
index 00000000..5f4545db
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/build.js
@@ -0,0 +1,49 @@
+import webpack from 'webpack';
+import { emptyDir } from 'fs-extra';
+
+import { buildFolder } from '../webpack/projectSettings';
+import generateConfig from '../webpack/config';
+import { log, bootstrap, preRender } from '../utilities';
+
+// eslint-disable-next-line no-underscore-dangle
+const skipPreRender = global.__devToolkitCommandOptions.skipPreRender || false;
+
+bootstrap().then(({ server, userSettings }) => {
+ const showSuccessMessage = () =>
+ log({ message: '\nโญ๏ธ Your build is ready โญ๏ธ\n', type: 'success' });
+
+ log({ message: 'Deleting previous build folderโฆ' });
+
+ // delete previous build folder & compile all files necessary for serving
+ emptyDir(buildFolder, error => {
+ log({ error });
+
+ let webpackAssets = {};
+ const config = generateConfig({
+ creatingBuild: true,
+ getWebpackAssets: assets => {
+ webpackAssets = assets;
+ return JSON.stringify(assets);
+ },
+ userSettings,
+ });
+
+ log({ message: 'Start Webpack & compile assetsโฆ' });
+
+ // Compile with middleware for hot-reloading
+ const compiler = webpack(config, webpackError => {
+ log({ error: webpackError });
+
+ compiler.run(compilerError => {
+ log({ error: compilerError });
+ log({ message: '\nโจ Finished compiling Assets.\n', type: 'success' });
+
+ if (userSettings.devToolkit.usePreRender && !skipPreRender) {
+ preRender({ server, webpackAssets, buildFolder }).then(showSuccessMessage);
+ } else {
+ showSuccessMessage();
+ }
+ });
+ });
+ });
+});
diff --git a/packages/dev-toolkit/src/commands/init.js b/packages/dev-toolkit/src/commands/init.js
new file mode 100644
index 00000000..bd6e43e0
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/init.js
@@ -0,0 +1,90 @@
+import { statSync, readdirSync } from 'fs';
+import { ensureDirSync, copySync, writeJson } from 'fs-extra';
+import { white } from 'chalk';
+import path from 'path';
+import spawn from 'cross-spawn';
+
+import {
+ generatedTemplates,
+ generatedTemplatesWithoutComments,
+ defaultTemplate,
+} from '../webpack/projectSettings';
+import { log, spinner } from '../utilities';
+
+/* eslint-disable no-underscore-dangle */
+const template = global.__devToolkitCommandOptions.template || '';
+const projectName = global.__devToolkitCommandOptions.projectName || 'my_app';
+const skipComments = global.__devToolkitCommandOptions.skipComments || false;
+
+const getTemplatesList = ({ folder }) => {
+ const onlyDirectories = file => statSync(path.join(folder, file)).isDirectory();
+ return readdirSync(generatedTemplates).filter(onlyDirectories);
+};
+const templatesList = getTemplatesList({ folder: generatedTemplates });
+const templateExists = templatesList.indexOf(template) > -1;
+const templateName = templateExists ? template : defaultTemplate;
+const isDefaultTemplate = templateName === defaultTemplate;
+
+if (template && !templateExists) {
+ log({ type: 'warning', message: `template files for '${template}' don't exist.` });
+ log({ message: 'You can use one of the following templates:' });
+ templatesList.forEach(name => log({ message: `โข ${name}` }));
+ log({
+ message: `\nProject will be initialized using default template files (${defaultTemplate}).`,
+ useSeparator: true,
+ });
+}
+
+const inputFolder = path.resolve(
+ skipComments ? generatedTemplatesWithoutComments : generatedTemplates,
+ templateName
+);
+const projectFolder = path.resolve(process.cwd(), projectName);
+
+ensureDirSync(projectFolder);
+copySync(inputFolder, projectFolder);
+
+const pkgPath = path.resolve(projectFolder, 'package.json');
+import(pkgPath).then(pkg => {
+ // Add name to generated project
+ writeJson(pkgPath, { ...pkg, name: projectName, description: projectName }, { spaces: 2 })
+ .then(() => {
+ log({ message: `Created project using ${white(templateName)} template in:` });
+ log({ message: `${projectFolder}\n` });
+
+ if (isDefaultTemplate) {
+ spinner.start({ message: `Installing NPM Dependencies for ${white(projectName)}` });
+ } else {
+ log({ message: `Installing NPM Dependencies for ${white(projectName)}โฆ\n` });
+ }
+
+ const spawnOptions = isDefaultTemplate
+ ? { cwd: projectFolder }
+ : {
+ cwd: projectFolder,
+ detached: true,
+ stdio: 'inherit',
+ };
+
+ spawn('npm', ['install'], spawnOptions).on('close', code => {
+ if (isDefaultTemplate) {
+ spinner.stop();
+ } else {
+ log({ message: ' ' });
+ }
+
+ if (code === 0) {
+ log({ type: 'success', message: `Dependencies for ${projectName} have been installed.` });
+ log({
+ message: `Get started by running \`${white(`cd ${projectName} && npm run dev`)}\``,
+ useSeparator: true,
+ });
+ } else {
+ log({ type: 'warning', message: `Failed to install Dependencies for ${projectName}.` });
+ }
+ });
+ })
+ .catch(error => {
+ log({ type: 'warning', message: `Failed create project with name ${projectName}.`, error });
+ });
+});
diff --git a/packages/dev-toolkit/src/commands/preRender.js b/packages/dev-toolkit/src/commands/preRender.js
new file mode 100644
index 00000000..24a00a32
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/preRender.js
@@ -0,0 +1,15 @@
+import { buildFolder } from '../webpack/projectSettings';
+import { log, bootstrap, getWebpackAssets, preRender } from '../utilities';
+
+bootstrap().then(({ server }) => {
+ log({ message: 'Starting your Server Appโฆ\n', useSeparator: true });
+ try {
+ getWebpackAssets().then(({ assets }) => {
+ preRender({ server, webpackAssets: assets, buildFolder }).then(() =>
+ log({ message: '\nโญ๏ธ PreRender finished โญ๏ธ\n', type: 'success' })
+ );
+ });
+ } catch (error) {
+ log({ message: 'Unable to preRender', error });
+ }
+});
diff --git a/packages/dev-toolkit/src/commands/serve.js b/packages/dev-toolkit/src/commands/serve.js
new file mode 100644
index 00000000..77e4d006
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/serve.js
@@ -0,0 +1,17 @@
+import { buildFolder } from '../webpack/projectSettings';
+import { help, log, bootstrap, getWebpackAssets } from '../utilities';
+
+bootstrap().then(({ server }) => {
+ log({ message: 'Starting your Server Appโฆ\n', useSeparator: true });
+ try {
+ getWebpackAssets().then(({ assets }) => server.start({ assets, buildFolder }));
+ } catch (error) {
+ help({
+ displayedWhen: server && typeof server.start !== 'function',
+ warning: 'Your server needs a `start`-method.',
+ instruction: 'Example: `start({ assets }) { this.express.listen(2000); }`',
+ link: '/dev-toolkit#custom-server',
+ error,
+ });
+ }
+});
diff --git a/packages/dev-toolkit/src/commands/version.js b/packages/dev-toolkit/src/commands/version.js
new file mode 100644
index 00000000..3e0f3b2e
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/version.js
@@ -0,0 +1,7 @@
+import chalk from 'chalk';
+
+import pkg from '../../package.json';
+import { log } from '../utilities';
+
+// Outputs current version number from `package.json`
+log({ message: `You are running ${chalk.green(`${pkg.name} v${pkg.version}`)}\n` });
diff --git a/packages/dev-toolkit/src/commands/watch.js b/packages/dev-toolkit/src/commands/watch.js
new file mode 100644
index 00000000..ea902b7f
--- /dev/null
+++ b/packages/dev-toolkit/src/commands/watch.js
@@ -0,0 +1,70 @@
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+
+import { buildFolder } from '../webpack/projectSettings';
+import generateConfig from '../webpack/config';
+import { help, log, bootstrap } from '../utilities';
+
+bootstrap().then(({ server, userSettings }) => {
+ let webpackAssets = {};
+ const config = generateConfig({
+ creatingBuild: false,
+ getWebpackAssets: assets => {
+ webpackAssets = assets;
+ return JSON.stringify(assets);
+ },
+ userSettings,
+ });
+
+ log({ message: 'Starting Webpackโฆ' });
+
+ // Compile with middleware for hot-reloading
+ const compiler = webpack({
+ ...config,
+ devtool: 'source-map',
+ entry: {
+ ...config.entry,
+ app: ['webpack-hot-middleware/client'].concat(config.entry.app),
+ },
+ });
+
+ log({ message: 'Compiling initial bundleโฆ\n' });
+
+ const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
+ noInfo: true,
+ publicPath: config.output.publicPath,
+ });
+ const webpackHotMiddlewareInstance = webpackHotMiddleware(compiler);
+
+ webpackDevMiddlewareInstance.waitUntilValid(() => {
+ log({ message: '\nโจ Initial compilation has finished.', type: 'success' });
+
+ log({ message: 'Attaching dev-middleware & hot-middlewareโฆ' });
+ try {
+ server.express.use(webpackDevMiddlewareInstance);
+ server.express.use(webpackHotMiddlewareInstance);
+ } catch (error) {
+ help({
+ displayedWhen: server && !server.express,
+ warning: 'Your server needs a `this.express` to be set for attaching webpack middleware.',
+ instruction: 'Example: `constructor() { this.express = express(); }`',
+ link: '/dev-toolkit#custom-server',
+ error,
+ });
+ }
+
+ log({ message: 'Starting your Server Appโฆ\n', useSeparator: true });
+ try {
+ server.start({ assets: webpackAssets, buildFolder });
+ } catch (error) {
+ help({
+ displayedWhen: server && typeof server.start !== 'function',
+ warning: 'Your server needs a `start`-method.',
+ instruction: 'Example: `start({ assets }) { this.express.listen(2000); }`',
+ link: '/dev-toolkit#custom-server',
+ error,
+ });
+ }
+ });
+});
diff --git a/packages/dev-toolkit/src/npmExport/dev-toolkit/index.js b/packages/dev-toolkit/src/npmExport/dev-toolkit/index.js
new file mode 100644
index 00000000..dcbda2ee
--- /dev/null
+++ b/packages/dev-toolkit/src/npmExport/dev-toolkit/index.js
@@ -0,0 +1,6 @@
+/* eslint-disable no-underscore-dangle */
+import { runCommand } from '../../utilities';
+
+export default ({ command, options }) => {
+ runCommand({ command, options, programmatic: true });
+};
diff --git a/packages/dev-toolkit/src/npmExport/dev-toolkit/settings.js b/packages/dev-toolkit/src/npmExport/dev-toolkit/settings.js
new file mode 100644
index 00000000..5e5f3473
--- /dev/null
+++ b/packages/dev-toolkit/src/npmExport/dev-toolkit/settings.js
@@ -0,0 +1,37 @@
+/* eslint-disable no-undef, no-underscore-dangle */
+
+// Shared settings between client and server.
+//
+// A global handed over by a webpack plugin allows us to retrieve environment variables.
+// eslint-disable-next-line no-undef
+export const creatingBuild = typeof devToolkitSettings !== typeof undefined;
+
+// Warn if the initial node-command wasn't spawned via the `dev-toolkit`-cli
+if (!creatingBuild && typeof global.__devToolkitSettings === typeof undefined) {
+ console.log(
+ '\nโ ๏ธ Could not get shared dev-toolkit settings. Are you using the `dev-toolkit`-cli?\n'
+ );
+}
+
+// Get Settings via Node global
+const devToolkitSettingsServer = !creatingBuild && global.__devToolkitSettings;
+
+// If we're not creating a build, we're server-rendering the client app.
+// Therefore we'll want to use `process.env` instead of the build settings.
+export const sharedEnvs = creatingBuild
+ ? devToolkitSettings.sharedEnvs
+ : devToolkitSettingsServer.sharedEnvs;
+
+// Make usePreRender setting available
+export const usePreRender = creatingBuild
+ ? devToolkitSettings.usePreRender
+ : devToolkitSettingsServer.usePreRender;
+
+// Assign booleans for each environment we might be in
+export const isProd = sharedEnvs.NODE_ENV === 'production';
+export const isDev = sharedEnvs.NODE_ENV === 'development';
+export const isTest = sharedEnvs.NODE_ENV === 'test';
+
+// Detect whether the client-app is being rendered on the client or on the server
+export const isServer = !creatingBuild && sharedEnvs.NODE_ENV !== 'test';
+export const isClient = !isServer;
diff --git a/packages/dev-toolkit/src/postinstall-prepare/copy-templates.js b/packages/dev-toolkit/src/postinstall-prepare/copy-templates.js
new file mode 100644
index 00000000..e440fb8e
--- /dev/null
+++ b/packages/dev-toolkit/src/postinstall-prepare/copy-templates.js
@@ -0,0 +1,61 @@
+import path from 'path';
+import { ensureDirSync, copySync, removeSync, readFile, outputFile } from 'fs-extra';
+import klawSync from 'klaw-sync';
+import decomment from 'decomment';
+
+import {
+ originalTemplates,
+ generatedTemplates,
+ generatedTemplatesWithoutComments,
+} from '../webpack/projectSettings';
+import { log } from '../utilities';
+
+log({
+ title: 'prepare',
+ message: 'Copy templates into dev-toolkit distribution',
+ useSeparator: true,
+});
+
+const ignoreDevFolders = item => item.indexOf('node_modules') < 0 && item.indexOf('build') < 0;
+
+const removeDevFiles = ({ directory }) => {
+ const devFiles = item => item && item.path && item.path.indexOf('package-lock') >= 0;
+ const allFiles = klawSync(directory, { nodir: true, filter: devFiles });
+ const allFilePaths = Object.keys(allFiles).map(item => allFiles[item].path);
+
+ allFilePaths.forEach(filePath => {
+ removeSync(filePath);
+ });
+};
+
+const removeCommentsFromJSFiles = ({ directory }) => {
+ const onlyJSFiles = item => item && item.path && path.extname(item.path) === '.js';
+ const allFiles = klawSync(directory, { nodir: true, filter: onlyJSFiles });
+ const allFilePaths = Object.keys(allFiles).map(item => allFiles[item].path);
+
+ allFilePaths.forEach(filePath => {
+ readFile(filePath, 'utf8')
+ .then(data => {
+ // Uncomment files as if they were plain text files (avoiding issues with jsx)
+ outputFile(filePath, decomment.text(data));
+ })
+ .catch(err => {
+ console.error(err);
+ });
+ });
+};
+
+log({ message: 'Copying templates into dist folder...' });
+removeSync(generatedTemplates);
+ensureDirSync(generatedTemplates);
+copySync(originalTemplates, generatedTemplates, { filter: ignoreDevFolders });
+removeDevFiles({ directory: generatedTemplates });
+
+log({ message: 'Creating an templates-folder in dist that has comments stripped out...' });
+removeSync(generatedTemplatesWithoutComments);
+ensureDirSync(generatedTemplatesWithoutComments);
+copySync(originalTemplates, generatedTemplatesWithoutComments, { filter: ignoreDevFolders });
+removeDevFiles({ directory: generatedTemplatesWithoutComments });
+removeCommentsFromJSFiles({ directory: generatedTemplatesWithoutComments });
+
+log({ message: 'Finished templates task\n', useSeparator: true });
diff --git a/packages/dev-toolkit/src/serve.js b/packages/dev-toolkit/src/serve.js
deleted file mode 100644
index 8c64f1ea..00000000
--- a/packages/dev-toolkit/src/serve.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import webpack from 'webpack';
-import path from 'path';
-
-import config from './webpack/config';
-import { rootForRequire } from './_userSettings';
-
-// compile all files necessary for serving
-const compiler = webpack(config);
-compiler.run((err, stats) => {
- // output what's happening within webpack
- console.log(stats.toString(config.stats));
- const message = '\n\n ๐ฐ Your build files are ready, starting Server ๐ช\n';
- console.log(message);
-
- // Use the express production server
- // eslint-disable-next-line global-require
- const ServerApp = require(path.join(rootForRequire, '/src/server/app')).default;
- const server = new ServerApp();
-
- // start the server
- server.start({ serveBuild: true });
-});
diff --git a/packages/dev-toolkit/src/serveStatic.js b/packages/dev-toolkit/src/serveStatic.js
deleted file mode 100644
index 065c47ce..00000000
--- a/packages/dev-toolkit/src/serveStatic.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import path from 'path';
-import express from 'express';
-import compression from 'compression';
-import bodyParser from 'body-parser';
-import errorHandler from 'errorhandler';
-import methodOverride from 'method-override';
-
-import { PATHS } from './_userSettings';
-
-class ServeStatic {
- constructor() {
- // server config
- this.hostname = process.env.HOST || 'localhost';
- this.port = process.env.PORT || 4000;
- this.publicDirectory = PATHS.buildFolder;
-
- // bind class methods
- this.start = this.start.bind(this);
-
- // Create express server instance & initialize
- this.express = express();
- this.start();
- }
-
- start() {
- this.express.get('/', (req, res) => {
- res.sendFile(path.join(this.publicDirectory, '/index.html'));
- });
-
- this.express.use(compression());
- this.express.use(methodOverride());
- this.express.use(bodyParser.json());
- this.express.use(bodyParser.urlencoded({ extended: true }));
- this.express.use(express.static(this.publicDirectory));
- this.express.use(errorHandler({ dumpExceptions: true, showStack: true }));
-
- console.log(`\n==> ๐ Listening on http://${this.hostname}:${this.port}\n`);
-
- this.express.listen(this.port, this.hostname);
- }
-}
-
-export default new ServeStatic();
diff --git a/packages/dev-toolkit/src/src/settings.js b/packages/dev-toolkit/src/src/settings.js
deleted file mode 100644
index 5d87014f..00000000
--- a/packages/dev-toolkit/src/src/settings.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// Detect whether the app is being rendered on the client or on the server
-const creatingBuild = typeof buildSettings !== typeof undefined; // eslint-disable-line no-undef
-
-export const env = creatingBuild ? buildSettings.env : process.env; // eslint-disable-line no-undef
-export const isDev = env.NODE_ENV === 'development';
-export const isServer = !creatingBuild && env.NODE_ENV !== 'test';
-export const isClient = !isServer;
-
-export default {
- env,
- isDev,
- isServer,
- isClient,
-};
diff --git a/packages/dev-toolkit/src/utilities/bootstrap/defineGlobalDevToolkitSettings.js b/packages/dev-toolkit/src/utilities/bootstrap/defineGlobalDevToolkitSettings.js
new file mode 100644
index 00000000..ea8a9bce
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/bootstrap/defineGlobalDevToolkitSettings.js
@@ -0,0 +1,5 @@
+// Make sharedEnv's globally available for universal import of `dev-toolkit/settings` to work
+export default ({ settings }) => {
+ // eslint-disable-next-line no-underscore-dangle
+ global.__devToolkitSettings = settings;
+};
diff --git a/packages/dev-toolkit/src/utilities/bootstrap/extractedSharedEnvs.js b/packages/dev-toolkit/src/utilities/bootstrap/extractedSharedEnvs.js
new file mode 100644
index 00000000..533c6fc6
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/bootstrap/extractedSharedEnvs.js
@@ -0,0 +1,4 @@
+export default ({ withEnvs, fromEnvs }) =>
+ Object.keys(fromEnvs)
+ .filter(key => withEnvs.indexOf(key) !== -1)
+ .reduce((obj, key) => ({ [key]: fromEnvs[key], ...obj }), {});
diff --git a/packages/dev-toolkit/src/utilities/bootstrap/getUserSettings.js b/packages/dev-toolkit/src/utilities/bootstrap/getUserSettings.js
new file mode 100644
index 00000000..e1d785be
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/bootstrap/getUserSettings.js
@@ -0,0 +1,54 @@
+import { pathExistsSync } from 'fs-extra';
+
+import log from '../log';
+import { userSettingsPath } from '../../webpack/projectSettings';
+import defineGlobalDevToolkitSettings from './defineGlobalDevToolkitSettings';
+import extractedSharedEnvs from './extractedSharedEnvs';
+
+export default () => {
+ // 1) Get User settings from a specified file
+ // ----
+ const settingsExist = pathExistsSync(userSettingsPath);
+ if (settingsExist) log({ message: 'Using settings from `dev-toolkit.config.js`' });
+ // We're expecting a classic Node.js module declared with `module.exports`
+ // NOTE: Using `require` here is necessary so that using settings with an import like
+ // `import { sharedEnvs} from 'dev-toolkit/settings'` doesn't become an async dependency
+ // eslint-disable-next-line import/no-dynamic-require, global-require
+ const userSettings = settingsExist ? require(userSettingsPath) : {};
+
+ // 2) Format settings & generate a safe final version for consumption via node and webpack
+ // ----
+ const webpack = userSettings.webpack || {};
+ const devToolkit = userSettings.devToolkit || {};
+ const sharedEnvs = {
+ // extract only explicitly declared environment variables from `process.env`
+ ...extractedSharedEnvs({
+ withEnvs:
+ devToolkit.sharedEnvs && Array.isArray(devToolkit.sharedEnvs) ? devToolkit.sharedEnvs : [],
+ fromEnvs: process.env,
+ }),
+ // make NODE_ENV always available
+ NODE_ENV: process.env.NODE_ENV,
+ };
+ const finalSettings = {
+ webpack: {
+ loaders:
+ webpack.loaders && typeof webpack.loaders === 'function' ? webpack.loaders : () => [],
+ plugins:
+ webpack.plugins && typeof webpack.plugins === 'function' ? webpack.plugins : () => [],
+ customize:
+ webpack.customize && typeof webpack.customize === 'function'
+ ? webpack.customize
+ : config => config,
+ },
+ devToolkit: {
+ usePreRender: typeof devToolkit.usePreRender === 'boolean' ? devToolkit.usePreRender : true,
+ sharedEnvs,
+ },
+ };
+
+ // 3) Define settings in Node so we can use `dev-toolkit/settings` both on the client & server
+ // ----
+ defineGlobalDevToolkitSettings({ settings: finalSettings.devToolkit });
+ return finalSettings;
+};
diff --git a/packages/dev-toolkit/src/utilities/bootstrap/importServerApp.js b/packages/dev-toolkit/src/utilities/bootstrap/importServerApp.js
new file mode 100644
index 00000000..a6a0a491
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/bootstrap/importServerApp.js
@@ -0,0 +1,24 @@
+import { pathExistsSync } from 'fs-extra';
+
+import log from '../log';
+import help from '../help';
+import { serverAppEntryPoint } from '../../webpack/projectSettings';
+
+export default () =>
+ new Promise(resolve => {
+ log({ message: 'Importing Server Appโฆ' });
+ import(serverAppEntryPoint)
+ .then(module => {
+ const server = module.default;
+ resolve({ server });
+ })
+ .catch(error => {
+ help({
+ displayedWhen: !pathExistsSync(serverAppEntryPoint),
+ warning: 'You need a server app entry point.',
+ instruction: 'Do you have the file `src/server/index.js`?',
+ link: '/dev-toolkit#custom-server',
+ error,
+ });
+ });
+ });
diff --git a/packages/dev-toolkit/src/utilities/bootstrap/index.js b/packages/dev-toolkit/src/utilities/bootstrap/index.js
new file mode 100644
index 00000000..c19448ab
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/bootstrap/index.js
@@ -0,0 +1,16 @@
+import getUserSettings from './getUserSettings';
+import importServerApp from './importServerApp';
+
+export default ({ skipServerImport } = { skipServerImport: false }) => {
+ const userSettings = getUserSettings();
+
+ return new Promise((resolve, reject) => {
+ if (skipServerImport) {
+ resolve({ userSettings });
+ } else {
+ importServerApp()
+ .then(({ server }) => resolve({ server, userSettings }))
+ .catch(reject);
+ }
+ });
+};
diff --git a/packages/dev-toolkit/src/utilities/getWebpackAssets.js b/packages/dev-toolkit/src/utilities/getWebpackAssets.js
new file mode 100644
index 00000000..edbe82d1
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/getWebpackAssets.js
@@ -0,0 +1,20 @@
+import { pathExistsSync } from 'fs-extra';
+
+import log from './log';
+import { assetsManifestFile } from '../webpack/projectSettings';
+
+export default () =>
+ new Promise(resolve => {
+ if (pathExistsSync(assetsManifestFile)) {
+ import(assetsManifestFile)
+ .then(json => {
+ resolve({ assets: json });
+ })
+ .catch(error => {
+ log({ message: "Couldn't read `assets-manifest.json`", error });
+ });
+ } else {
+ log({ message: '`assets-manifest.json` not found. ' });
+ resolve({ assets: {} });
+ }
+ });
diff --git a/packages/dev-toolkit/src/utilities/help.js b/packages/dev-toolkit/src/utilities/help.js
new file mode 100644
index 00000000..4a6ab2a7
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/help.js
@@ -0,0 +1,21 @@
+import log from './log';
+
+export default ({ displayedWhen, warning, instruction, link, error }) => {
+ if (displayedWhen) {
+ log({ message: warning, type: 'warning' });
+ if (instruction) {
+ log({ message: instruction, type: 'success' });
+ }
+ if (link) {
+ // TODO: add once there is more documentation
+ // log({ message: `see: https://github.com/stoikerty${link}\n` });
+ }
+ if (error) {
+ log({ error });
+ }
+
+ process.exit();
+ } else {
+ log({ error });
+ }
+};
diff --git a/packages/dev-toolkit/src/utilities/index.js b/packages/dev-toolkit/src/utilities/index.js
new file mode 100644
index 00000000..ec229bf9
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/index.js
@@ -0,0 +1,7 @@
+export { default as runCommand } from './runCommand';
+export { default as log } from './log';
+export { default as help } from './help';
+export { default as bootstrap } from './bootstrap';
+export { default as getWebpackAssets } from './getWebpackAssets';
+export { default as preRender } from './preRender';
+export { default as spinner } from './spinner';
diff --git a/packages/dev-toolkit/src/utilities/log/error.js b/packages/dev-toolkit/src/utilities/log/error.js
new file mode 100644
index 00000000..7604a194
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/log/error.js
@@ -0,0 +1,8 @@
+import chalk from 'chalk';
+
+export default ({ error }) => {
+ if (error) {
+ const errorType = /^.*(Error: )/gi;
+ console.log(`${chalk.red(error.stack.match(errorType))}${error.stack.replace(errorType, '')}`);
+ }
+};
diff --git a/packages/dev-toolkit/src/utilities/log/index.js b/packages/dev-toolkit/src/utilities/log/index.js
new file mode 100644
index 00000000..cd7984fc
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/log/index.js
@@ -0,0 +1,20 @@
+import logMessage from './message';
+import logError from './error';
+
+export default ({ message, error, type, title, useSeparator }) => {
+ /* eslint-disable no-underscore-dangle */
+ const silent =
+ (global.__devToolkitCommandOptions && global.__devToolkitCommandOptions.silent) || false;
+
+ // Silence out any logs if necessary
+ if (!silent) {
+ if (message) {
+ logMessage({ message, type, title, useSeparator });
+ }
+ }
+
+ // Keep logging errors though
+ if (error) {
+ logError({ error });
+ }
+};
diff --git a/packages/dev-toolkit/src/utilities/log/message.js b/packages/dev-toolkit/src/utilities/log/message.js
new file mode 100644
index 00000000..b0f0a902
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/log/message.js
@@ -0,0 +1,32 @@
+import chalk from 'chalk';
+import stringLength from 'string-length';
+
+export default ({ message, type, title, useSeparator }) => {
+ const hasLinebreakAtEnd = message.lastIndexOf('\n') === message.length - 1;
+ let outputMessage = hasLinebreakAtEnd ? message.substring(0, message.lastIndexOf('\n')) : message;
+
+ switch (type) {
+ case 'success':
+ outputMessage = chalk.green(outputMessage);
+ break;
+ case 'warning':
+ outputMessage = chalk.yellow(`โ ๏ธ ${outputMessage}`);
+ break;
+ default:
+ if (title) {
+ outputMessage = `${chalk.magenta(`\n[ ${title} ]`)} ${chalk.grey(`- ${outputMessage}`)}`;
+ } else {
+ outputMessage = chalk.grey(outputMessage);
+ }
+ }
+
+ if (useSeparator) {
+ console.log(outputMessage);
+ console.log(
+ chalk.grey('ยท'.repeat(stringLength(outputMessage) + (hasLinebreakAtEnd ? 1 : 0))),
+ hasLinebreakAtEnd ? '\n' : ''
+ );
+ } else {
+ console.log(outputMessage, hasLinebreakAtEnd ? '\n' : '');
+ }
+};
diff --git a/packages/dev-toolkit/src/utilities/preRender.js b/packages/dev-toolkit/src/utilities/preRender.js
new file mode 100644
index 00000000..2b2b3f9d
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/preRender.js
@@ -0,0 +1,23 @@
+import help from './help';
+import log from './log';
+
+export default ({ server, webpackAssets, buildFolder }) =>
+ new Promise(resolve => {
+ log({ message: 'Rendering html using Server Appโฆ ', useSeparator: true });
+ help({
+ displayedWhen: server && typeof server.preRender !== 'function',
+ warning: 'Your server needs a `preRender`-method to create a build.',
+ instruction:
+ 'Example: `preRender({ assets, buildFolder }) { return new Promise(() => { ... }); }`',
+ link: '/dev-toolkit#custom-server',
+ });
+ const renderPromise = server.preRender({ assets: webpackAssets, buildFolder });
+ help({
+ displayedWhen: typeof renderPromise.then !== 'function',
+ warning: "The server `preRender`-method must return a Promise to say it's finished.",
+ instruction:
+ 'Example: `preRender({ assets, buildFolder }) { return new Promise(() => { ... }); }`',
+ link: '/dev-toolkit#custom-server',
+ });
+ renderPromise.then(resolve).catch(buildError => log({ error: buildError }));
+ });
diff --git a/packages/dev-toolkit/src/utilities/runCommand.js b/packages/dev-toolkit/src/utilities/runCommand.js
new file mode 100644
index 00000000..55d46c23
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/runCommand.js
@@ -0,0 +1,28 @@
+/* eslint-disable no-underscore-dangle */
+import path from 'path';
+import babelRunner from 'babel-runner';
+
+import { log } from '../utilities';
+
+export default ({ command, message, options, programmatic, skipPrimaryLog }) => {
+ // Pass options down to specific command
+ global.__devToolkitCommandOptions = options || {};
+
+ // Display message to user, making it clear what's going on
+ log({
+ title: programmatic ? 'dev-toolkit' : command,
+ message: programmatic ? `Running command \`${command}\`` : message,
+ useSeparator: true,
+ });
+
+ if (!skipPrimaryLog) {
+ log({ message: 'Adding universal configurationโฆ' });
+ }
+ try {
+ babelRunner({
+ fileToRun: path.resolve(__dirname, `../commands/${command}`),
+ });
+ } catch (error) {
+ log({ error });
+ }
+};
diff --git a/packages/dev-toolkit/src/utilities/spinner.js b/packages/dev-toolkit/src/utilities/spinner.js
new file mode 100644
index 00000000..bc1dc5d9
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/spinner.js
@@ -0,0 +1,48 @@
+import ora from 'ora';
+import { grey, blue, magenta, green } from 'chalk';
+
+export default new class {
+ constructor() {
+ this.spinner = ora({
+ text: grey('Loading'),
+ spinner: {
+ interval: 130,
+ frames: [
+ grey('ยท') + blue('ยท') + grey(' ') + grey(' '),
+ grey(' ') + grey('ยท') + blue('ยท') + grey(' '),
+ grey(' ') + grey(' ') + grey('ยท') + blue('ยท'),
+ grey(' ') + grey(' ') + grey(' ') + blue('โข'),
+ grey(' ') + grey(' ') + blue('ยท') + grey('ยท'),
+ grey(' ') + blue('ยท') + grey('ยท') + grey(' '),
+ blue('ยท') + grey('ยท') + grey(' ') + grey(' '),
+ blue('โข') + grey(' ') + grey(' ') + grey(' '),
+
+ grey('ยท') + magenta('ยท') + grey(' ') + grey(' '),
+ grey(' ') + grey('ยท') + magenta('ยท') + grey(' '),
+ grey(' ') + grey(' ') + grey('ยท') + magenta('ยท'),
+ grey(' ') + grey(' ') + grey(' ') + magenta('โข'),
+ grey(' ') + grey(' ') + magenta('ยท') + grey('ยท'),
+ grey(' ') + magenta('ยท') + grey('ยท') + grey(' '),
+ magenta('ยท') + grey('ยท') + grey(' ') + grey(' '),
+ magenta('โข') + grey(' ') + grey(' ') + grey(' '),
+
+ grey('ยท') + green('ยท') + grey(' ') + grey(' '),
+ grey(' ') + grey('ยท') + green('ยท') + grey(' '),
+ grey(' ') + grey(' ') + grey('ยท') + green('ยท'),
+ grey(' ') + grey(' ') + grey(' ') + green('โข'),
+ grey(' ') + grey(' ') + green('ยท') + grey('ยท'),
+ grey(' ') + green('ยท') + grey('ยท') + grey(' '),
+ green('ยท') + grey('ยท') + grey(' ') + grey(' '),
+ green('โข') + grey(' ') + grey(' ') + grey(' '),
+ ],
+ },
+ });
+ }
+
+ start({ message }) {
+ this.spinner.start(grey(message));
+ }
+ stop() {
+ this.spinner.stop();
+ }
+}();
diff --git a/packages/dev-toolkit/src/utilities/testHelpers/sandbox.js b/packages/dev-toolkit/src/utilities/testHelpers/sandbox.js
new file mode 100644
index 00000000..805dbc47
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/testHelpers/sandbox.js
@@ -0,0 +1,66 @@
+import sinon from 'sinon';
+
+// This class will serve as our proxy for creating and restoring each sandbox
+// We can either use the sandbox globally or only within a specified `describe`-block
+class Sandbox {
+ constructor(options = { global: false }) {
+ this.instance = null;
+ this.useSandbox = false;
+ this.useGlobalSandbox = options.global;
+ }
+
+ use(beforeCallback, afterCallback) {
+ beforeCallback(() => {
+ this.useSandbox = true;
+ });
+ afterCallback(() => {
+ this.useSandbox = false;
+ });
+ }
+ create() {
+ if (this.useGlobalSandbox || this.useSandbox) {
+ this.instance = sinon.sandbox.create();
+ }
+ }
+ restore() {
+ if (this.useGlobalSandbox || this.useSandbox) {
+ this.instance.restore();
+ }
+ }
+
+ // Replicate sinon's `sandbox` methods
+ // see: http://sinonjs.org/docs/#sinon-sandbox
+ spy(...args) {
+ return this.instance && this.instance.spy(...args);
+ }
+ stub(...args) {
+ return this.instance && this.instance.stub(...args);
+ }
+ mock(...args) {
+ return this.instance && this.instance.mock(...args);
+ }
+ useFakeTimers(...args) {
+ return this.instance && this.instance.useFakeTimers(...args);
+ }
+ useFakeXMLHttpRequest(...args) {
+ return this.instance && this.instance.useFakeXMLHttpRequest(...args);
+ }
+ useFakeServer(...args) {
+ return this.instance && this.instance.useFakeServer(...args);
+ }
+}
+
+// 1. Instantiate class
+const sandbox = new Sandbox({ global: false });
+
+// 2. Use sandbox's methods in mocha's "Root-Level Hooks"
+// see: https://mochajs.org/#root-level-hooks
+beforeEach(() => {
+ sandbox.create();
+});
+afterEach(() => {
+ sandbox.restore();
+});
+
+// 3. Export class to use as sandbox replacement
+export default sandbox;
diff --git a/packages/dev-toolkit/src/utilities/testHelpers/setupTests.js b/packages/dev-toolkit/src/utilities/testHelpers/setupTests.js
new file mode 100644
index 00000000..f50f86e1
--- /dev/null
+++ b/packages/dev-toolkit/src/utilities/testHelpers/setupTests.js
@@ -0,0 +1,5 @@
+// Additional tests-configuration
+import chai from 'chai';
+import sinonChai from 'sinon-chai';
+
+chai.use(sinonChai);
diff --git a/packages/dev-toolkit/src/utils/debug.js b/packages/dev-toolkit/src/utils/debug.js
deleted file mode 100644
index ed5fb289..00000000
--- a/packages/dev-toolkit/src/utils/debug.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import debug from '../../bin/utils/debug';
-
-export default debug;
diff --git a/packages/dev-toolkit/src/utils/testHelpers/setupClientApp.js b/packages/dev-toolkit/src/utils/testHelpers/setupClientApp.js
deleted file mode 100644
index 292a8eb2..00000000
--- a/packages/dev-toolkit/src/utils/testHelpers/setupClientApp.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import path from 'path';
-import { rootForRequire } from '../../_userSettings';
-
-// Setup `app`-object globally so it's same as on the client
-// eslint-disable-next-line global-require
-require(path.join(rootForRequire, '/src/client/app'));
-global.app = window.app;
diff --git a/packages/dev-toolkit/src/utils/testHelpers/setupDOM.js b/packages/dev-toolkit/src/utils/testHelpers/setupDOM.js
deleted file mode 100644
index 0fa35cd7..00000000
--- a/packages/dev-toolkit/src/utils/testHelpers/setupDOM.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Setup jsdom to be used all throughout mocha tests
-// Using suggested version from: https://github.com/facebook/react/issues/5046
-import { jsdom } from 'jsdom';
-
-global.document = jsdom('');
-global.window = document.defaultView;
-global.navigator = global.window.navigator;
diff --git a/packages/dev-toolkit/src/utils/testHelpers/setupTests.js b/packages/dev-toolkit/src/utils/testHelpers/setupTests.js
deleted file mode 100644
index ce7ef717..00000000
--- a/packages/dev-toolkit/src/utils/testHelpers/setupTests.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// Additional tests-configuration
-import chai from 'chai';
-import sinonChai from 'sinon-chai';
-import chaiImmutable from 'chai-immutable';
-import chaiAsPromised from 'chai-as-promised';
-import chaiEnzyme from 'chai-enzyme';
-
-chai.use(sinonChai);
-chai.use(chaiImmutable);
-chai.use(chaiAsPromised);
-chai.use(chaiEnzyme());
diff --git a/packages/dev-toolkit/src/watch.js b/packages/dev-toolkit/src/watch.js
deleted file mode 100644
index 9c3e5d1c..00000000
--- a/packages/dev-toolkit/src/watch.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import webpack from 'webpack';
-import path from 'path';
-import webpackDevMiddleware from 'webpack-dev-middleware';
-import webpackHotMiddleware from 'webpack-hot-middleware';
-
-import config from './webpack/config';
-import { rootForRequire } from './_userSettings';
-
-// Use the express production server
-const ServerApp = require(path.join(rootForRequire, '/src/server/app')).default;
-const server = new ServerApp();
-
-// Compile with webpack & bind middleware for hot-reloading
-config.devtool = 'source-map';
-config.entry.app = ['webpack-hot-middleware/client'].concat(config.entry.app);
-const compiler = webpack(config);
-server.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
-server.use(webpackHotMiddleware(compiler));
-
-server.start({
- message: '==> Browsersync should be launched soon. Use one of the Access URLs for development.',
-});
diff --git a/packages/dev-toolkit/src/webpack/config.js b/packages/dev-toolkit/src/webpack/config.js
index 112f8a8a..ec956cc3 100644
--- a/packages/dev-toolkit/src/webpack/config.js
+++ b/packages/dev-toolkit/src/webpack/config.js
@@ -1,73 +1,109 @@
-import plugins from './config/plugins';
-import { cssHook, filesHook } from './config/extensionHooks';
-import loaders, { sass, postcss, eslint } from './config/loaders';
-import resolve from './config/resolve';
-import resolveLoader from './config/resolveLoader';
-import stats from './config/stats';
+import path from 'path';
+import AssetsPlugin from 'assets-webpack-plugin';
+import { DefinePlugin, HotModuleReplacementPlugin, NoEmitOnErrorsPlugin, optimize } from 'webpack';
+import { babelrc } from 'babel-runner';
import {
- PATHS,
- env,
- currentScript,
- vendor,
- overrideConfig,
- namingConvention,
-} from '../_userSettings';
+ devToolkitRoot,
+ projectRoot,
+ assetsPath,
+ entryPoint,
+ publicPath,
+ assetsManifestFolder,
+ assetsManifestName,
+} from './projectSettings';
-// Set up server-rendering for file-extensions
-cssHook();
-filesHook();
+export default ({ getWebpackAssets, creatingBuild, userSettings } = { creatingBuild: true }) => {
+ const namingConvention = creatingBuild ? '[name].[chunkhash]' : '[name]';
+ const customizationOptions = {
+ projectRoot,
+ creatingBuild,
+ namingConvention,
+ assetsPath,
+ publicPath,
+ babelrc,
+ };
-// This is an escape-hatch for overriding the webpack config with your custom one.
-// NOTE: There's limited support for using these custom config escape hatches. You're on your own!
-const createConfig = (config) => {
- const override = overrideConfig && overrideConfig.default ?
- overrideConfig.default : overrideConfig;
- return typeof override === 'function' ?
- override({ config, paths: PATHS, env, currentScript }) : config;
-};
-
-// Resulting webpack config
-// ---
-export default createConfig({
- // The entry and ouput configuration for the bundle(s)
- entry: {
- app: [PATHS.clientAppEntryPoint],
- vendor,
- },
- output: {
- path: PATHS.buildFolder,
- filename: `${namingConvention}.js`,
- chunkFilename: `${namingConvention}.js`,
- publicPath: PATHS.publicPath,
- },
-
- // Webpack plugins
- plugins,
-
- // Webpack module-loaders
- module: { loaders },
+ // Allow completely extending webpack with `webpack.customize`
+ return userSettings.webpack.customize(
+ {
+ entry: {
+ app: [entryPoint],
+ },
+ output: {
+ path: assetsPath,
+ filename: `${namingConvention}.js`,
+ chunkFilename: `${namingConvention}.js`,
+ publicPath,
+ },
+ module: {
+ loaders: [
+ {
+ test: /\.jsx?$/,
+ loaders: [`babel-loader?${JSON.stringify(babelrc)}`],
+ exclude: /(node_modules)|\.route.jsx?$|\.dynamic.jsx?$/,
+ },
+ {
+ test: /\.route.jsx?$|\.dynamic.jsx?$/,
+ loaders: [
+ // `bundle`-loader automatically uses module directly when code is run on the server
+ 'bundle-loader?lazy&name=[name]',
+ `babel-loader?${JSON.stringify(babelrc)}`,
+ ],
+ exclude: /(node_modules)/,
+ },
+ ].concat(
+ // Add any user settings from `webpack.loaders`
+ userSettings.webpack.loaders(customizationOptions)
+ ),
+ },
+ plugins: [
+ new DefinePlugin({
+ devToolkitSettings: JSON.stringify(userSettings.devToolkit),
+ // React & Redux rely on this to be set explicitly
+ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+ }),
+ ]
+ .concat(
+ getWebpackAssets
+ ? [
+ new AssetsPlugin({
+ path: assetsManifestFolder,
+ filename: assetsManifestName,
+ processOutput: getWebpackAssets,
+ }),
+ ]
+ : []
+ )
+ .concat(
+ creatingBuild
+ ? [new optimize.UglifyJsPlugin()]
+ : [new HotModuleReplacementPlugin(), new NoEmitOnErrorsPlugin()]
+ )
+ .concat(
+ // Add any user settings from `webpack.plugins`
+ userSettings.webpack.plugins(customizationOptions)
+ ),
+ resolve: {
+ modules: [
+ // Resolve dev-toolkit related modules like 'webpack-hot-middleware/client'
+ path.resolve(devToolkitRoot, 'node_modules'),
+ // Resolve all other modules from client app
+ path.resolve(projectRoot, 'node_modules'),
+ 'node_modules',
+ ],
+ },
+ resolveLoader: {
+ modules: [
+ // Resolve dev-toolkit related webpack loaders like 'babel-loader'
+ path.resolve(devToolkitRoot, 'node_modules'),
+ // Resolve webpack loaders related to project
+ path.resolve(projectRoot, 'node_modules'),
+ 'node_modules',
+ ],
+ },
+ },
- // Specific config for loaders. `sass-loader`, `postcss-loader`, `eslint-loader`
- sassLoader: sass,
- postcss,
- eslint,
-
- // Manage directories for dependencies with `resolve` & `resolveLoader`
- resolve,
- resolveLoader,
-
- // How much information webpack should output
- stats,
-
- // Ignore some node-specific packages on the client
- node: {
- fs: 'empty',
- net: 'empty',
- tls: 'empty',
- path: 'empty',
- chalk: 'empty',
- mkdirp: 'empty',
- fileExists: 'empty',
- },
-});
+ customizationOptions
+ );
+};
diff --git a/packages/dev-toolkit/src/webpack/config/extensionHooks/cssHook.js b/packages/dev-toolkit/src/webpack/config/extensionHooks/cssHook.js
deleted file mode 100644
index 56490cd1..00000000
--- a/packages/dev-toolkit/src/webpack/config/extensionHooks/cssHook.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import path from 'path';
-import cssHook from 'css-modules-require-hook';
-import sass from 'node-sass';
-
-import {
- PATHS,
- cssChunkNaming,
-} from '../../../_userSettings';
-
-// Set up server-side rendering of scss files
-// ---
-// Implement a hook in node for `.scss`-imports that uses
-// the same settings as the webpack config.
-const preprocessCss = (cssFileData, cssFilePath) => {
- // Include any paths that are part of the config,
- // as well as the current path where css-file resides.
- const includePaths = [].concat(PATHS.scssIncludePaths);
- includePaths.push(path.dirname(cssFilePath));
-
- return sass.renderSync({
- data: cssFileData,
- includePaths,
- }).css;
-};
-
-export default () => {
- // Allow vanilla css-modules
- cssHook({
- extensions: ['.css'],
-
- // Share naming-convention of `css-loader`
- generateScopedName: cssChunkNaming,
- });
-
- // Separate processing for scss
- cssHook({
- extensions: ['.scss'],
-
- // Share naming-convention of `css-loader`
- generateScopedName: cssChunkNaming,
-
- // Process files with same settings as `sass-loader` and return css.
- preprocessCss,
- });
-};
diff --git a/packages/dev-toolkit/src/webpack/config/extensionHooks/filesHook.js b/packages/dev-toolkit/src/webpack/config/extensionHooks/filesHook.js
deleted file mode 100644
index 071947b3..00000000
--- a/packages/dev-toolkit/src/webpack/config/extensionHooks/filesHook.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import filesHook from 'files-require-hook';
-
-import {
- rootForRequire,
-} from '../../../_userSettings';
-
-// Set up server-side rendering of image files
-// ---
-// Implement a hook that uses a file-path for node
-// NOTE:
-// For the build-process it is likely that the files should first
-// be copied into the build dir and then referenced from there instead of
-// using the original file-path. Similar to `webpack-isomorphic-tools`.
-// see: https://github.com/halt-hammerzeit/webpack-isomorphic-tools#getting-down-to-business
-export default () => {
- filesHook({
- extensions: ['jpg', 'jpeg', 'png', 'gif', 'svg'],
- base: rootForRequire,
- });
-};
diff --git a/packages/dev-toolkit/src/webpack/config/extensionHooks/index.js b/packages/dev-toolkit/src/webpack/config/extensionHooks/index.js
deleted file mode 100644
index 27854d72..00000000
--- a/packages/dev-toolkit/src/webpack/config/extensionHooks/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export cssHook from './cssHook';
-export filesHook from './filesHook';
diff --git a/packages/dev-toolkit/src/webpack/config/loaders.js b/packages/dev-toolkit/src/webpack/config/loaders.js
deleted file mode 100644
index a2bff0ad..00000000
--- a/packages/dev-toolkit/src/webpack/config/loaders.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
-
-import {
- currentScript,
- babelConfig,
- eslintConfig,
- cssChunkNaming,
-} from '../../_userSettings';
-
-// Style configuration
-// ---
-const styleLoaders = [
- `css-loader?modules&importLoaders=1&localIdentName=${cssChunkNaming}`,
- 'postcss-loader',
-];
-const sassLoaders = styleLoaders.concat(['sass-loader']);
-
-export eslint from './loaders/eslint';
-export postcss from './loaders/postcss';
-export sass from './loaders/sass';
-
-export default [
- { test: /\.hbs$/, loader: 'handlebars-loader' },
- { test: /\.json$/, loader: 'json-loader' },
- {
- test: /\.jsx?$/,
- loaders: [
- `babel-loader?${JSON.stringify(babelConfig)}`,
- `eslint-loader?${JSON.stringify(eslintConfig)}`,
- ],
- exclude: /(node_modules)|\.route.jsx?$|\.dynamic.jsx?$/,
- },
- {
- test: /\.route.jsx?$|\.dynamic.jsx?$/,
- loaders: [
- // The`bundle`-loader automatically uses module directly when code is run on the server
- 'bundle?lazy&name=[name]',
- `babel-loader?${JSON.stringify(babelConfig)}`,
- `eslint-loader?${JSON.stringify(eslintConfig)}`,
- ],
- exclude: /(node_modules)/,
- },
- {
- test: /\.(jpe?g|png|gif|svg)$/i,
- loaders: [
- 'file?hash=sha512&digest=hex&name=[hash].[ext]',
- 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false',
- ],
- },
-
- // Use separate style-tags for development,
- // extract CSS into one file for production.
- currentScript === 'watch' ? {
- test: /\.css$/,
- loaders: ['style-loader'].concat(styleLoaders),
- } : {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract('style-loader', styleLoaders),
- },
- // Allow scss to be used as well
- currentScript === 'watch' ? {
- test: /\.scss$/,
- loaders: ['style-loader'].concat(sassLoaders),
- } : {
- test: /\.scss$/,
- loader: ExtractTextPlugin.extract('style-loader', sassLoaders),
- },
-];
diff --git a/packages/dev-toolkit/src/webpack/config/loaders/eslint.js b/packages/dev-toolkit/src/webpack/config/loaders/eslint.js
deleted file mode 100644
index fcd21acb..00000000
--- a/packages/dev-toolkit/src/webpack/config/loaders/eslint.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
- currentScript,
-} from '../../../_userSettings';
-
-// Ignore custom import temporarily so text-editors work with `eslint-plugin-import`
-// see: https://github.com/AtomLinter/linter-eslint/issues/610
-const sharedRules = {
- 'import/no-unresolved': [
- 'error',
- {
- ignore: ['src/'],
- },
- ],
-};
-
-export default {
- // Override any settings from the configFile
- rules: currentScript === 'watch' ? {
- // only warn for debugging statements while developing
- 'no-debugger': [
- 'warn',
- ],
-
- ...sharedRules,
- } : { ...sharedRules },
-};
diff --git a/packages/dev-toolkit/src/webpack/config/loaders/postcss.js b/packages/dev-toolkit/src/webpack/config/loaders/postcss.js
deleted file mode 100644
index 2786daf0..00000000
--- a/packages/dev-toolkit/src/webpack/config/loaders/postcss.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import autoprefixer from 'autoprefixer';
-
-export default [
- // Supported Browsers via `Autoprefixer`
- // see: https://github.com/ai/browserslist
- autoprefixer({
- browsers: [
- '> 0.8%',
- 'last 2 versions',
- 'Explorer >= 9',
- ],
- }),
-];
diff --git a/packages/dev-toolkit/src/webpack/config/loaders/sass.js b/packages/dev-toolkit/src/webpack/config/loaders/sass.js
deleted file mode 100644
index 87ff3f42..00000000
--- a/packages/dev-toolkit/src/webpack/config/loaders/sass.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {
- PATHS,
-} from '../../../_userSettings';
-
-export default {
- includePaths: PATHS.scssIncludePaths,
-};
diff --git a/packages/dev-toolkit/src/webpack/config/plugins.js b/packages/dev-toolkit/src/webpack/config/plugins.js
deleted file mode 100644
index edfe3950..00000000
--- a/packages/dev-toolkit/src/webpack/config/plugins.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import webpack from 'webpack';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import BrowserSyncPlugin from 'browser-sync-webpack-plugin';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
-import CompressionPlugin from 'compression-webpack-plugin';
-import ProgressBarPlugin from 'progress-bar-webpack-plugin';
-import ManifestRevisionPlugin from 'manifest-revision-webpack-plugin';
-
-import {
- PATHS,
- env,
- sharedEnvs,
- currentScript,
- scriptOptions,
- namingConvention,
- buildNamingConvention,
-} from '../../_userSettings';
-
-const extractedSharedEnvs = Object.keys(process.env)
- .filter(key => sharedEnvs.indexOf(key) !== -1)
- .reduce((obj, key) => ({ [key]: process.env[key], ...obj }), {});
-
-const sharedPlugins = [
- new ProgressBarPlugin({ width: 40 }),
- new webpack.optimize.CommonsChunkPlugin('vendor', `${namingConvention}.js`),
- new CopyWebpackPlugin([{ from: PATHS.publicFilesFolder }]),
- new webpack.DefinePlugin({
- // For redux and react only, force `production` when creating a build or serving files
- 'process.env.NODE_ENV': JSON.stringify(
- (currentScript === 'build') || (currentScript === 'serve')
- ? 'production'
- : process.env.NODE_ENV
- ),
- // All other environment variables are passed through via `buildSettings` if defined in `sharedEnvs`
- buildSettings: {
- env: JSON.stringify(extractedSharedEnvs),
- },
- }),
-];
-
-const developmentPlugins = [
- // Use hot-reload middleware, browsersync for development
- new webpack.optimize.OccurenceOrderPlugin(),
- new webpack.HotModuleReplacementPlugin(),
-
- new BrowserSyncPlugin(
- {
- // BrowserSync options - see: http://www.browsersync.io/docs/options/
-
- // Use http://localhost:3000/ for development, proxy Dev Server.
- host: env.BROWSERSYNC_HOST,
- port: env.BROWSERSYNC_PORT,
- proxy: `http://${env.HOST}:${env.PORT}/`,
- // Stop the browser from automatically opening.
- open: false,
- // Scrolls & Form inputs on any device will be mirrored to all others.
- ghostMode: {
- clicks: false,
- scroll: true,
- forms: true,
- },
- // Show what browsers are connected.
- logConnections: true,
- },
- {
- // Webpack Plugin options
-
- // Prevent BrowserSync from reloading the page
- // and let Webpack Dev Server take care of this.
- reload: false,
- }
- ),
-];
-
-const productionPlugins = [
- // Extract css into one file for production, minify javascript
- new ExtractTextPlugin(`${buildNamingConvention}.css`, { allChunks: true }),
- new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: { warnings: false } }),
- new HtmlWebpackPlugin({
- inject: false,
- template: PATHS.templateLocation,
-
- reactHtml: scriptOptions.dynamic ? '' : '',
- creatingBuild: true,
- env: process.env,
- }),
- new ScriptExtHtmlWebpackPlugin({
- async: ['app'],
- defer: ['app'],
- defaultAttribute: 'sync',
- }),
- new ManifestRevisionPlugin(
- PATHS.manifestFile,
- {
- rootAssetPath: PATHS.manifestRootAssetPath,
- ignorePaths: [],
- extensionsRegex: /\.(jpe?g|png|gif|svg)$/i,
- }
- ),
-];
-
-// TODO: extract out
-if (process.env.USE_COMPRESSION_PLUGIN) {
- productionPlugins.push(
- new CompressionPlugin({
- asset: '[path]',
- test: new RegExp(process.env.COMPRESSION_PLUGIN_REGEX),
- minRatio: 0,
- })
- );
-}
-
-export default currentScript === 'watch' ?
- sharedPlugins.concat(developmentPlugins)
- : sharedPlugins.concat(productionPlugins);
diff --git a/packages/dev-toolkit/src/webpack/config/resolve.js b/packages/dev-toolkit/src/webpack/config/resolve.js
deleted file mode 100644
index ea522e87..00000000
--- a/packages/dev-toolkit/src/webpack/config/resolve.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import path from 'path';
-
-import {
- rootForProject,
- rootForRequire,
- rootForToolkit,
-} from '../../_userSettings';
-
-// Files in these directories can be imported without a relative path
-export default {
- extensions: ['', '.js', '.jsx'],
- root: path.resolve(__dirname, rootForRequire),
- // the alias will allow us to get files relative to the `src`-folder
- // exmaple: `import { myUtil } from 'src/client/utils';`
- alias: {
- src: 'src',
- },
-
- modulesDirectories: [
- path.resolve(rootForProject, 'node_modules'),
- path.resolve(rootForToolkit, 'node_modules'),
- 'node_modules',
- ],
-};
diff --git a/packages/dev-toolkit/src/webpack/config/resolveLoader.js b/packages/dev-toolkit/src/webpack/config/resolveLoader.js
deleted file mode 100644
index fea48a66..00000000
--- a/packages/dev-toolkit/src/webpack/config/resolveLoader.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import path from 'path';
-
-import {
- rootForProject,
- rootForToolkit,
-} from '../../_userSettings';
-
-export default {
- modulesDirectories: [
- path.resolve(rootForProject, 'node_modules'),
- path.resolve(rootForToolkit, 'node_modules'),
- 'node_modules',
- ],
-};
diff --git a/packages/dev-toolkit/src/webpack/config/stats.js b/packages/dev-toolkit/src/webpack/config/stats.js
deleted file mode 100644
index b17dc96c..00000000
--- a/packages/dev-toolkit/src/webpack/config/stats.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { env } from '../../_userSettings';
-
-export default {
- colors: true,
- timings: true,
- reasons: true,
-
- assets: env.VERBOSE_LOGGING,
- modules: env.VERBOSE_LOGGING,
- source: env.VERBOSE_LOGGING,
- errorDetails: env.VERBOSE_LOGGING,
- children: env.VERBOSE_LOGGING,
- hash: env.VERBOSE_LOGGING,
- version: env.VERBOSE_LOGGING,
- chunks: env.VERBOSE_LOGGING,
- chunkModules: env.VERBOSE_LOGGING,
- cached: env.VERBOSE_LOGGING,
- cachedAssets: env.VERBOSE_LOGGING,
-};
diff --git a/packages/dev-toolkit/src/webpack/projectSettings.js b/packages/dev-toolkit/src/webpack/projectSettings.js
new file mode 100644
index 00000000..7a5f107a
--- /dev/null
+++ b/packages/dev-toolkit/src/webpack/projectSettings.js
@@ -0,0 +1,34 @@
+import path from 'path';
+
+// dev-toolkit specific Folders
+export const devToolkitRoot = path.resolve(__dirname, '../../');
+export const devToolkitDistribution = path.resolve(devToolkitRoot, 'dist');
+export const gitRepoRoot = path.resolve(devToolkitRoot, '../../');
+export const originalTemplates = path.resolve(gitRepoRoot, 'templates');
+export const generatedTemplates = path.resolve(
+ devToolkitDistribution,
+ 'generated-templates/original'
+);
+export const generatedTemplatesWithoutComments = path.resolve(
+ devToolkitDistribution,
+ 'generated-templates/skipped-comments'
+);
+export const defaultTemplate = 'standard';
+
+// User Project Related Folders & Settings
+export const projectRoot = process.cwd();
+export const buildFolder = path.resolve(projectRoot, 'build');
+export const serverAppEntryPoint = path.resolve(projectRoot, 'src/server/index.js');
+export const userSettingsPath = path.resolve(projectRoot, 'dev-toolkit.config.js');
+
+export const assetsManifestFolder = buildFolder;
+export const assetsManifestName = 'assets-manifest.json';
+export const assetsManifestFile = path.resolve(assetsManifestFolder, assetsManifestName);
+
+export const entryPoint = './src/client/index.js';
+// Make sure leading slash & trailing slash is present (otherwise source-map won't work)
+export const publicPath = (process.env.ASSETS_PATH || '/assets')
+ .replace(/^\/?/, '/')
+ .replace(/\/?$/, '/');
+// Remove leading slash from public path to create correct file-path
+export const assetsPath = path.resolve(buildFolder, publicPath.replace(/^\//, ''));
diff --git a/packages/dev-toolkit/starting-point/.eslintrc b/packages/dev-toolkit/starting-point/.eslintrc
deleted file mode 100644
index bb9aa91a..00000000
--- a/packages/dev-toolkit/starting-point/.eslintrc
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "plugins": [
- "jsx-control-statements"
- ],
- "extends": [
- "airbnb",
- "plugin:jsx-control-statements/recommended"
- ],
- "parser": "babel-eslint",
- "rules": {
- "no-multiple-empty-lines": [
- "error",
- {
- "max": 1
- }
- ],
- "import/no-extraneous-dependencies": 0,
- "import/no-unresolved": [
- "error",
- {
- "ignore": [ "src/" ]
- }
- ]
- },
-
- "env": {
- "browser": true,
- "mocha": true
- }
-}
diff --git a/packages/dev-toolkit/starting-point/.gitignore b/packages/dev-toolkit/starting-point/.gitignore
deleted file mode 100644
index c8d61631..00000000
--- a/packages/dev-toolkit/starting-point/.gitignore
+++ /dev/null
@@ -1,13 +0,0 @@
-#############
-## Generated Files
-#############
-
-build/
-dist/
-
-#############
-## Node
-#############
-
-node_modules/
-npm-debug.log
diff --git a/packages/dev-toolkit/starting-point/package.json b/packages/dev-toolkit/starting-point/package.json
deleted file mode 100644
index a0466bd1..00000000
--- a/packages/dev-toolkit/starting-point/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "name": "dev-toolkit-starter",
- "version": "1.0.0",
- "description": "dev-toolkit starting point",
- "main": "index.js",
- "scripts": {
- "dev": "dev-toolkit --watch",
- "build": "dev-toolkit --build"
- },
- "author": "",
- "license": "ISC",
- "toolkitSettings": {
- "vendor": [
- "react",
- "react-dom",
- "react-router"
- ]
- },
- "dependencies": {
- "compression": "^1.6.2",
- "domready": "^1.0.8",
- "express": "^4.14.0",
- "express-handlebars": "^3.0.0",
- "react": "^15.1.0",
- "react-dom": "^15.1.0",
- "react-router": "^2.4.1",
- "redbox-react": "^1.2.8",
- "serve-static": "^1.11.1"
- },
- "devDependencies": {
- "babel-eslint": "^6.1.2",
- "eslint": "^3.4.0",
- "eslint-config-airbnb": "^10.0.1",
- "eslint-import-resolver-webpack": "^0.5.1",
- "eslint-plugin-import": "^1.14.0",
- "eslint-plugin-jsx-a11y": "^2.2.1",
- "eslint-plugin-jsx-control-statements": "^2.1.1",
- "eslint-plugin-react": "^6.2.0"
- }
-}
diff --git a/packages/dev-toolkit/starting-point/src/client/RouterContainer.jsx b/packages/dev-toolkit/starting-point/src/client/RouterContainer.jsx
deleted file mode 100644
index b7af7b56..00000000
--- a/packages/dev-toolkit/starting-point/src/client/RouterContainer.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Router, browserHistory, RouterContext } from 'react-router';
-
-import routes from './routes';
-
-// `RouterContainer.js`
-// --------------------
-// The root-container of our App that manages the configured routes. If you use
-// Redux, the component should wrap the below. Note how
-// this file uses capitalized camel-case to denote that it is a React-component.
-
-export default class RouterContainer extends React.Component {
- constructor(props) {
- super(props);
- this.displayName = 'RouterContainer';
-
- this.state = {};
- }
-
- render() {
- return (
-
-
- {/* A view for the home page */}
-
-);
diff --git a/packages/dev-toolkit/starting-point/src/client/style/_config.scss b/packages/dev-toolkit/starting-point/src/client/style/_config.scss
deleted file mode 100644
index 8391fc93..00000000
--- a/packages/dev-toolkit/starting-point/src/client/style/_config.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// ---
-// Caution! these have an effect on a lot of elements
-// --
-
-// use pixels for breakpoints
-$use-em-breakpoints : false;
-
-// Define repsonsive breakpoints for application
-$breakpoint-phone : 0px;
-$breakpoint-smart : 300px;
-$breakpoint-tablet7 : 440px;
-$breakpoint-tablet10 : 768px;
-$breakpoint-pcsmall : 992px;
-$breakpoint-pclarge : 1200px;
-
-// Share these variables in javascript
-:export {
- breakpointPhone: $breakpoint-phone;
- breakpointSmart: $breakpoint-smart;
- breakpointTablet7: $breakpoint-tablet7;
- breakpointTablet10: $breakpoint-tablet10;
- breakpointPcsmall: $breakpoint-pcsmall;
- breakpointPclarge: $breakpoint-pclarge;
-}
-
-// useful helper mixins
-@import 'mixins/_helpers.scss';
-
-// font-settings for app (get passed through mixin as defaults)
-$text-color-default : #333;
-$font-xxxlarge : 37px;
-$font-xxlarge : 26px;
-$font-xlarge : 21px;
-$font-large : 18px;
-$font-medium : 16px;
-$font-small : 14px;
-$font-xsmall : 12px;
-
-$header-font-family : 'Source Serif Pro', 'Times New Roman', Times, 'Georgia', serif;
-$body-font-family : 'Source Sans Pro', Verdana, Arial, sans-serif;
-@import 'mixins/_font-settings.scss';
-
-// a common variable for use throughout the app as simple grid-system
-$grid : 8px;
-
-// New brand colors (Use your own or inherit from mixins/_helpers)
-$brand-green : $green;
-$brand-red : $red;
-$brand-blue : $blue;
-$brand-orange : $orange;
-$brand-yellow : $yellow;
diff --git a/packages/dev-toolkit/starting-point/src/client/style/global.scss b/packages/dev-toolkit/starting-point/src/client/style/global.scss
deleted file mode 100644
index 045fb373..00000000
--- a/packages/dev-toolkit/starting-point/src/client/style/global.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// retrieve configuration
-@import './config.scss';
-
-// Global-style defaults specific to the application
-// NOTE:
-// Please consult with the team before you make changes in here. These are
-// defaults and can potentially break a lot of things or have side-effects!!
-:global body{
- // Remove margin & make sure body is not transparent
- margin : 0;
- background-color : white;
- // Use 'Open Sans' font, with native font as fallback (Wordpress Default)
- // see: https://bitsofco.de/the-new-system-font-stack/
- font-family: 'Open Sans',
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
- Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
- // Use border-box & make sure images don't overflow.
- *{ box-sizing : border-box; }
- img{ max-width : 100%; }
-
- // Remove 300ms click-delay for IE11+
- a[href], button, .btn, .button { touch-action: manipulation; }
-
- // use standard font
- font-family : $body-font-family;
- @include font(medium, $text-color-default, normal);
- line-height : 1.4em;
-
- // Prevent iOS Safari from freely adjusting font-size (Ex: on rotation)
- -webkit-text-size-adjust: 100%;
-
- // make fonts look nicer
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-:global(#__bs_notify__){
- opacity : 0.2!important;
- pointer-events: none!important;
-}
diff --git a/packages/dev-toolkit/starting-point/src/client/style/mixins/_font-settings.scss b/packages/dev-toolkit/starting-point/src/client/style/mixins/_font-settings.scss
deleted file mode 100644
index e45ddcc5..00000000
--- a/packages/dev-toolkit/starting-point/src/client/style/mixins/_font-settings.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-// Defaults for font-sizes
-// don't change these, override them via style/_config
-$text-color-default : #333 !default;
-$font-xxxlarge : 37px !default;
-$font-xxlarge : 26px !default;
-$font-xlarge : 21px !default;
-$font-large : 18px !default;
-$font-medium : 16px !default;
-$font-small : 14px !default;
-$font-xsmall : 12px !default;
-
-// use mixin for font-sizes throughout app
-@mixin font($font-size: auto, $color: auto, $font-weight: auto){
- @if $font-size != auto {
- @if $font-size == default { font-size : $font-medium; }
- @else if $font-size == xxxlarge { font-size : $font-xxxlarge; }
- @else if $font-size == xxlarge { font-size : $font-xxlarge; }
- @else if $font-size == xlarge { font-size : $font-xlarge; }
- @else if $font-size == large { font-size : $font-large; }
- @else if $font-size == medium { font-size : $font-medium; }
- @else if $font-size == small { font-size : $font-small; }
- @else if $font-size == xsmall { font-size : $font-xsmall; }
- @else { font-size : $font-size; }
- }
- @if $color != auto {
- @if $color == default { color : $text-color-default; }
- @else { color : $color; }
- }
- @if $font-weight != auto {
- font-weight: $font-weight;
- }
-}
-
-@mixin importFont(
- $family,
- $path,
- $filename,
- $hash: 'v1',
- $font-weight: normal,
- $font-style: normal,
- $include-woff2 : false
-){
- @font-face{
- font-family : $family;
- // NOTE:
- // don't hash on eot-files, prevents `OTS parsing error: invalid version tag`
- @if $include-woff2 == true {
- src : url($path + "/" + $filename + ".eot"),
- url($path + "/" + $filename + ".eot?" + $hash + "#iefix") format("embedded-opentype"),
- url($path + "/" + $filename + ".woff2?" + $hash) format("woff2"),
- url($path + "/" + $filename + ".woff?" + $hash) format("woff"),
- url($path + "/" + $filename + ".ttf?" + $hash) format("truetype"),
- url($path + "/" + $filename + ".svg?" + $hash + "#" + $filename) format("svg");
- } @else {
- src : url($path + "/" + $filename + ".eot"),
- url($path + "/" + $filename + ".eot?" + $hash + "#iefix") format("embedded-opentype"),
- url($path + "/" + $filename + ".woff?" + $hash) format("woff"),
- url($path + "/" + $filename + ".ttf?" + $hash) format("truetype"),
- url($path + "/" + $filename + ".svg?" + $hash + "#" + $filename) format("svg");
- }
- font-weight : $font-weight;
- font-style : $font-style;
- }
-}
diff --git a/packages/dev-toolkit/starting-point/src/client/style/mixins/_helpers.scss b/packages/dev-toolkit/starting-point/src/client/style/mixins/_helpers.scss
deleted file mode 100644
index ca6febc9..00000000
--- a/packages/dev-toolkit/starting-point/src/client/style/mixins/_helpers.scss
+++ /dev/null
@@ -1,425 +0,0 @@
-// These are helper-mixins, -variables etc
-// ---
-
-@mixin resetList{
- // remove the list style
- list-style : none;
- // margin-reset is optional
-}
-// mixin for crisp image-rednering
-@mixin crisp-image{
- image-rendering : optimizeSpeed; // Fallback
- -ms-interpolation-mode : nearest-neighbor; // IE8+
- image-rendering : -o-crisp-edges; // Opera
- image-rendering : -moz-crisp-edges; // Firefox
- image-rendering : -webkit-optimize-contrast; // Chrome (and eventually Safari)
- image-rendering : optimize-contrast; // CSS3 Proposed
-}
-
-// Micro Clearfix by Nicolas Gallagher
-// http://nicolasgallagher.com/micro-clearfix-hack/
-@mixin micro-clearfix{
- &:before,
- &:after {
- content : "";
- display : table;
- }
- &:after {
- clear : both;
- }
-
- zoom : 1; // For IE 6/7 (trigger hasLayout)
-}
-
-// A tiny clearfix from CSS-Tricks
-// https://css-tricks.com/snippets/css/clear-fix/
-@mixin clearfix{
- &:after{
- content: "";
- display: table;
- clear: both;
- }
-}
-
-// create a positioned Element, crossbrowser
-@mixin position($position: relative, $display: auto, $width: "", $height: ""){
- position : $position;
-
- @if $display != auto { display : $display; }
- @if $width != "" { width : $width; }
- @if $height != "" { height : $height; }
-}
-
-// Definition for animated elements
-@mixin isAnimated{
- // CAUTION:
- // This breaks `position: fixed;`-elements and will make them
- // behave like `absolute`-elements! (won't fix them to the viewport)
- transform : translate3d(0,0,0);
- perspective : 1000;
-
- // Setting the origin for transformations of an element:
- // transform-origin: 50% 50%;
-}
-
-// remove chrome jagged edges for pngs
-// http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome
-@mixin removeJaggedEdges{
- outline: 1px solid transparent;
- backface-visibility: hidden;
- transform-style: preserve-3d;
-}
-
-@mixin disableContextMenu{
- user-select : none;
- -webkit-user-select : none; // disable selection/Copy of UIWebView
- -webkit-user-callout : none; // disable the IOS popup when long-press on a link
- -webkit-touch-callout : none; // disable the IOS popup when long-press on a link
-}
-
-// Definition for button elements
-@mixin isButton{
- // change the cursor to a hand
- cursor : pointer;
- // set text defaults
- text-decoration : none;
- vertical-align : middle;
- // disable user selection and webkit highlight on tap
- user-select : none;
- -ms-user-select : none;
- -webkit-user-select : none;
- -webkit-tap-highlight-color : transparent;
-
- // Fix for the Firefox padding issue on focus
- &::-moz-focus-inner{
- padding : 0 !important;
- margin : -1px !important;
- }
-}
-
-// Prototype mixins for debuggind elements
-$proto-enabled : true;
-
-// color an element
-@mixin proto($id: 1, $opacity : 1){
- $enabled : $proto-enabled;
-
- @if $enabled {
- @if (($id == 0 ) or ($id == 'blue')) { background-color : rgba($blue, $opacity); }
- @elseif (($id == 1 ) or ($id == 'blue-light')) { background-color : rgba($blue-light, $opacity); }
- @elseif (($id == 2 ) or ($id == 'yellow')) { background-color : rgba($yellow-light, $opacity); }
- @elseif (($id == 3 ) or ($id == 'green-light')) { background-color : rgba($green-light, $opacity); }
- @elseif (($id == 4 ) or ($id == 'orange')) { background-color : rgba($orange-light, $opacity); }
- @elseif (($id == 5 ) or ($id == 'red-light')) { background-color : rgba($red-light, $opacity); }
- @elseif (($id == 6 ) or ($id == 'blue-dark')) { background-color : rgba($blue-dark, $opacity); }
- @elseif (($id == 7 ) or ($id == 'yellow-light')) { background-color : rgba($yellow-light, $opacity); }
- @elseif (($id == 8 ) or ($id == 'green')) { background-color : rgba($green-dark, $opacity); }
- @elseif (($id == 9 ) or ($id == 'orange-light')) { background-color : rgba($orange-light, $opacity); }
- @elseif (($id == 10) or ($id == 'red')) { background-color : rgba($red-dark, $opacity); }
- @else{
- //background-color : rgba($nr, 0.8);
- @include background-image(linear-gradient(left, rgba($id, 1), rgba($id, 0.9)));
- }
- }
-}
-
-// make sure element has a height (don't collapse), even if it has no content
-@mixin emptyHeight($height : 1.4em){
- line-height : $height;
- min-height : $height;
-}
-
-// make text fade out
-@mixin fontFading($color : #fff, $size : 20px, $distance : 0, $disabled : false, $position : right, $wrapper : after){
- $fading-container : '';
-
- // create pseudo-element, or an element using a classname
- @if ($wrapper == after) or ($wrapper == before) {
- $fading-container : '&:' + $wrapper;
- } @else {
- $fading-container : $wrapper;
- }
-
- @if $disabled == false {
- #{$fading-container}{
- @include position(absolute, block);
- @if ($wrapper == after) or ($wrapper == before) {
- content : ' ';
- pointer-events : none;
- }
-
- @if $position == top {
- width : 100%;
- height : $size;
- top : $distance;
- right : initial;
- bottom : initial;
- left : 0;
- @include background-image(linear-gradient(top, rgba($color, 1), rgba($color, 0) 95%));
- }
- @if $position == right {
- width : $size;
- height : 100%;
- top : 0;
- right : $distance;
- bottom : initial;
- left : initial;
- @include background-image(linear-gradient(right, rgba($color, 1), rgba($color, 0) 95%));
- }
- @if $position == bottom {
- width : 100%;
- height : $size;
- top : initial;
- right : initial;
- bottom : $distance;
- left : 0;
- @include background-image(linear-gradient(bottom, rgba($color, 1), rgba($color, 0) 95%));
- }
- @if $position == left {
- width : $size;
- height : 100%;
- top : 0;
- right : initial;
- bottom : initial;
- left : $distance;
- @include background-image(linear-gradient(left, rgba($color, 1), rgba($color, 0) 95%));
- }
- }
- } @else {
- #{$fading-container}{ display : none; }
- }
-}
-
-// easing definitions
-$ease-in : ease-in;
-$ease-out : ease-out;
-$ease-in-out : ease-in-out;
-
-$ease-in-quart : cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$ease-out-quart : cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$ease-in-out-quart : cubic-bezier(0.770, 0.000, 0.175, 1.000);
-
-$ease-in-quint : cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$ease-out-quint : cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$ease-in-out-quint : cubic-bezier(0.860, 0.000, 0.070, 1.000);
-
-$ease-in-expo : cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$ease-out-expo : cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$ease-in-out-expo : cubic-bezier(1.000, 0.000, 0.000, 1.000);
-
-$ease-in-back : cubic-bezier(0.600, -0.280, 0.735, 0.045);
-$ease-out-back : cubic-bezier(0.175, 0.885, 0.320, 1.275);
-$ease-in-out-back : cubic-bezier(0.680, -0.550, 0.265, 1.550);
-
-//// Predefined Colors ////
-$white-5 : lighten(#000, 5%); // #0d0d0d
-$white-10 : lighten(#000, 10%); // #1a1a1a
-$white-15 : lighten(#000, 15%); // #262626
-$white-20 : lighten(#000, 20%); // #333333
-$white-25 : lighten(#000, 25%); // #404040
-$white-30 : lighten(#000, 30%); // #4d4d4d
-$white-35 : lighten(#000, 35%); // #595959
-$white-40 : lighten(#000, 40%); // #666666
-$white-45 : lighten(#000, 45%); // #737373
-$white-50 : lighten(#000, 50%); // #808080
-$white-55 : lighten(#000, 55%); // #8c8c8c
-$white-60 : lighten(#000, 60%); // #999999
-$white-65 : lighten(#000, 65%); // #a6a6a6
-$white-70 : lighten(#000, 70%); // #b3b3b3
-$white-75 : lighten(#000, 75%); // #bfbfbf
-$white-80 : lighten(#000, 80%); // #cccccc
-$white-85 : lighten(#000, 85%); // #d9d9d9
-// more subtle shades for near-white
-$white-90 : lighten(#000, 90%); // #e6e6e6
-$white-91 : lighten(#000, 91%); // #e8e8e8
-$white-92 : lighten(#000, 92%); // #ebebeb
-$white-93 : lighten(#000, 93%); // #ededed
-$white-94 : lighten(#000, 94%); // #f0f0f0
-$white-95 : lighten(#000, 95%); // #f2f2f2
-$white-96 : lighten(#000, 96%); // #f5f5f5
-$white-97 : lighten(#000, 97%); // #f7f7f7
-$white-98 : lighten(#000, 98%); // #fafafa
-$white-99 : lighten(#000, 99%); // #fcfcfc
-
-$blue-light : #268ce6;
-$blue : #1177db;
-$blue-dark : #0c68c3;
-
-$dark_blue-light : shade($blue-light, 16%);
-$dark_blue : shade($blue, 16%);
-$dark_blue-dark : shade($blue-dark, 16%);
-
-$light_blue-light : #50b4dc;
-$light_blue : #3fa9d2;
-$light_blue-dark : #2b92b9;
-
-$yellow-light : #fed829;
-$yellow : #fecf06;
-$yellow-dark : #eebd01;
-
-$orange-light : #fd9b3e;
-$orange : #fc8c1f;
-$orange-dark : #ea7e0f;
-
-$green-light : #56c35d;
-$green : #40b547;
-$green-dark : #38a03e;
-
-$red-light : #e5584d;
-$red : #d83d30;
-$red-dark : #bc2d20;
-
-$red_orange-light : tint(mix($red-light, $orange-light, 26%), 2%);
-$red_orange : tint(mix($red, $orange, 26%), 2%);
-$red_orange-dark : tint(mix($red-dark, $orange-dark, 26%), 2%);
-
-$pink-light : #fb6abe;
-$pink : #f254b1;
-$pink-dark : #d8479e;
-
-
-// RWD - Responsive Web Design Additions
-// --
-// em's will be used instead of pixels
-// http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
-
-// !default allows breakpoint to be set beforehand
-// see: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_
-$use-em-breakpoints : true !default;
-$body-px : 16px !default;
-
-// The breakpoints to use
-$breakpoint-phone : 220px !default; // 240
-$breakpoint-smart : 300px !default; // 320
-$breakpoint-tablet7 : 460px !default; // 480
-$breakpoint-tablet10 : 750px !default; // 768
-$breakpoint-pcsmall : 960px !default; // 1024
-$breakpoint-pclarge : 1260px !default; // 1280
-
-// remove units from a number
-@function stripUnits($number) {
- @return $number / ($number * 0 + 1);
-}
-
-// Convert pixels to em
-@function toEm($px){
- $basepx : $body-px;
-
- @if $use-em-breakpoints { @return stripUnits($px)/stripUnits($basepx) + 0em; }
- @else { @return $px; }
-}
-
-// convert to em's for better compatibility
-// see: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
-$phone : toEm($breakpoint-phone);
-$smart : toEm($breakpoint-smart);
-$tablet7 : toEm($breakpoint-tablet7);
-$tablet10 : toEm($breakpoint-tablet10);
-$pcsmall : toEm($breakpoint-pcsmall);
-$pclarge : toEm($breakpoint-pclarge);
-
-// Breakpoint functionality
-// media-devices can be given in random order
-@mixin breakpoint($media) {
- // define minimum and maximum width for each device
- $phone-min : $phone;
- $phone-max : $smart;
-
- $smart-min : $smart;
- $smart-max : $tablet7;
-
- $tablet7-min : $tablet7;
- $tablet7-max : $tablet10;
-
- $tablet10-min : $tablet10;
- $tablet10-max : $pcsmall;
-
- $pcsmall-min : $pcsmall;
- $pcsmall-max : $pclarge;
-
- $pclarge-min : $pclarge;
- $pclarge-max : "none";
-
- $min-width : toEm($pclarge); // start with the largest value for reducing later
- $max-width : toEm($phone); // start with the smallest value for increasing later
-
- // scan all the devices given, use the smallest min-width and largest max-width
- @for $i from 1 through length($media) {
- $device : nth($media, $i);
-
- // Display the css for the default device (any)
- @if $device == "default" {
- @content;
- } @else {
- // Or display the css for each given device using media Breakbpoints
-
- @if ($device == "phone") {
- @if ($min-width > $phone-min) { $min-width : $phone-min; }
- @if ($max-width < $phone-max) { $max-width : $phone-max; }
- }
-
- @else if ($device == "smart") {
- @if ($min-width > $smart-min) { $min-width : $smart-min; }
- @if ($max-width < $smart-max) { $max-width : $smart-max; }
- }
-
- @else if ($device == "tablet7") {
- @if ($min-width > $tablet7-min) { $min-width : $tablet7-min; }
- @if ($max-width < $tablet7-max) { $max-width : $tablet7-max; }
- }
-
- @else if ($device == "tablet10") {
- @if ($min-width > $tablet10-min) { $min-width : $tablet10-min; }
- @if ($max-width < $tablet10-max) { $max-width : $tablet10-max; }
- }
-
- @else if ($device == "pcsmall") {
- @if ($min-width > $pcsmall-min) { $min-width : $pcsmall-min; }
- @if ($max-width < $pcsmall-max) { $max-width : $pcsmall-max; }
- }
-
- @else if ($device == "pclarge") {
- @if ($min-width > $pclarge-min) { $min-width : $pclarge-min; }
- $max-width : $pclarge-max;
- // does not have a max-width
- }
- }
- }
-
- // Use this for seeing the results of media query in console
- // @debug $media;
- // @debug min $min-width max $max-width;
-
- // create a single media query
- @if ($max-width == $pclarge-max) {
- // don't set a max width if highest-resolution device is targeted
- @media (min-width: $min-width) { @content; }
- } @else {
- @media (min-width: $min-width) and (max-width: $max-width) { @content; }
- }
-}
-
-@mixin checkerPattern{
- $light-color : transparent;
- $dark-color : rgba(gray, 0.14);
- $size : $grid * 2;
-
- background-color: $light-color;
- background-image:
- linear-gradient(45deg, $dark-color 25%, transparent 25%, transparent 75%, $dark-color 75%, $dark-color),
- linear-gradient(45deg, $dark-color 25%, transparent 25%, transparent 75%, $dark-color 75%, $dark-color),
- ;
- background-size: $size $size;
- background-position: 0 0, ($size / 2) ($size / 2);
-}
-
-// Misc Documentation
-//
-// - min-height doesn't work on tables
-// height is the equivalent
-// see: http://stackoverflow.com/questions/7790222/css-display-table-min-height-not-working
-//
-//
-
-// -----------------------------------------------------------------
-// > @stoikerty https://github.com/stoikerty/universal-dev-toolkit
diff --git a/packages/dev-toolkit/starting-point/src/client/views/Shell.jsx b/packages/dev-toolkit/starting-point/src/client/views/Shell.jsx
deleted file mode 100644
index d9facadd..00000000
--- a/packages/dev-toolkit/starting-point/src/client/views/Shell.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { PropTypes } from 'react';
-
-import s from './Shell/_style.scss';
-
-// `Shell.js`
-// --------------------
-// Having a Shell is perfect if you want to transition between different features of your app or
-// managing scroll-state and navigation.
-
-const displayName = 'Shell';
-const defaultProps = {};
-const propTypes = {
- children: PropTypes.node,
-};
-
-const component = (props) => (
-
- {'Shell'}
- {props.children}
-
-);
-
-component.displayName = displayName;
-component.defaultProps = defaultProps;
-component.propTypes = propTypes;
-export default component;
diff --git a/packages/dev-toolkit/starting-point/src/client/views/Shell/_style.scss b/packages/dev-toolkit/starting-point/src/client/views/Shell/_style.scss
deleted file mode 100644
index e2737c6b..00000000
--- a/packages/dev-toolkit/starting-point/src/client/views/Shell/_style.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Import global config in every file
-@import 'style/config';
-
-// Import global style once
-@import 'style/global';
-
-.shell{
- // Positioning mixin. Better have a positioned element than regretting it later...
- @include position(relative, block, 100%);
- float : left;
- padding : $grid;
-
- // Use proto to design prototype component with random background-color & opacity
- // you will see this as yellow
- @include proto(2, 0.2);
-}
diff --git a/packages/dev-toolkit/starting-point/src/client/views/features/Home.jsx b/packages/dev-toolkit/starting-point/src/client/views/features/Home.jsx
deleted file mode 100644
index 6fdb59e9..00000000
--- a/packages/dev-toolkit/starting-point/src/client/views/features/Home.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-import s from './Home/_style.scss';
-
-const displayName = 'Home';
-const defaultProps = {};
-const propTypes = {};
-
-const component = () => (
-
- {'Home Feature'}
-
-);
-
-component.displayName = displayName;
-component.defaultProps = defaultProps;
-component.propTypes = propTypes;
-export default component;
diff --git a/packages/dev-toolkit/starting-point/src/client/views/features/Home/_style.scss b/packages/dev-toolkit/starting-point/src/client/views/features/Home/_style.scss
deleted file mode 100644
index 0f440ec2..00000000
--- a/packages/dev-toolkit/starting-point/src/client/views/features/Home/_style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'style/config';
-
-.home{
- @include position(relative, block, 100%);
- float : left;
- margin : $grid 0 0;
- padding : $grid;
-
- // you will see this as transparent-blue
- @include proto(1, 0.3);
-}
diff --git a/packages/dev-toolkit/starting-point/src/server/app.js b/packages/dev-toolkit/starting-point/src/server/app.js
deleted file mode 100644
index 32319b20..00000000
--- a/packages/dev-toolkit/starting-point/src/server/app.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// The application constructor is separate
-import App from './bootstrap';
-
-// NOTE:
-// The toolkit expects the `start` an `use`-methods below to be available.
-// It will use the methods for the development middleware, for running
-// the server and for generating static-rendered builds.
-
-// Launch server later with webpack using an exported class
-// The class needs `start` & `use`-methods
-export default class {
- // Use this to start the server
- start(options = { message: null }) {
- App.start({ message: options.message });
- }
-
- // Bind the express middleware for webpack, this method should
- // redirect to & act in the same way as the express `use`-method.
- use(...middlewareOptions) {
- App.use(...middlewareOptions);
- }
-}
diff --git a/packages/dev-toolkit/starting-point/src/server/bootstrap.js b/packages/dev-toolkit/starting-point/src/server/bootstrap.js
deleted file mode 100644
index 9a83665f..00000000
--- a/packages/dev-toolkit/starting-point/src/server/bootstrap.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import express from 'express';
-import compression from 'compression';
-import serveStatic from 'serve-static';
-import hbs from 'express-handlebars';
-import router from './router';
-
-export default new class App {
- constructor() {
- // server config
- this.hostname = process.env.HOST || 'localhost';
- this.port = process.env.PORT || 2000;
-
- // bind class methods
- this.init = this.init.bind(this);
- this.start = this.start.bind(this);
- this.use = this.use.bind(this);
-
- // Create express server instance & initialize
- this.express = express();
- this.init();
-
- // Create application logging functionality.
- // A neat console wrapper that keeps the correct line number.
- // http://stackoverflow.com/questions/13815640/a-proper-wrapper-for-console-log-with-correct-line-number
- /* eslint-disable no-console */
- this.log = (function log() {
- return console.log.bind(console);
- }());
- /* eslint-enable no-console */
- }
-
- init() {
- this.express.engine('hbs', hbs({ extname: 'hbs' }));
- this.express.set('views', `${process.cwd()}/src/server/views`);
- this.express.set('view engine', 'hbs');
- this.express.locals.settings['x-powered-by'] = false;
- this.express.disable('x-powered-by');
- }
-
- // Launch express server with react-router
- start(options = { message: null, serveBuild: false }) {
- // use gzip compression
- this.express.use(compression());
-
- if (options.serveBuild) {
- // serve build folder
- this.express.use(serveStatic('build'));
- }
-
- // Listen on specified port
- this.express.listen(this.port, (error) => {
- if (error) {
- this.express.error(error);
- } else {
- this.log(`\n==> ๐ Listening on http://${this.hostname}:${this.port}\n`);
- if (options.message) {
- this.log(options.message);
- }
- }
- });
-
- // start react-router
- this.express.use(router);
- }
-
- // bind express middleware
- use(...middlewareOptions) {
- this.express.use(...middlewareOptions);
- }
-};
diff --git a/packages/dev-toolkit/starting-point/src/server/public-files/Favicon.png b/packages/dev-toolkit/starting-point/src/server/public-files/Favicon.png
deleted file mode 100644
index fd76d825..00000000
Binary files a/packages/dev-toolkit/starting-point/src/server/public-files/Favicon.png and /dev/null differ
diff --git a/packages/dev-toolkit/starting-point/src/server/public-files/favicon.ico b/packages/dev-toolkit/starting-point/src/server/public-files/favicon.ico
deleted file mode 100644
index cf0776c0..00000000
Binary files a/packages/dev-toolkit/starting-point/src/server/public-files/favicon.ico and /dev/null differ
diff --git a/packages/dev-toolkit/starting-point/src/server/router.jsx b/packages/dev-toolkit/starting-point/src/server/router.jsx
deleted file mode 100644
index 1378d67a..00000000
--- a/packages/dev-toolkit/starting-point/src/server/router.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-import { match, RouterContext } from 'react-router';
-
-import { useServerRendering } from 'src/settings';
-import routes from '../client/routes';
-
-// React Router Boilerplate
-// Note:
-// Adapted from server-rendering example: https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ServerRendering.md
-export default (req, res) => {
- match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
- if (error) {
- res.status(500).send(error.message);
- } else if (redirectLocation) {
- res.redirect(302, redirectLocation.pathname + redirectLocation.search);
- } else if (renderProps) {
- const reactHtml = useServerRendering ?
- ReactDOM.renderToString(Universal App
- {{{reactHtml}}}
-
-
-{{#if htmlWebpackPlugin.options.creatingBuild}}
- {{#each htmlWebpackPlugin.files.chunks}}
-
- {{/each}}
-{{else}}
-
-
-{{/if}}
-
-
diff --git a/packages/dev-toolkit/starting-point/src/settings.js b/packages/dev-toolkit/starting-point/src/settings.js
deleted file mode 100644
index 5fb0f17d..00000000
--- a/packages/dev-toolkit/starting-point/src/settings.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// Shared settings between client and server
-
-export const useServerRendering = false;
-export const removeMe = true;
diff --git a/packages/dynamic-pages/.eslintignore b/packages/dynamic-pages/.eslintignore
deleted file mode 100644
index 5e3db2aa..00000000
--- a/packages/dynamic-pages/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-**/dist/*.js
diff --git a/packages/dynamic-pages/.npmignore b/packages/dynamic-pages/.npmignore
deleted file mode 100644
index 3bbdd9bb..00000000
--- a/packages/dynamic-pages/.npmignore
+++ /dev/null
@@ -1,6 +0,0 @@
-#############
-## Node
-#############
-
-node_modules/
-npm-debug.log
diff --git a/packages/dynamic-pages/Readme.md b/packages/dynamic-pages/Readme.md
deleted file mode 100644
index 9f3b36c9..00000000
--- a/packages/dynamic-pages/Readme.md
+++ /dev/null
@@ -1,8 +0,0 @@
-#### Dynamic Pages
-Dynamic page-loading utilities for react-router.{'Minimal App'}
;
diff --git a/templates/minimal/src/server/index.js b/templates/minimal/src/server/index.js
new file mode 100644
index 00000000..6bef0392
--- /dev/null
+++ b/templates/minimal/src/server/index.js
@@ -0,0 +1,75 @@
+import express from 'express';
+import expressHandlebars from 'express-handlebars';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { isDev } from 'dev-toolkit/settings';
+
+// Unlike the client app, the server app can only ever be run in Node.js
+// we therefore have direct access to Node-specific things like `process`
+const serverPort = process.env.SERVER_PORT || 3000;
+const serverViews = path.resolve(process.cwd(), 'src/server/views');
+const rootComponentPath = path.resolve(process.cwd(), 'src/client/RootComponent');
+
+export default new class {
+ constructor() {
+ // Let dev-toolkit know about express by setting `this.express`,
+ // this allows dev-toolkit to attach the dev-server middleware to webpack
+ this.express = express();
+
+ // Handlebars is used for server-rendering the html template in `src/server/views`
+ this.handlebarsInstance = expressHandlebars.create();
+
+ // Use Handlebars as the view engine in express
+ this.express.engine('hbs', this.handlebarsInstance.engine);
+ this.express.set('views', serverViews).set('view engine', 'hbs');
+ }
+
+ // Ability to launch server later (allows dev-toolkit to bind webpack-middleware before start)
+ start({ assets, buildFolder }) {
+ // Provide a simple health-check endpoint to see if the server is alive
+ this.express.get('/health', (req, res) => res.send('OK'));
+
+ if (isDev) {
+ // Render template with no prerendered html in development mode
+ this.express.use((req, res) =>
+ res.status(200).render('template', { assets, renderedHtml: '' })
+ );
+ } else {
+ // Make assets in build folder available to the client.
+ this.express.use(express.static(buildFolder));
+ }
+
+ // Run the express server by listening on the specified port
+ this.serverInstance = this.express.listen(serverPort, () => {
+ // eslint-disable-next-line no-console
+ console.log(`Server is listening on port ${serverPort}`);
+ });
+ }
+
+ // Rendering of the html on build happens through this preRender-method
+ preRender({ assets, buildFolder }) {
+ // return a Promise to dev-toolkit
+ return new Promise((resolve, reject) => {
+ // Load Client App via RootComponent
+ import(rootComponentPath).then(module => {
+ const RootComponent = module.default;
+ // Here handlebars is used to generate the html without express and without webpack
+ this.handlebarsInstance
+ .render(path.join(serverViews, 'template.hbs'), {
+ assets,
+ renderedHtml: renderToString({{{ renderedHtml }}}
+
+
+
+
+
+
diff --git a/templates/serverless/.babelrc b/templates/serverless/.babelrc
new file mode 100644
index 00000000..adb9e998
--- /dev/null
+++ b/templates/serverless/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["dev-toolkit"] }
diff --git a/templates/serverless/.gitignore b/templates/serverless/.gitignore
new file mode 100644
index 00000000..fb8e5e34
--- /dev/null
+++ b/templates/serverless/.gitignore
@@ -0,0 +1,7 @@
+# Generated Files
+build/
+dist/
+
+# Node
+node_modules/
+npm-debug.log
diff --git a/templates/serverless/.prettierrc b/templates/serverless/.prettierrc
new file mode 100644
index 00000000..a44463ca
--- /dev/null
+++ b/templates/serverless/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/templates/serverless/handler.js b/templates/serverless/handler.js
new file mode 100644
index 00000000..c4ea3fff
--- /dev/null
+++ b/templates/serverless/handler.js
@@ -0,0 +1,9 @@
+const path = require('path');
+
+// Example of programmatic usage of dev-toolkit with a serverless-type application
+require('dev-toolkit').default({
+ command: 'preRender',
+ options: {
+ entryPoint: path.resolve(process.cwd(), 'src/server/preRender'),
+ },
+});
diff --git a/templates/serverless/package.json b/templates/serverless/package.json
new file mode 100644
index 00000000..14594be8
--- /dev/null
+++ b/templates/serverless/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "dev-toolkit-serverless-template",
+ "version": "1.0.0",
+ "description": "universal app",
+ "author": "",
+ "scripts": {
+ "start": "npm run build && npm run serve",
+ "dev": "cross-env NODE_ENV=development dev-toolkit watch",
+ "build": "cross-env NODE_ENV=production dev-toolkit build",
+ "serve": "cross-env NODE_ENV=production SERVER_PORT=8080 dev-toolkit serve",
+ "lint": "prettier --write './**/*.js'"
+ },
+ "dependencies": {
+ "babel-preset-dev-toolkit": "1.0.0",
+ "clear-module": "^2.1.0",
+ "cross-env": "^5.0.5",
+ "dev-toolkit": "6.0.2",
+ "express": "^4.15.5",
+ "express-handlebars": "^3.0.0",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
+ },
+ "devDependencies": {
+ "prettier": "1.7.4"
+ }
+}
diff --git a/templates/serverless/src/client/RootComponent.js b/templates/serverless/src/client/RootComponent.js
new file mode 100644
index 00000000..3e7aaa56
--- /dev/null
+++ b/templates/serverless/src/client/RootComponent.js
@@ -0,0 +1,12 @@
+// This is the main component that both the client & the server touch first.
+//
+// It's likely that this component will stay mostly empty since it sits at the root.
+// It might contain your chosen routing solution or redux-provider.
+import React from 'react';
+import App from './views/App';
+
+const displayName = 'RootComponent';
+const component = () => {'Serverless App'}
;
diff --git a/templates/serverless/src/server/index.js b/templates/serverless/src/server/index.js
new file mode 100644
index 00000000..1d29d145
--- /dev/null
+++ b/templates/serverless/src/server/index.js
@@ -0,0 +1,57 @@
+import express from 'express';
+import expressHandlebars from 'express-handlebars';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import clearModule from 'clear-module';
+import { isDev } from 'dev-toolkit/settings';
+
+// Unlike the client app, the server app can only ever be run in Node.js
+// we therefore have direct access to Node-specific things like `process`
+const serverPort = process.env.SERVER_PORT || 3000;
+const serverViews = path.resolve(process.cwd(), 'src/server/views');
+const rootComponentPath = path.resolve(process.cwd(), 'src/client/RootComponent');
+
+export default new class {
+ constructor() {
+ // Let dev-toolkit know about express by setting `this.express`,
+ // this allows dev-toolkit to attach the dev-server middleware to webpack
+ this.express = express();
+
+ // Use Handlebars as the view engine in express
+ this.express.engine('hbs', expressHandlebars.create().engine);
+ this.express.set('views', serverViews).set('view engine', 'hbs');
+ }
+
+ // Ability to launch server later (allows dev-toolkit to bind webpack-middleware before start)
+ start({ assets, buildFolder }) {
+ // Only server-render during development
+ if (isDev) {
+ // Render the template-file on any incoming requests
+ this.express.use((req, res) => {
+ // Remove Client App from cache (cheap server-side Hot-Reload)
+ if (isDev) {
+ clearModule(rootComponentPath);
+ }
+ // Load newest version of Client App via RootComponent
+ import(rootComponentPath).then(module => {
+ const RootComponent = module.default;
+ res.status(200).render('template', {
+ assets,
+ renderedHtml: renderToString({{{ renderedHtml }}}
+
+
+
+
+
+
diff --git a/templates/standard/.babelrc b/templates/standard/.babelrc
new file mode 100644
index 00000000..adb9e998
--- /dev/null
+++ b/templates/standard/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["dev-toolkit"] }
diff --git a/templates/standard/.gitignore b/templates/standard/.gitignore
new file mode 100644
index 00000000..fb8e5e34
--- /dev/null
+++ b/templates/standard/.gitignore
@@ -0,0 +1,7 @@
+# Generated Files
+build/
+dist/
+
+# Node
+node_modules/
+npm-debug.log
diff --git a/templates/standard/.prettierrc b/templates/standard/.prettierrc
new file mode 100644
index 00000000..a44463ca
--- /dev/null
+++ b/templates/standard/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/templates/standard/dev-toolkit.config.js b/templates/standard/dev-toolkit.config.js
new file mode 100644
index 00000000..9bdc5e7f
--- /dev/null
+++ b/templates/standard/dev-toolkit.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ devToolkit: {
+ usePreRender: true,
+ sharedEnvs: ['MY_CUSTOM_ENV'],
+ },
+
+ // Use custom webpack configuration here
+ webpack: {
+ loaders: function(options) {
+ return [];
+ },
+ plugins: function(options) {
+ return [];
+ },
+ },
+};
diff --git a/templates/standard/package.json b/templates/standard/package.json
new file mode 100644
index 00000000..a9ff77a5
--- /dev/null
+++ b/templates/standard/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "dev-toolkit-standard-template",
+ "version": "1.0.0",
+ "description": "universal app",
+ "author": "",
+ "scripts": {
+ "start": "npm run build && npm run serve",
+ "dev": "better-npm-run development",
+ "build": "better-npm-run create-build",
+ "serve": "better-npm-run run-server",
+ "lint": "prettier --write './**/*.js'"
+ },
+ "betterScripts": {
+ "development": {
+ "command": "dev-toolkit watch",
+ "env": {
+ "NODE_ENV": "development",
+ "MY_CUSTOM_ENV": "foo"
+ }
+ },
+ "create-build": {
+ "command": "dev-toolkit build",
+ "env": {
+ "NODE_ENV": "production"
+ }
+ },
+ "run-server": {
+ "command": "dev-toolkit serve",
+ "env": {
+ "NODE_ENV": "production",
+ "SERVER_PORT": "8080"
+ }
+ }
+ },
+ "dependencies": {
+ "babel-preset-dev-toolkit": "1.0.0",
+ "better-npm-run": "^0.1.0",
+ "clear-module": "^2.1.0",
+ "dev-toolkit": "6.0.2",
+ "express": "^4.15.5",
+ "express-handlebars": "^3.0.0",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
+ },
+ "devDependencies": {
+ "prettier": "1.7.4"
+ }
+}
diff --git a/templates/standard/src/client/RootComponent.js b/templates/standard/src/client/RootComponent.js
new file mode 100644
index 00000000..8fad13e9
--- /dev/null
+++ b/templates/standard/src/client/RootComponent.js
@@ -0,0 +1,17 @@
+// This is the main component that both the client & the server touch first.
+//
+// It's likely that this component will stay mostly empty since it sits at the root.
+// It might contain your chosen routing solution or redux-provider.
+import React from 'react';
+
+import { isClient } from 'dev-toolkit/settings';
+import App from './views/App';
+
+// This should log both on the client and the server, remove once you understand how it works.
+console.log(`Client App has run on ${isClient ? 'Client' : 'Server'}... (remove-me)`);
+
+const displayName = 'RootComponent';
+const component = () =>
+ {'App View running in:'}
+ {`Production? ${isProd}`}
+
+);
diff --git a/templates/standard/src/server/index.js b/templates/standard/src/server/index.js
new file mode 100644
index 00000000..171e511e
--- /dev/null
+++ b/templates/standard/src/server/index.js
@@ -0,0 +1,103 @@
+import express from 'express';
+import expressHandlebars from 'express-handlebars';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import clearModule from 'clear-module';
+import { isDev, isProd, usePreRender } from 'dev-toolkit/settings';
+
+// Unlike the client app, the server app can only ever be run in Node.js
+// we therefore have direct access to Node-specific things like `process`
+const serverPort = process.env.SERVER_PORT || 3000;
+const projectDirectory = process.cwd();
+const clientFolder = path.resolve(projectDirectory, 'src/client');
+const serverViews = path.resolve(projectDirectory, 'src/server/views');
+const rootComponentPath = path.resolve(clientFolder, 'RootComponent');
+
+export default new class {
+ constructor() {
+ // Let dev-toolkit know about express by setting `this.express`,
+ // this allows dev-toolkit to attach the dev-server middleware to webpack
+ this.express = express();
+
+ // Handlebars is used for server-rendering the html template in `src/server/views`
+ this.handlebarsInstance = expressHandlebars.create();
+
+ // Use Handlebars as the view engine in express
+ this.express.engine('hbs', this.handlebarsInstance.engine);
+ this.express.set('views', serverViews).set('view engine', 'hbs');
+
+ // Prevent express from sending powered-by header
+ this.express.disable('x-powered-by');
+ }
+
+ // Ability to launch server later (allows dev-toolkit to bind webpack-middleware before start)
+ start({ assets, buildFolder }) {
+ // Provide a simple health-check endpoint to see if the server is alive
+ this.express.get('/health', (req, res) => res.send('OK'));
+
+ // Make assets in build folder available to the client.
+ // In development, the `webpack-dev-middleware` used by dev-toolkit takes care of this.
+ if (!isDev) {
+ this.express.use(express.static(buildFolder));
+ }
+
+ // By default, dev-toolkit serves the build folder with pre-rendered files.
+ if (isDev || (isProd && !usePreRender)) {
+ // Render the template-file on any incoming requests
+ this.express.use((req, res) => {
+ // Remove Client App from cache (cheap server-side Hot-Reload)
+ if (isDev) {
+ // NOTE: We need to explicitly clear all the modules in the client directory.
+ // It's a nice to have. Not guaranteed to always work, take it with a grain of salt.
+ clearModule.match(new RegExp(`^${clientFolder}`, 'i'));
+ }
+ // Load newest version of Client App via RootComponent
+ import(rootComponentPath).then(module => {
+ const RootComponent = module.default;
+ res.status(200).render('template', {
+ assets,
+ renderedHtml: renderToString({{{ renderedHtml }}}
+
+
+
+
+
+
diff --git a/templates/standard/src/settings.js b/templates/standard/src/settings.js
new file mode 100644
index 00000000..df7d308d
--- /dev/null
+++ b/templates/standard/src/settings.js
@@ -0,0 +1,9 @@
+// Get environment variables shared between the client & server
+// NOTE: `NODE_ENV` is available by default but for security reasons, all other
+// environment variables must be declared explicitly in `dev-toolkit.config.js`.
+import { sharedEnvs } from 'dev-toolkit/settings';
+
+// Example of explicitly declared env which will be bundled into client-bundle.
+// Make sure you understand how these envs flow through the app & into the client.
+// Hint: Try running `npm run dev` and compare output with `npm run start`
+export const customEnvContent = sharedEnvs.MY_CUSTOM_ENV;
diff --git a/templates/with-eslint/.babelrc b/templates/with-eslint/.babelrc
new file mode 100644
index 00000000..adb9e998
--- /dev/null
+++ b/templates/with-eslint/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["dev-toolkit"] }
diff --git a/templates/with-eslint/.eslintrc b/templates/with-eslint/.eslintrc
new file mode 100644
index 00000000..9c9beec4
--- /dev/null
+++ b/templates/with-eslint/.eslintrc
@@ -0,0 +1,8 @@
+{
+ "extends": ["airbnb", "dev-toolkit", "prettier"],
+ "plugins": ["prettier"],
+ "rules": {
+ "prettier/prettier": "error",
+ "import/prefer-default-export": "off"
+ }
+}
diff --git a/templates/with-eslint/.gitignore b/templates/with-eslint/.gitignore
new file mode 100644
index 00000000..fb8e5e34
--- /dev/null
+++ b/templates/with-eslint/.gitignore
@@ -0,0 +1,7 @@
+# Generated Files
+build/
+dist/
+
+# Node
+node_modules/
+npm-debug.log
diff --git a/templates/with-eslint/.prettierrc b/templates/with-eslint/.prettierrc
new file mode 100644
index 00000000..a44463ca
--- /dev/null
+++ b/templates/with-eslint/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/templates/with-eslint/dev-toolkit.config.js b/templates/with-eslint/dev-toolkit.config.js
new file mode 100644
index 00000000..9bdc5e7f
--- /dev/null
+++ b/templates/with-eslint/dev-toolkit.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ devToolkit: {
+ usePreRender: true,
+ sharedEnvs: ['MY_CUSTOM_ENV'],
+ },
+
+ // Use custom webpack configuration here
+ webpack: {
+ loaders: function(options) {
+ return [];
+ },
+ plugins: function(options) {
+ return [];
+ },
+ },
+};
diff --git a/templates/with-eslint/package.json b/templates/with-eslint/package.json
new file mode 100644
index 00000000..b435e1c6
--- /dev/null
+++ b/templates/with-eslint/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "dev-toolkit-with-eslint-template",
+ "version": "1.0.0",
+ "description": "universal app",
+ "author": "",
+ "scripts": {
+ "start": "npm run build && npm run serve",
+ "dev": "better-npm-run development",
+ "build": "better-npm-run create-build",
+ "serve": "better-npm-run run-server",
+ "lint": "prettier --write './**/*.js' && eslint 'src/**/*.js'"
+ },
+ "betterScripts": {
+ "development": {
+ "command": "dev-toolkit watch",
+ "env": {
+ "NODE_ENV": "development",
+ "MY_CUSTOM_ENV": "foo"
+ }
+ },
+ "create-build": {
+ "command": "dev-toolkit build",
+ "env": {
+ "NODE_ENV": "production"
+ }
+ },
+ "run-server": {
+ "command": "dev-toolkit serve",
+ "env": {
+ "NODE_ENV": "production",
+ "SERVER_PORT": "8080"
+ }
+ }
+ },
+ "dependencies": {
+ "babel-preset-dev-toolkit": "1.0.0",
+ "better-npm-run": "^0.1.0",
+ "clear-module": "^2.1.0",
+ "dev-toolkit": "6.0.2",
+ "express": "^4.15.5",
+ "express-handlebars": "^3.0.0",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
+ },
+ "devDependencies": {
+ "babel-eslint": "8.0.1",
+ "eslint": "^4.8.0",
+ "eslint-config-airbnb": "^16.0.0",
+ "eslint-config-dev-toolkit": "1.0.0",
+ "eslint-config-prettier": "2.6.0",
+ "eslint-import-resolver-babel-module": "2.2.1",
+ "eslint-plugin-import": "^2.7.0",
+ "eslint-plugin-jsx-a11y": "^6.0.2",
+ "eslint-plugin-prettier": "2.3.1",
+ "eslint-plugin-react": "^7.4.0",
+ "prettier": "1.7.4"
+ }
+}
diff --git a/templates/with-eslint/src/client/RootComponent.js b/templates/with-eslint/src/client/RootComponent.js
new file mode 100644
index 00000000..8fad13e9
--- /dev/null
+++ b/templates/with-eslint/src/client/RootComponent.js
@@ -0,0 +1,17 @@
+// This is the main component that both the client & the server touch first.
+//
+// It's likely that this component will stay mostly empty since it sits at the root.
+// It might contain your chosen routing solution or redux-provider.
+import React from 'react';
+
+import { isClient } from 'dev-toolkit/settings';
+import App from './views/App';
+
+// This should log both on the client and the server, remove once you understand how it works.
+console.log(`Client App has run on ${isClient ? 'Client' : 'Server'}... (remove-me)`);
+
+const displayName = 'RootComponent';
+const component = () =>
+ {'App View running in:'}
+ {`Production? ${isProd}`}
+
+);
diff --git a/templates/with-eslint/src/server/index.js b/templates/with-eslint/src/server/index.js
new file mode 100644
index 00000000..171e511e
--- /dev/null
+++ b/templates/with-eslint/src/server/index.js
@@ -0,0 +1,103 @@
+import express from 'express';
+import expressHandlebars from 'express-handlebars';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import clearModule from 'clear-module';
+import { isDev, isProd, usePreRender } from 'dev-toolkit/settings';
+
+// Unlike the client app, the server app can only ever be run in Node.js
+// we therefore have direct access to Node-specific things like `process`
+const serverPort = process.env.SERVER_PORT || 3000;
+const projectDirectory = process.cwd();
+const clientFolder = path.resolve(projectDirectory, 'src/client');
+const serverViews = path.resolve(projectDirectory, 'src/server/views');
+const rootComponentPath = path.resolve(clientFolder, 'RootComponent');
+
+export default new class {
+ constructor() {
+ // Let dev-toolkit know about express by setting `this.express`,
+ // this allows dev-toolkit to attach the dev-server middleware to webpack
+ this.express = express();
+
+ // Handlebars is used for server-rendering the html template in `src/server/views`
+ this.handlebarsInstance = expressHandlebars.create();
+
+ // Use Handlebars as the view engine in express
+ this.express.engine('hbs', this.handlebarsInstance.engine);
+ this.express.set('views', serverViews).set('view engine', 'hbs');
+
+ // Prevent express from sending powered-by header
+ this.express.disable('x-powered-by');
+ }
+
+ // Ability to launch server later (allows dev-toolkit to bind webpack-middleware before start)
+ start({ assets, buildFolder }) {
+ // Provide a simple health-check endpoint to see if the server is alive
+ this.express.get('/health', (req, res) => res.send('OK'));
+
+ // Make assets in build folder available to the client.
+ // In development, the `webpack-dev-middleware` used by dev-toolkit takes care of this.
+ if (!isDev) {
+ this.express.use(express.static(buildFolder));
+ }
+
+ // By default, dev-toolkit serves the build folder with pre-rendered files.
+ if (isDev || (isProd && !usePreRender)) {
+ // Render the template-file on any incoming requests
+ this.express.use((req, res) => {
+ // Remove Client App from cache (cheap server-side Hot-Reload)
+ if (isDev) {
+ // NOTE: We need to explicitly clear all the modules in the client directory.
+ // It's a nice to have. Not guaranteed to always work, take it with a grain of salt.
+ clearModule.match(new RegExp(`^${clientFolder}`, 'i'));
+ }
+ // Load newest version of Client App via RootComponent
+ import(rootComponentPath).then(module => {
+ const RootComponent = module.default;
+ res.status(200).render('template', {
+ assets,
+ renderedHtml: renderToString({{{ renderedHtml }}}
+
+
+
+
+
+
diff --git a/templates/with-eslint/src/settings.js b/templates/with-eslint/src/settings.js
new file mode 100644
index 00000000..df7d308d
--- /dev/null
+++ b/templates/with-eslint/src/settings.js
@@ -0,0 +1,9 @@
+// Get environment variables shared between the client & server
+// NOTE: `NODE_ENV` is available by default but for security reasons, all other
+// environment variables must be declared explicitly in `dev-toolkit.config.js`.
+import { sharedEnvs } from 'dev-toolkit/settings';
+
+// Example of explicitly declared env which will be bundled into client-bundle.
+// Make sure you understand how these envs flow through the app & into the client.
+// Hint: Try running `npm run dev` and compare output with `npm run start`
+export const customEnvContent = sharedEnvs.MY_CUSTOM_ENV;
diff --git a/templates/with-sass/.babelrc b/templates/with-sass/.babelrc
new file mode 100644
index 00000000..adb9e998
--- /dev/null
+++ b/templates/with-sass/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["dev-toolkit"] }
diff --git a/templates/with-sass/.gitignore b/templates/with-sass/.gitignore
new file mode 100644
index 00000000..fb8e5e34
--- /dev/null
+++ b/templates/with-sass/.gitignore
@@ -0,0 +1,7 @@
+# Generated Files
+build/
+dist/
+
+# Node
+node_modules/
+npm-debug.log
diff --git a/templates/with-sass/.prettierrc b/templates/with-sass/.prettierrc
new file mode 100644
index 00000000..a44463ca
--- /dev/null
+++ b/templates/with-sass/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/templates/with-sass/dev-toolkit.config.js b/templates/with-sass/dev-toolkit.config.js
new file mode 100644
index 00000000..484a12dc
--- /dev/null
+++ b/templates/with-sass/dev-toolkit.config.js
@@ -0,0 +1,57 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path');
+
+// The hashing-convention for generated css-classes
+const cssChunkNaming = '[name]__[local]___[hash:base64:5]';
+
+// We need to define where the sass-files will be located
+const projectDirectory = process.cwd();
+const clientFolder = path.resolve(projectDirectory, 'src/client');
+const includePaths = [clientFolder];
+
+// Configuration needed both, for development and for generating a build
+const sassLoaders = [
+ `css-loader?modules&importLoaders=1&localIdentName=${cssChunkNaming}`,
+ 'postcss-loader',
+ {
+ loader: 'sass-loader',
+ // Include any paths that the loader needs to know about
+ options: { includePaths: includePaths },
+ },
+];
+
+module.exports = {
+ // Exports that are shared between this file and `nodeHooks.js`
+ cssChunkNaming: cssChunkNaming,
+ includePaths: includePaths,
+
+ // Exports for dev-toolkit to pick up
+ webpack: {
+ loaders: function(options) {
+ return [
+ {
+ test: /\.scss$/,
+ use: options.creatingBuild
+ ? // Extract styles from all files found during compilation
+ // Try `npm start` and then loading up your browser without javascript
+ ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: sassLoaders,
+ })
+ : // In development, we can use loaders directly
+ // NOTE: This means that on the client, the first render in the browser
+ // (before javascript is loaded) will not have styles available.
+ [{ loader: 'style-loader' }].concat(sassLoaders),
+ },
+ ];
+ },
+
+ // Generate a single css-file on build from all extracted files
+ plugins: function(options) {
+ const cssFileToGenerate = options.namingConvention + '.css';
+ return options.creatingBuild
+ ? [new ExtractTextPlugin({ filename: cssFileToGenerate, allChunks: true })]
+ : [];
+ },
+ },
+};
diff --git a/templates/with-sass/nodeHooks.js b/templates/with-sass/nodeHooks.js
new file mode 100644
index 00000000..430acdbd
--- /dev/null
+++ b/templates/with-sass/nodeHooks.js
@@ -0,0 +1,27 @@
+// This file runs before `babel-register`, before node knows about `.babelrc`,
+// therefore it needs to be written in ES5.
+const cssHook = require('css-modules-require-hook');
+const path = require('path');
+const sass = require('node-sass');
+
+// Retrieve settings that are shared between node-hooks and webpack
+const includePaths = require('./dev-toolkit.config').includePaths;
+const cssChunkNaming = require('./dev-toolkit.config').cssChunkNaming;
+
+// Make node understand sass-files by hooking into the file extension
+cssHook({
+ extensions: ['.scss'],
+
+ // Share the same naming-convention of `css-loader`
+ generateScopedName: cssChunkNaming,
+
+ // Process files with same settings as `sass-loader` and return css.
+ preprocessCss: (cssFileData, cssFilePath) => {
+ return sass.renderSync({
+ data: cssFileData,
+ // Include any paths that are part of the config,
+ // as well as the current path where css-file resides.
+ includePaths: [].concat(includePaths).concat([path.dirname(cssFilePath)]),
+ }).css;
+ },
+});
diff --git a/templates/with-sass/package.json b/templates/with-sass/package.json
new file mode 100644
index 00000000..1d4f7861
--- /dev/null
+++ b/templates/with-sass/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "dev-toolkit-with-sass-template",
+ "version": "1.0.0",
+ "description": "universal app",
+ "author": "",
+ "scripts": {
+ "start": "npm run build && npm run serve",
+ "dev": "cross-env NODE_ENV=development dev-toolkit watch",
+ "build": "cross-env NODE_ENV=production dev-toolkit build",
+ "serve": "cross-env NODE_ENV=production SERVER_PORT=8080 dev-toolkit serve",
+ "lint": "prettier --write './**/*.js' './**/*.scss'"
+ },
+ "dependencies": {
+ "autoprefixer": "^7.1.5",
+ "babel-preset-dev-toolkit": "1.0.0",
+ "clear-module": "^2.1.0",
+ "cross-env": "^5.0.5",
+ "css-loader": "^0.28.7",
+ "css-modules-require-hook": "^4.2.2",
+ "dev-toolkit": "6.0.2",
+ "express": "^4.15.5",
+ "express-handlebars": "^3.0.0",
+ "extract-text-webpack-plugin": "^3.0.1",
+ "node-sass": "^4.5.3",
+ "postcss-loader": "^2.0.7",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.19.0",
+ "webpack": "^3.7.1"
+ },
+ "devDependencies": {
+ "prettier": "1.7.4"
+ }
+}
diff --git a/templates/with-sass/postcss.config.js b/templates/with-sass/postcss.config.js
new file mode 100644
index 00000000..a0fa32b9
--- /dev/null
+++ b/templates/with-sass/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ plugins: [require('autoprefixer')],
+};
diff --git a/templates/with-sass/src/client/RootComponent.js b/templates/with-sass/src/client/RootComponent.js
new file mode 100644
index 00000000..cfe5d386
--- /dev/null
+++ b/templates/with-sass/src/client/RootComponent.js
@@ -0,0 +1,16 @@
+// This is the main component that both the client & the server touch first.
+//
+// It's likely that this component will stay mostly empty since it sits at the root.
+// It might contain your chosen routing solution or redux-provider.
+import React from 'react';
+import { isClient } from 'dev-toolkit/settings';
+import App from './views/App';
+
+// This should log both on the client and the server, remove once you understand how it works.
+console.log(`Client App has run on ${isClient ? 'Client' : 'Server'}... (remove-me)`);
+
+const displayName = 'RootComponent';
+const component = () =>
+ {'App with Sass'}
+ {'so '}
+ {'colorful '}
+ {'! '}
+ {'and '}
+ {'with other cool things'}
+ {' like '}
+ {'animations'}
+
+ {'!'}
+
+);
diff --git a/templates/with-sass/src/client/views/style.scss b/templates/with-sass/src/client/views/style.scss
new file mode 100644
index 00000000..4e0e3ece
--- /dev/null
+++ b/templates/with-sass/src/client/views/style.scss
@@ -0,0 +1,102 @@
+// Some example styles written in sass
+// (remove-me)
+
+@keyframes wiggle-up-down {
+ 0% {
+ transform: translateY(0px);
+ }
+ 20% {
+ transform: translateY(-7px) rotate(-6deg) scale(0.8);
+ }
+ 40% {
+ transform: translateY(-7px) rotate(8deg) scale(1);
+ }
+ 70% {
+ transform: translateY(-7px) rotate(-5deg) scale(1.05);
+ }
+ 80% {
+ transform: translateY(0px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
+}
+@keyframes wiggle-left-right {
+ 0% {
+ transform: translateX(0px);
+ }
+ 20% {
+ opacity: 0.7;
+ transform: translateY(1px) scale(0.99);
+ }
+ 30% {
+ opacity: 0.9;
+ transform: translateX(-2px) scale(1.01);
+ }
+ 70% {
+ opacity: 0.7;
+ transform: translateX(1px) scale(0.98);
+ }
+ 80% {
+ opacity: 1;
+ transform: translateY(-2px) scale(1.02);
+ }
+ 100% {
+ transform: translateX(0px);
+ }
+}
+@keyframes wiggle-rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 60% {
+ transform: rotate(8deg) scale(2.4);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+.app {
+ .color1 {
+ color: #2980b9;
+ }
+ .color2 {
+ color: #f39c12;
+ }
+ .color3 {
+ color: #95a5a6;
+ }
+ .color4 {
+ color: #e74c3c;
+ }
+ .color5 {
+ color: #3498db;
+ }
+ .color6 {
+ color: #9b59b6;
+ }
+
+ .wiggleLeftRight {
+ display: inline-block;
+ color: rgba(#27ae60, 0.8);
+
+ animation: wiggle-left-right 0.7s ease-out;
+ animation-iteration-count: infinite;
+ }
+ .wiggleUpDown {
+ display: inline-block;
+ color: #d35400;
+
+ animation: wiggle-up-down 1.6s ease-in-out;
+ animation-iteration-count: infinite;
+ }
+ .wiggleRotate {
+ display: inline-block;
+ color: #27ae60;
+
+ transform-origin: 50% 100%;
+ animation: wiggle-rotate 1.6s ease-in-out;
+ animation-iteration-count: infinite;
+ }
+}
diff --git a/templates/with-sass/src/server/index.js b/templates/with-sass/src/server/index.js
new file mode 100644
index 00000000..171e511e
--- /dev/null
+++ b/templates/with-sass/src/server/index.js
@@ -0,0 +1,103 @@
+import express from 'express';
+import expressHandlebars from 'express-handlebars';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import clearModule from 'clear-module';
+import { isDev, isProd, usePreRender } from 'dev-toolkit/settings';
+
+// Unlike the client app, the server app can only ever be run in Node.js
+// we therefore have direct access to Node-specific things like `process`
+const serverPort = process.env.SERVER_PORT || 3000;
+const projectDirectory = process.cwd();
+const clientFolder = path.resolve(projectDirectory, 'src/client');
+const serverViews = path.resolve(projectDirectory, 'src/server/views');
+const rootComponentPath = path.resolve(clientFolder, 'RootComponent');
+
+export default new class {
+ constructor() {
+ // Let dev-toolkit know about express by setting `this.express`,
+ // this allows dev-toolkit to attach the dev-server middleware to webpack
+ this.express = express();
+
+ // Handlebars is used for server-rendering the html template in `src/server/views`
+ this.handlebarsInstance = expressHandlebars.create();
+
+ // Use Handlebars as the view engine in express
+ this.express.engine('hbs', this.handlebarsInstance.engine);
+ this.express.set('views', serverViews).set('view engine', 'hbs');
+
+ // Prevent express from sending powered-by header
+ this.express.disable('x-powered-by');
+ }
+
+ // Ability to launch server later (allows dev-toolkit to bind webpack-middleware before start)
+ start({ assets, buildFolder }) {
+ // Provide a simple health-check endpoint to see if the server is alive
+ this.express.get('/health', (req, res) => res.send('OK'));
+
+ // Make assets in build folder available to the client.
+ // In development, the `webpack-dev-middleware` used by dev-toolkit takes care of this.
+ if (!isDev) {
+ this.express.use(express.static(buildFolder));
+ }
+
+ // By default, dev-toolkit serves the build folder with pre-rendered files.
+ if (isDev || (isProd && !usePreRender)) {
+ // Render the template-file on any incoming requests
+ this.express.use((req, res) => {
+ // Remove Client App from cache (cheap server-side Hot-Reload)
+ if (isDev) {
+ // NOTE: We need to explicitly clear all the modules in the client directory.
+ // It's a nice to have. Not guaranteed to always work, take it with a grain of salt.
+ clearModule.match(new RegExp(`^${clientFolder}`, 'i'));
+ }
+ // Load newest version of Client App via RootComponent
+ import(rootComponentPath).then(module => {
+ const RootComponent = module.default;
+ res.status(200).render('template', {
+ assets,
+ renderedHtml: renderToString({{{ renderedHtml }}}
+
+
+
+
+
+
-