barbar/vortigern

A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern

---

Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Redux.

Libraries

Vortigern uses the following libraries and tools:

Core

• TypeScript
• React & React DOM for views.
• React Router to handle in-app routing.
• Redux for managing application state.
• React-Redux to use React-Redux bindings.
• React-Router-Redux to keep application state sync with route changes.

Utilities

• Isomorphic Fetch with ES6-Promise for using fetch api on both client & server side.
• Redux Thunk for dispatching async actions.
• Redux Connect for resolving async props in react-router.
• React Helmet
• classnames

Build System

• Webpack for bundling.
  • Awesome TypeScript Loader as ts loader.
  • Babel Loader as js loader.
  • React Hot Loader for providing hot reload capability to our development server
  • Isomorphic Style Loader for loading styles on server-side.
  • Style Loader
  • CSS Loader
  • PostCSS Loader
    • PostCSS cssnext
    • PostCSS Assets
  • JSON Loader
  • File Loader
  • URL Loader
  • Sourcemap Loader
  • Manifest Plugin
  • Extract Text Plugin for exporting bundled css.
  • tslint Loader for using tslint as preloader on build process.
  • stylelint Loader for using stylelint as preloader on build process.
  • Istanbul Instrumenter Loader for using istanbul on postload process while generating code coverage reports.

Dev & Prod Server

• Webpack Dev Server
  • Webpack Dev Middleware
  • Webpack Hot Middleware
• Express for running server both on client and server side.
• Compression for gzip compression
• Serve Favicon for serving favicon.

Developer Experience

• Typings for installing type definitions of external libraries.
• tslint for linting TypeScript files.
• stylelint for linting styles.
• Redux Logger
• Redux DevTools
• Chalk for colored terminal logs.

Testing

• Karma as test runner with following plugins
  • Karma-Webpack
  • Karma-Mocha
  • Karma-Chai
  • Karma-Coverage
  • Karma-PhantomJS Launcher
• Mocha as testing framework.
• Chai as assertion library.
• Enzyme for rendering React Components.
• Fetch Mock for testing async actions.
• Redux Mock Store for creating mock stores.

Directory Structure

.
├── build                       # Built, ready to serve app.
├── config                      # Root folder for configurations.
│   ├── test                    # Test configurations.
│   ├── types                   # Global type definitions, written by us.
│   ├── webpack                 # Webpack configurations.
│   └── main.ts                 # Generic App configurations.
├── node_modules                # Node Packages.
├── src                         # Source code.
│   ├── app                     # App folder.
│   │ ├── components            # React Components.
│   │ ├── containers            # React/Redux Containers.
│   │ ├── helpers               # Helper Functions & Components.
│   │ ├── redux                 # Redux related code aka data layer of the app.
│   │ │   ├── modules           # Redux modules.   
│   │ │   ├── reducers.ts       # Main reducers file to combine them.  
│   │ │   └── store.ts          # Redux store, contains global app state.    
│   │ └── routes.tsx            # Routes.
│   ├── client.tsx              # Entry point for client side rendering.
│   └── server.tsx              # Entry point for server side rendering.
├── typings                     # Type definitions installed with typings.              
├── .dockerignore               # Tells docker which files to ignore.
├── .gitignore                  # Tells git which files to ignore.
├── .stylelintrc                # Configures stylelint.
├── Dockerfile                  # Dockerfile.
├── favicon.ico                 # Favicon.
├── package.json                # Package configuration.
├── README.md                   # This file
├── tsconfig.json               # TypeScript transpiler configuration.
├── tslint.json                 # Configures tslint.
└── typings.json                # Typings package configuration.

Installation

You can clone from this repository or install the latest version as a zip file or a tarball.

$ git clone https://github.com/barbar/vortigern
$ cd vortigern
$ npm install

Usage

All commands defaults to development environment. You can set NODE_ENV to production or use the shortcuts below.

# Running

$ npm start # This starts the app in development mode

# Starting it with the production build
$ NODE_ENV=production npm start # or
$ npm run start:prod

# Building 

$ npm build # This builds the app in development mode

# Commands below builds the production build
$ NODE_ENV=production npm build # or
$ npm run build:prod

# Testing
$ npm test

For Windows users, we recommend using the shortcuts instead of setting environment variables because they work a little different on Windows.

Notes

# If you want install additional libraries, you can also install their typings from DefinitelyTyped
$ typings install dt~<package> --global --save
# or if it's located on npm
$ typings install <package> --save

Credits

Vortigern is released under the MIT license.

The image in this README belongs to hhvferry.com.

---

Barbar Startup Factory

We help startups start and stay started by helping them plan, strategize, fund and execute their vision.

You can contact us at [email protected]

Be sure to check out available jobs at Barbar.

vortigern's Issues

add redux dev tools && make store configuration conditional

tslint errors

We are disabling tslint for a line in the client.jsx file. tslint will soon have an update for that. We should follow palantir/tslint#144

additional library discussion

we can discuss adding 3rd party libraries (I mean, other than the core ones) here, I suggest:

• classnames
• redux-thunk
• immutablejs 💂

@batuhan @ilgooz

write an example async action

which has tests made with fetch-mock.

use enzyme instead of chai-jquery

while testing React components.

setup testing environment

with karma, mocha and chai.

here's a good example --> https://medium.com/@fay_jai/getting-started-on-testing-with-typescript-reactjs-and-webpack-a45a72f4f603#.58dhvtb1w

remove redux devtools ext. to decrease build time

with a proper explanation...

no such file or directory, stat 'favicon.ico'

when running npm run build:prod and trying to run the server.js file inside the build folder i get this message:

Error: ENOENT: no such file or directory, stat '/Users/username/projects/vortigern/build/favicon.ico' at Error (native) at Object.fs.statSync (fs.js:892:18) at favicon (/Users/username/projects/vortigern/node_modules/serve-favicon/index.js:64:15) at Object.module.exports.config.env (/Users/username/projects/vortigern/build/server.js:97:10) at __webpack_require__ (/Users/username/projects/vortigern/build/server.js:21:30) at module.exports.Object.assign.i (/Users/username/projects/vortigern/build/server.js:41:18) at Object.<anonymous> (/Users/username/projects/vortigern/build/server.js:44:10) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12) at Function.Module.runMain (module.js:457:10) at startup (node.js:138:18) at node.js:974:3

Hot reload on server side

Hi I'll start by saying great starter kit! I'm really liking the Typescript. I've got this running on my dev machine and I'm trying to do a hot module replacement. It looks like the code is updated automatically on the client side, but the node server is not updated.

As a test, I edited Home/index.tsx and replaced "Hello" with "Hello2!", and then saved the file. At this point webpack builds and the browser is updated through HMR.

[HMR] connected
client.js:127 [HMR] bundle rebuilding
client.js:130 [HMR] bundle rebuilt in 2495ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:100 [HMR] Updated modules:
process-update.js:102 [HMR]  - ./src/app/containers/Home/index.tsx
process-update.js:107 [HMR] App is up to date.

When I refresh the page to trigger a server-side rendering I get the following error message:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) a-reactid="15">Hello2!</p></div></sectio
 (server) a-reactid="15">Hello!</p></div></section

It appears that the server has the older version of the file. The only way I found to update it is by restarting the server. Does hot reloading on the server side work for other people? If so, it might be something wrong about my system configuration that I should investigate. If this is not supported, should we consider adding it?

npm start failed under windows

under pure windows w/o cygwin installed npm start is failed in package.json->scripts->clean, there is "clean": "rm -rf build/"

TypeScript all the things?

This is a suggestion. I was able to use TypeScript for webpack config and server side code and I think this project should do it too!

Take a look at my project:

https://github.com/rah-foundation/website

Error building on first try

I just cloned the repo. I ran npm install and it installed all the dependencies successfully. However when I ran npm start, it throws the following error:

-- /build/server.js:70 --
var manifest = webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module "../build/manifest.json""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
Error: Cannot find module "../build/manifest.json"

It looks like the manifest.json file isn't being created in the build folder.

Do you guys think I might I messed up while cloning, or missed a step?

Thanks.

update typings

syntax error for node v0.12.15

Skip. Sorry

Why not CSS Preprocessor?

Any reason not to use SCSS (or even LESS if you want)?

Sass SCSS seems to be the popular choice of CSS preprocessing in React projects.

prepare iso-rendering-helper ---> Html.tsx

add authentication-authorization example with protected routes

make redux actions fsa compatible

https://github.com/acdlite/flux-standard-action

interface Action {
  type: string;
  payload: Object;
  error: boolean; // we actually use it as an error message object on inside projects
}

add style linter

only for styles written within the app directory, otherwise we may have to deal with vendor css problems.

migrate to css next

instead of having postcss plugins like precss, autoprefixer and postcss-scss separately, we can use cssnext

add file loaders

write wiki

that contains styleguide & coding standards for ts + react specific cases

typescript
https://charleslbryant.gitbooks.io/hello-react-and-typescript/content/
https://basarat.gitbooks.io/typescript/content/
https://github.com/Lemoncode/react-typescript-samples

connect --> container
https://github.com/rangle/typescript-react-redux-starter/blob/master/src/containers/counter-page.tsx

modular redux with interfaces and etc
https://github.com/tkqubo/typescript-react-redux-seed/tree/master/client/redux

testing
http://redux.js.org/docs/recipes/WritingTests.html
https://github.com/rwieruch/favesound-redux/tree/master/src/reducers

add react router

CI setup

add redux && react-redux

add ts linter

add code coverage tools

background url(./barbar.png) doesn't work

When using background image in CSS, e.g:

.home {
    text-align: center;
    background: url('./barbar.png')
}

the compiled CSS seems to resolve the asset fine, however the browser is trying to load it relatively to the blob:// css file which was injected to the HEAD causing an incorrect host name by Chrome

generate code coverage reports with remap-istanbul

Isomorphic style loader

I'm noticing a flicker on the screen when loading a new page with caching disabled. I think it's because when the server side renders the page it does not include styles. Eventually, when the styles are downloaded the elements are repositioned to their correct locations. It would be better to include the styles with the server side rendering so there is no flicker.

I found a package that appears to solve this problem called isomorphic-style-loader. It appears to be a replacement for style-loader. https://github.com/kriasoft/isomorphic-style-loader. Would people be open to this upgrade?

Can I use Vortigern without the server

Hi @altayaydemir, can I take out the server part of things and use this without requiring express.js. If possible please how.

add react-router-redux

add isomorphic fetch

add hot reloading to dev server

extend readme

npm start / npm run start fails due to NODE_ENV not found

Hello,
I wanted to give vortgern a try and did the following:

$ git clone https://github.com/barbar/vortigern
$ cd vortigern
$ npm run setup

everything worked so far.

Now I am getting an error when trying to start it:

$ npm start

Here is a screenshot of the console output:

I am using windows 10.
My node version is V4.4.3
My npm version is 3.8.2

I couldn't find anything on google regarding my issue. I hope you can help me. Thanks!

Cheers,
Raphael Hippe

add isomorphic style loader

Including example of .jsx component

When writing applications it is often that you find code that is written in JavaScript instead of Typescript.

Would it be possible to include an example component written in plain JavaScript? I tried this with a component as follows:

src/app/components/MyComponent/MyComponent.jsx:

import * as React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>Hello from MyComponent</h1>
        );
    }
}

export { MyComponent };

and included it in the file src/app/components/index.tsx as follows:

export { Header } from './Header/Header';
export {MyComponent } from './MyComponent/MyComponent';

But i keep getting the error:

ERROR in ./src/app/components/index.tsx
(2,28): error TS2307: Cannot find module './MyComponent/MyComponent'.

Another thing is using existing ReactJS libraries, like https://onsen.io/v2/react.html. How we leverage these existing libraries without writing type definition files?

server-side rendering / client-side rendering out of sync

I'm getting the following error:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) om MyComponent</h1><ons-button data-reac
 (server) om MyComponent</h1></div></section>

It is clear that what is rendered at server side is not equal to what was rendered at client side.

What I did was including an existing ReactJS component library called react-onsenui (see https://onsen.io/v2/react.html).

I added to both the client.tsx file and the server.tsx file the following lines:

require('onsenui/css/onsenui.css');
require('onsenui/css/onsen-css-components.css');
require('onsenui');

and in the Home.tsx container I did:

import * as React from 'react';
const s = require('./style.css');

const Button = require('react-onsenui').Button;

class Home extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    console.log("CLICKED");
  }

  render() {
    return (
      <div className={s.home}>
        <img src={require('./barbar.png')} />
        <p>Hello world!</p>
        <Button onClick={this.handleButtonClick}>MY BUTTON</Button>
      </div>
    );
  }
}
export { Home }

What do I need to do to keep client and server rendering in sync?

support Electron (or not?)

I'll convert barbar/riothamus to TypeScript and couldn't decide if I should push the Electron-specific edits back to Vortigern or fork Vortigern to create another boilerplate for Electron.

Any ideas?

add server side rendering

write example components with tests

a counter maybe? 💂

How do I integrate React ToolBox.

I love what you've done here with React and Typescript.
One major challenge I have is integrating this with react-toolbox. http://react-toolbox.com/

Once I add react-toolbox, app fails to build. Any help would be great.

nested css classes disappear after running npm run build:prod

I use nested classes in some of my css files like this:

.foo { & .nested {} }

and in the tsx file i use it like this:

`const s = require('./style.css');

div className={s.nested}
`

it runs smoothly in dev mode, but all of these classes disappear from the css after the build

add style loaders

add sample: async data connect for full universal data rendering

hot reload / live reload don't seem to work

When using develop branch - after running npm setup and npm start HMR logs are not visible, and hot/live reloads are not kicking in.

add unit tests for components

Hi @altayaydemir,

What about the unit test for every component. I have seen the test structure prepared for ts but not seen for every component-specific ones.

Thanks.

Keep cool.

Optional server side rendering

Time to discuss again: common repo

Including the internal project we are doing right now, upcoming vortigen-basic , vortigern-electron and Simpleserver/Riathamus, we'll have 5 TypeScript + React projects.

Is it time to pack common files in to a repository and publish it as a package?