Toga helps serves universal components which are pre-rendered on the server and initialised on the client so that they can be instantly used with any web-app.
universal components are those that are written once, and can be run on the server and in the browser.
Toga can serve components from any directory and is setup to take the sting out of setting up Universal Components yourself. Once running, Toga end-points allow to access the components rendered HTML, compiled CSS and compiled JS;
Using the Toga end-points, you can quickly add the component assets (HTML, Images, CSS JS) into your Ruby, PHP, Perl or any web-app. Using these end points you can even pass props to the component!
This means you can include the latest components and technology in your existing apps without having to do a complete rebuild.
Currently, Toga supports any React component. This could be a redux-based component, a stateless function or any component built using React.
As Javascript engineers are known to do crazy things inside components, like trying to import CSS (what!?) into Javascript. This can be pesky to set up, especially on the server.
Out of the box, Toga supports the following imports:
- SVG
- CSS/SCSS
- JSON
In the future, there is no reason why other component types can't be supported.
This will run Toga, which contains a sample component :
git clone [email protected]:notonthehighstreet/toga.git
cd toga
npm install
npm start
Go to http://localhost:8080
Checkout example/README.md more detail about the examples.
- Setup Your Components Project :
- Run Toga using npm scripts:
toga start
Go to http://localhost:8080
Out of the box, Toga serves both minified and unminified JS and CSS as well as their SourceMaps.
The endpoint to get the assets for a single component is can be found using the assets-bundle endpoint
http://localhost:8080/asset-bundles
This URL will tell you what bundles are available (which is determined form your toga.json file).
This files will be available on the server address prefix i.e. http://localhost:8080/
If you have components that share modules, like React, It makes sense to setup a Vendor bundle. To see how to setup a vendor bundle, take a look at /toga.json or we have a vendor example.
The vendor bundle file name can also be found at the asset-bundles end-point.
You can pass props to components, just like you would any React component.
One Toga is running, you can hit the component endpoint, using the query ?props={"prop-name":"prop-value"} in the address bar (props must be valid JSON). For example:
http://localhost:8080/HelloWorld.html?props={"world":"waynes"}
One Toga is running and you can hit the component endpoint, using a POST with a body containing your props.
Once you have created your bundle (npm run bundle -- --components=./components-dir), a web-page will be generated which allows you to see what files are included in your bundles.
This allows you to see if a small library is accidentally bloating your package.
it will be generated in : /dist/webpack-components-stats.html
By default, the logger used is based on banyun library. It writes to a file (default: ./toga.logstash.log) and also sends information to honeybadger. However, you can pass a custom logger instance, when booting the toga server.
let options = {
logger: loggerInstance
};
Toga(initialState, options).then(() => console.log('Server up and running'));The new logger instance must have the following methods:
- info
- error
- warn
More information about how to contribute and run the project locally.