Reactive widgets

Application starter template, for implementing isomorphic widgets(same code for both server and client side), using RxJS and React

It is build on top of following great projects:

• React for a view layer
• RxJS for data layer, and composing asynchronous components
• Webpack to bundle client and server side scripts
• Babel to use next generation JavaScript, today.
• Express.JS for serving prerender application
• Axios for AJAX requests to API
• Jest for tests
• ESLint to watch for coding style issues
• Nodemon to reload rendering server in dev mode

For now, application includes following:

• rx-react-container - Allows to use React as a view layer for RxJS application, and to wait for required data before first rendering.
• di1 DI Container, inspired by https://github.com/angular/di.js but a lot simplified
• Application for server side components rendering
• Example of PHP application that uses components
• Simple widget example

Requirements

• nodejs You will need version 6 or above
• PHP above v5.4 for server side example and composer to install dependencies

Development environment setup

0. Check your Node.js version - it should be version 6 or later
1. Install dependencies using npm (or yarn)
2. start server app, with automatic recompile and reload when something changes
   • npm run dev
3. open this url in your browser: http://localhost:4000/ (php server should be started at port 4000 to make this working, see instructions below)

To customize host and ports used by application - use environment variables:

• DEV_SERVER_PORT - port used by dev server, 2992 by default
• DEV_SERVER_HOST - host where dev server is running, localhost by default

Same thing about app itself:

• APP_SERVER_HOST - host where application is running, localhost by default (address where app is accessible)
• APP_SERVER_PORT - port user by application, 8080 by default

if you have different application host and port different than above - be sure to specify them in environment

Also you can enable some other things for dev-server by environment variables

• HOT=1 to enable hot reload for client side

For setting those variables - you can create .env file at project root.

1. To run unit tests: npm run test
2. To check code style npm run lint

Production setup

1. Install dependencies: npm i
2. Build project npm run build
3. Start rendering server: node ./build/server/server.js

PHP server demo that will use implemented widgets

example is in public folder, to try it:

1. composer install install dependencies, using composer
2. start php built in server php -S 127.0.0.1:4000
3. navigate to http://127.0.0.1:4000/ to see results