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 backend is done using Webpack. When Webpack prepares hot patches on the filesystem, SIGUSR2 signal is sent to Node.js app and embedded Webpack Hot Module Runtime reacts to this signal and applies patches to running modules from filesystem. Hot code reload for frontend is using Webpack Dev Server and React Hot Loader 3 to apply patches to 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 backend fully renders UI and hands off Apollo Redux Store state to frontend. Frontend then starts off from there and updates itself on user interactions.
Optimistic UI updates
This example application uses Apollo optimistic UI updates, that result in immediate UI update on user interaction and then, after data arrives from the server, UI state is finalized.
GraphQL API
GraphQL is used as 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 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 form of SASS stylesheets is used for styling demo application. Application has 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
Clone starter kit locally.
git clone [email protected]:sysgears/apollo-fullstack-starter-kit.git cd apollo-fullstack-starter-kit
Install dependencies.
npm i
Create sample SQLite database schema.
npm run migrate
Seed sample database data.
npm run seed
Run starter kit in development mode.
npm start
Point your browser to http://localhost:3000
Change any app code and see the changes applied immediately!
Deploying to Heroku
- Add your app to Heroku
- Allow Heroku to install build time dependencies from the devDependencies in package.json:
Settings -> Config Variables -> Add
, KEY:NPM_CONFIG_PRODUCTION
, VALUE:false
. - Deploy your app on Heroku
Heroku Demo
You can see latest version of this app deployed to Heroku here: https://apollo-fullstack-starter-kit.herokuapp.com
This post first appeared on Programming | SysGears - Custom Software, please read the originial post: here