Apollo Universal Starter Kit with Hot Code Reload Released

The SysGears Team is pleased to announce the availability of the Apollo Universal Starter Kit with Hot Code Reload for backend & frontend.

Apollo Universal Starter Kit is a boilerplate for Universal web app development built on top of Apollo, GraphQL, React, Express, with SQL storage support and Twitter Bootstrap integration. Hot Code Reload of backend & frontend using Webpack and React Hot Loader 3 to reflect your changes instantly and help you stay productive.

Hot Code Reload Demo

Features

• Webpack for backend. This starter kit is different from most of the starter kits out there because it uses Webpack not only for frontend, but for backend code as well. This enables powerful Webpack features for backend code, such as conditional compilation, embedding non-JS files and CSS stylesheets into the code, hot code reload, etc.
• Hot Code Reload for backend and frontend. Hot Code Reload for the backend is done using Webpack. When Webpack prepares hot patches on the filesystem, the SIGUSR2 signal is sent to the Node.js app, and the embedded Webpack Hot Module Runtime reacts to this signal and applies patches to running modules from the filesystem. Hot code reload for the frontend is using Webpack Dev Server and React Hot Loader 3 to apply patches to the frontend code. Hot patches for React components are applied on the frontend and backend at the same time, so React should not complain about differences in client and server code.
• Server Side Rendering with Apollo Redux Store sync. On the initial web page request, the backend fully renders the UI and hands off the Apollo Redux Store state to the frontend. Frontend then starts off from there and updates itself on user interactions.
• Optimistic UI updates. This example application uses Apollo optimistic UI updates, which result in immediate UI updates on user interaction and then, after data arrives from the server, the UI state is finalized.
• GraphQL API. GraphQL is used as a very flexible and much faster API in terms of bandwidth and round-trips, compared to REST. GraphQL requests are batched together automatically by Apollo
• SQL and arbitrary data sources support. Knex code to access SQLite is included as an example of using an arbitrary data source with Apollo and GraphQL. NoSQL storage or any other data source can be used the same way.
• Powerful stylesheets with Hot Reloading. Twitter Bootstrap in the form of SASS stylesheets is used for styling the demo application. Application has a stylesheet in styles.scss for global styling, which is Hot Reloaded on change. React components’ styling is done by Aphrodite CSS.
• Babel for ES6 or ES7 transpiling
• ESLint to enforce proper code style

Getting Started

1. Clone the starter kit locally.git clone git@github.com:sysgears/apollo-fullstack-starter-kit.git cd apollo-fullstack-starter-kit
2. Install dependencies.npm i
3. Create a sample SQLite database schema.npm run migrate
4. Seed sample database data.npm run seed
5. Run starter kit in development mode.npm start
6. Point your browser to https://localhost:3000
7. Change any app code and see the changes applied immediately!

Deploying to Heroku

1. Add your app to Heroku
2. Allow Heroku to install build-time dependencies from the devDependencies in package.json: Settings -> Config Variables -> Add, KEY: NPM_CONFIG_PRODUCTION, VALUE: false.
3. Deploy your app on Heroku