thescientist13

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:6.11.0

    working_directory: ~/repo

    steps:
      - checkout

thescientist13

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      - image: thegreenhouse/nodejs-dev

thescientist13

Build-agent version 0.0.4355-1897c1d (2017-10-13T22:25:17+0000)
Starting container thegreenhouse/nodejs-dev:0.1.0
  image cache not found on this host, downloading thegreenhouse/nodejs-dev:0.1.0
0.1.0: Pulling from thegreenhouse/nodejs-dev

thescientist13

// 1) from the terminal, install latest version of karma-chrome-launcher and puppeteer (yarn or npm)
// $ yarn add karma-chrome-launcher puppeteer --dev

// 2) in your Karam config
// https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer
process.env.CHROME_BIN = require('puppeteer').executablePath();

const config = {
  // start of your config
  // ...

thescientist13

FROM ubuntu:16.04

RUN apt-get update
RUN apt-get install -y curl vim git bzip2 ssh

# install HeadlessChrome X11 packages
# https://github.com/Quramy/puppeteer-example#with-docker-based-ci-services
RUN apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
      libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
      libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \

thescientist13

/***** option A - separate vendor entry point in webpack config

// webpack config
module.exports = {
  entry: {
    index: './index.js',
    vendor: './vendor.js'
  },
  
  plugins: [

thescientist13

optimization: {
  minimizer: [
    new UglifyJsWebpackPlugin(),
    new OptimizeCssAssetsPlugin({
      cssProcessorOptions: { discardComments: { removeAll: true } }
    })
  ],
  splitChunks: {
    chunks: 'all',
    cacheGroups: {

thescientist13

import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import Bootstrap from './components/bootstrap/bootstrap';
import Home from './views/home/home';
import PostDetails from './views/post-details/post-details';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={Bootstrap}>

thescientist13

# routes.js
import Bootstrap from './components/bootstrap/bootstrap';

// thanks to https://brotzky.co/blog/code-splitting-react-router-webpack-2/!
function handleRouteLoadingError(error) {
  throw new Error(`Dynamic page loading failed: ${error}`);
}

function loadRoute(cb) {
  return module => cb(null, module.default);

thescientist13

module: {   
  
  rules: [{   
    test: /\.(s*)css$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader', 
      'sass-loader'
    ]
  }]