@globalsoftba/bede-starterkit v19.2.1
bede-starterkit
Components used to Build feature rich websites using the Bede Platform
Made with create-react-library
Install
npm install --save @bedegaming/bede-starterkit
Setup
/**
* src/i18n.tsx
* Initializes translations.
*/
import { translations } from '@bedegaming/bede-starterkit';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
resources: {
en: { translation: translations }
},
lng: 'en'
});
/**
* src/index.tsx
* Calls initialization function & assembles redux store.
*/
import {
initStarterkit,
reducers,
rootSaga
} from '@bedegaming/bede-starterkit';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import App from './App';
import './i18n';
initStarterkit({ appName: 'myAppName' });
const sagaMiddleware = createSagaMiddleware();
const store = createStore(combineReducers(reducers));
sagaMiddleware.run(rootSaga);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Usage
import React, { Component } from 'react';
import { Button } from '@bedegaming/bede-starterkit';
import '@bedegaming/bede-starterkit/dist/index.css';
class Example extends Component {
render() {
return <Button label='Click me' />;
}
}
Theme Customisation
Global variables that can be overridden to customise the theme can be found in the files within the src/scss/theme
folder. Components also have their own specific theme variables that can be overridden which can be found in their corresponding scss
files.
Component Typing
Hey there Purdy
If importing component typing outside of the src/components
folder please first separate the typing into it's own file, otherwise the extra stuff imported into nativeAppUtils
may cause the native app build to fail.
AEM Integration
You will need to do the following steps in order to integrate the components into an AEM React SPA project.
Install this package as a dependency. (when the package is published)
Add a file in
ui.frontend/components/src
to import and map the component for AEMFor example
inbox.js
import { InboxContainerAEM } from '@bedegaming/bede-starterkit'; import { MapTo } from '@adobe/cq-react-editable-components'; /** * Optional configuration to help AEM decide when to render a placeholder * instead of the component. If not needed feel free to omit the second argument. */ const InboxEditorConfig = { emptyLabel: 'Inbox', isEmpty: function (props) { return !props; } }; export default MapTo('mysite/components/inbox')( InboxContainerAEM, InboxEditorConfig );
Import the wrapped component file in
import-components.js
npm install @teclead/aem-generator
- Make the following changes to the scripts
package.json
. This will add the functionality to auto generate AEM component/dialog config files.{ "build": "npm run build:dialogs && react-scripts build && clientlib", "build:dialogs": "node node_modules/@teclead/aem-generator/builder.js" }
Add an AEM dialog definition file and modifiy the argument to suitable values for the project. The file will need to be typescript for the build:dialogs script to pick it up.
Example
inbox.dialog.ts
import { inboxDialog } from '@bedegaming/bede-starterkit/dist/aem'; import { TouchUIXMLGenerator } from '@teclead/aem-generator'; new TouchUIXMLGenerator( inboxDialog( '../ui.apps/src/main/content/jcr_root/apps/mysite/components/', '<div></div>', 'componentGroupName' ) ).writeFilesToAEM();
Versioning & Changelog
Versioning is done automatically on merge by the autoversion and autoversion-commit scripts as part of the teamcity build job, it works by checking the last commit (squash and merge on merging is advised) for a [fix]
, [patch]
, [feat]
, [minor]
, [major]
, [no-version]
tag and then will take care of bumping the package, commiting and publishing with an updated changelog on completion of build, unless a [no-version]
tag is specified.
Failure to not include a version type tag will result in the teamcity build job failing.
How to include
Adobe Experience Cloud
Requires setup of Adobe I/O CLI and Cloud Manager Plugin, more information can be found here. Upon completion of this, the next command to run is
aio cloudmanager:set-pipeline-variables <PIPELINE_ID> --programId=<PROGRAM_ID> --secret NPM_TOKEN <AUTH_TOKEN>
Replacing the <PIPELINE_ID>
, <PROGRAM_ID>
, <AUTH_TOKEN>
with the appropriate values
Using the example url https://experience.adobe.com/#/@bedegamingemeaptrsd/cloud-manager/pipelineexecution.html/program/31510/pipeline/4892025/execution/769397
we would run the command:
aio cloudmanager:set-pipeline-variables 4892025 --programId=31510 --secret NPM_TOKEN AUTH_TOKEN ...
Next in the project that is importing Bede-Starterkit, in the root directory create a .mvn
folder and inside create a file called extensions.xml
. Inside that file add the following snippet.
<extensions xmlns="http://maven.apache.org/EXTENSIONS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/EXTENSIONS/1.0.0 http://maven.apache.org/xsd/core-extensions-1.0.0.xsd">
<extension>
<groupId>biz.netcentric.maven.extension</groupId>
<artifactId>maven-ext-repos-from-env</artifactId>
<version>1.2.0</version>
</extension>
</extensions>
Commit it, and your adobe instance is ready to go. For more information about this setup click here.