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

Overview

Vortigern

Build Status Dependency Status devDependency Status Code Climate GitHub issues GitHub license


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

TypeScript React Redux

Libraries

Vortigern uses the following libraries and tools:

Core

Utilities

Build System

Dev & Prod Server

Developer Experience

Testing

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.

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

    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: image

    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

    bug 
    opened by RaphaelHippe 11
  • Cannot find module

    Cannot find module "../build/manifest.json"

    Hey, this starter looks great, but I can't run it from a fresh install.

    I followed the steps:

    git clone
    npm install
    npm start
    

    I get the following error, just like in #78

    /Users/tonyb/_projects/vortigern/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"
        at webpackMissingModule (/Users/tonyb/_projects/vortigern/build/server.js:70:81)
        at Object.module.exports.config.env (/Users/tonyb/_projects/vortigern/build/server.js:70:180)
        at __webpack_require__ (/Users/tonyb/_projects/vortigern/build/server.js:21:30)
        at module.exports.Object.assign.i (/Users/tonyb/_projects/vortigern/build/server.js:41:18)
        at Object.<anonymous> (/Users/tonyb/_projects/vortigern/build/server.js:44:10)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
    

    My node version is 6.8.1, mac OS X El Capitan, 10.11.6.

    opened by ttbarnes 8
  • React attempted to reuse markup in a container but the checksum was invalid.

    React attempted to reuse markup in a container but the checksum was invalid.

    I just cloned the latest version and when running the app I get two errors:

    1: During the load, this warning is thrown in the console:

    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) ass="appContainer___1pMKz" data-reactroo (server) ass="appContainer___385DV" data-reactroo

    2: On page refresh the page is first loaded without styles and afterwards they are applied. This makes the page look pretty ugly during the load. I checked in Postman and I can confirm, that no styles are present during the first load.

    Is there any fix for this?

    opened by matb 6
  • non-relative imports by default

    non-relative imports by default

    I have a suggestion about the default use of non-relative imports in the project. It requires only couple of lines in webpack config files but makes imports much nicer. For example, if we add modulesDirectories: ['node_modules', 'app'], to config.resolve in /config/webpack/server.js then it will be possible to import our project files like import { IStore } from 'redux/IStore'; instead of import { IStore } from '../../redux/IStore'; This way it will be easier to create and refactor imports.

    opened by alexandr-bbm 6
  • Is it good idea to use express server for developping API code ?

    Is it good idea to use express server for developping API code ?

    Hi,

    First of all thanks a lot for your good work! I really appreciate this boilerplate!

    Actually, I planned to create a web application with your boilerplate, and I was thinking of using the express server included for server-side rendering to develop the API of the application.

    This, for example, will allow me to share some code between client and server.

    My question is quite simple: do you think it's a good idea?

    Regards !

    Rémi

    opened by mimiz 5
  • Including example of .jsx component

    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?

    opened by svdoever 5
  • webpack-hot-middleware-clientOverlay giving vague errors

    webpack-hot-middleware-clientOverlay giving vague errors

    If I make a mistake like not putting a newline after each line of code or a space before the start of comment, it gives me a vague error "Module build failed: Error: Compilation failed due to tslint errors."

    How do I get it to display the error that "npm run lint" displays?

    Also, how can I disable some of these pointless errors?

    opened by TriStarGod 4
  • Choose which routes should use server side rendering

    Choose which routes should use server side rendering

    Loving the starter kit, but unfortunately, some of the libraries I am using aren't compatible with Server Side Rendering. How would I go about only doing client-side rendering for specific routes?

    opened by johnnyvf24 4
  • render on client side only

    render on client side only

    Hi, please describe what configuration do we need to render on the client side only. I mean without isomorphic server side rendering. Thanks in advance.

    opened by vasso1pupkishvilli 4
  • v0.2.0 Roadmap

    v0.2.0 Roadmap

    Core

    Optional

    • [ ] Use Jest & Enzyme instead of existing testing setup.
    • [ ] Keep redux-thunk, use async-await for handling side effects. (or migrate to redux-saga?)
    • [x] Optimize webpack config, share redundant parts between dev and prod configs.

    @batuhan @ufukomer anything to add?

    opened by altaywtf 4
  • Massive Updates (Improvements I think, but well see)

    Massive Updates (Improvements I think, but well see)

    I'm starting a new project soon, and I loved your start, but I've been on several very large react projects now, and wanted to create a starter that addressed some of the issues..

    You may want to clone and look at the source, almost every single file was changed.

    Here is a summary of what changed.

    • no more implicit any's.
    • stronger types, that propagate types all the way through.
    • implemented blueprints with SpencerCDixon/redux-cli.
    • function based dumb components.
    • changed containers to be .ts files, so there is less temptation to add markup.
    • Introduced the concept views (see docs).
    • A simple library for reducing boilerplate with reducers.
    • Added recompose for smart components.
    • Added index.html for non-node based servers.
    • Added i18n support, with auto reloading.
    • removed semi colons (because I hate them, this is probably the most controversial thing.)

    I realize there is a huge amount of changes here, so I won't be offended if you reject the PR, I will just continue on my merry way. But since I made a ton of improvements IMO, I thought I would contribute them back.

    Things that still need doing:

    • Add the i18n strings to the unit tests and unit tests boilerplate.
    • Find a better way to make the i18n strings auto reload, it's some janky code generation at the moment.
    opened by ericwooley 4
  • is this project still active?

    is this project still active?

    I've being working on a project based on this boilerplate and I think its great. I'm doing some optimizations and I wanted to know if this is still active so I can do PR's to it or just fork it and add it there?

    some changes I'm doing:

    • webpack 4
    • config.webpack.js -> config.webpack.ts
    • webpack configs composables
    • faster TS builds

    let me know! :)

    opened by horacioh 6
  • Urgently help

    Urgently help

    How can i work with build folder if it doesnt have any html? I installed and configured html-webpack-plugin? but all i get is an empty page. Help pls, very urgently

    opened by Lurkomorie 0
  • Dupe test declarations for .css files in webpack config?

    Dupe test declarations for .css files in webpack config?

    Is there a reason there are two blocks for css loaders here?

    https://github.com/barbar/vortigern/blob/develop/config/webpack/dev.js#L53

    https://github.com/barbar/vortigern/blob/develop/config/webpack/dev.js#L62

    opened by myarete 0
  • Barbar Startup Factory link is wrong

    Barbar Startup Factory link is wrong

    opened by wrick17 0
Releases(v0.1)
Owner
Barbar Startup Factory
We craft startups.
Barbar Startup Factory
A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more

Universal Redux Template A boilerplate doing universal/isomorphic rendering with Redux + React-router + Express, based on Redux-Realword-Example Philo

Yang-Hsing Lin 465 Feb 18, 2022
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

null 150 Dec 20, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Oct 13, 2022
Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes

This is beta. Official release coming soon Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting,

Sergey 491 Dec 5, 2022
React Server Side Rendering with Express

React Server Side Rendering with Express Implementing Server Side Rendering (SSR

kaka 2 Jan 4, 2022
Reactjs-server-side-table - A React module that can be used for rendering tables with dynamically paginated data

ReactJs Server Side Table A React module that can be used for rendering tables w

Ploud Technology 2 Jan 31, 2022
Server Side Rendering antd with ASP.NET CORE

aspnet-core-react-antd-boilerplate Server Side Rendering antd with ASP.NET CORE Asp.net core JavaScriptServices. read more info from here NOTE: this i

启邦 19 Mar 16, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 11k Dec 31, 2022
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. # Features

Anton Izmailov 33 May 15, 2019
GlueStick is a command line interface for quickly developing universal web applications using React and Redux.

Deprecation Notice GlueStick is now archived. It was one of the first React-in-a-box projects and helped TrueCar quickly migrate to React. With the Re

TrueCar Inc 359 Jul 31, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Buck DeFore 462 May 22, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 26 Dec 4, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Preact 511 Dec 29, 2022
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Erik Rasmussen 12.1k Jan 5, 2023
Boilerplate for building applications with a React frontend and a C++ gRPC backend

Boilerplate for building applications with a React frontend and a C++ gRPC backend. How To Run Backend Install Bazel Bazel is for building the backend

null 3 Oct 16, 2022
Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)

Redux universal boilerplate Boilerplate for react universal application building on flux architecture based on redux implementation. Boilerplate based

Sergey 73 Mar 30, 2022
An Universal ReactJS/Redux Boilerplate

React Redux Universal Boilerplate Introduction I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it ma

Anthony Albertini 166 Apr 30, 2022
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)

cra-universal Create React App Universal CLI Create React App companion for universal app. No eject, zero config with customization, supports string a

Antony Budianto 429 Dec 16, 2022