Creating A New App
Go to this jenkins URL: Jenkins and click in the screen on the little play button the right of the master branch.
Next during this step you will be asked for your project name and which framework you want (react or preact for now)
Give your project a name (no spaces and only dashed/hyphens)
Let the job run and in the last step you will get all information you need to start coding, like how to clone the project, where it got deployed etc.
Including an app in WWW / BSD
To include a micro app into the www/bsd code you can use the following js:
//import the micro apps loader
import { loadMicroApp } from '@od/micro-apps-loader';
/**
* This function will take 3 parameters
* @param string projectName | This is the name of the project as defined in your package.json
* @param boolean includeGlobal | if this is set to true it will include the global.css file that is generated which has the global styles from the new styleguide
* @param function cb | callback function that gets called if you want a callback function to be triggered after load
**/
loadMicroApp('sample-project', true, () => {
alert('my react app just loaded');
});
Different ways of including
There are different ways of including a web app into your page
One option is to directly include the div with the correct id straight into the JSP.
<div id="App" class="app"></div>
You can combine the creation of the div with your JS like below.
//import the micro apps loader
import { loadMicroApp } from '@od/micro-apps-loader';
document.getElementById('content').insertAdjacentHTML('beforeend', '<div id="App" class="app"></div>');
/**
* This function will take 3 parameters
* @param string projectName | This is the name of the project as defined in your package.json
* @param boolean includeGlobal | if this is set to true it will include the global.css file that is generated which has the global styles from the new styleguide
* @param function cb | callback function that gets called if you want a callback function to be triggered after load
**/
loadMicroApp('sample-project', true, () => {
alert('my react app just loaded');
});
You can also have the creation of the div in your react code right before the render function.
You can also invoke the render function inside the WWW code in case you want to pass some data or whatever your reason is.
//Your REACT render function will look something like this
window.renderReactApp = (someData = {} ) => {
//do something with someData
ReactDOM.render(<App />, document.getElementById('App'));
}
// Then to include into WWW follow the same steps as above
document.getElementById('content').insertAdjacentHTML('beforeend', '<div id="App" class="app"></div>');
/**
* This function will take 3 parameters
* @param string projectName | This is the name of the project as defined in your package.json
* @param boolean includeGlobal | if this is set to true it will include the global.css file that is generated which has the global styles from the new styleguide
* @param function cb | callback function that gets called if you want a callback function to be triggered after load
**/
loadMicroApp('sample-project', false, () => {
// Here the react JS is loaded so you can invoke the render function.
let someDataToPass = {
mockObject : 'someString'
};
window.renderReactApp(someDataToPass);
});