{`If you would like to get started building your own bundle or customizing you will need to first check out your bundle project. If you're just\ngetting started you'll want to check out the `}{`Customer Default Project`}{` source code.`}
\n{`In addition you will need the following:`}
\n{`In order for your bundle to authenticate correctly with your Kinetic Platform you will need to create a valid OAuth Client\nfor it to use. This is how your environment knows to send authentication credentials back to your development server. To\nset this up you will need to navigate to the OAuth Security tab (Kinetic Management Console > Space > Settings > OAuth Tab):`}
\n{`Name -> Kinetic Bundle - Dev\nDescription -> oAuth Client for client-side bundles in development mode\nClient ID -> kinetic-bundle-dev\nClient Secret -> \nRedirect URI -> http://localhost:3000/app/oauth/callback\n`} {`The server must also have trusted domains configured in order for your local development server to be allowed to contact\nyour Kinetic Platform. These settings allow the local development server's bundle code to access the platform's API and\nto embed frames (which is needed for authentication). Navigate to Space Security Tab (Kinetic Management Console > Space > Settings > Security Tab):`}
\n{`Trusted Resource Domain -> http://localhost:3000\nTrusted Frame Domain -> localhost:3000\n`}{`From a command line open inside the `}
{`$ yarn install\n$ yarn start\n`}{`Upon `}
{`Once the development server starts up, you can access it at `}{`http://localhost:3000`}{`. Any changes you make to your local code will then automatically cause the server to reload with your new changes.`}
\n{`For detailed bundle development instructions, please see the `}{`Bundle README`}{`.`}
\n{`Requirements:`}{` GitHub account and knowledge of git.`}
\n{`In order to customize or build your own custom bundle, it is recommended to begin with this project. You can either `}{`fork`}{` this repository, or create your own new repository and configure this repository as its upstream, by following the instructions below.`}
\n \n{`Do NOT check the 'Initialize this repository with a README' checkbox.`}{` It must remain unchecked so that we can merge in the history from this repository to allow future syncing.`}
\n{`Let's use the repository name `}
{`$ git clone https://github.com//awesome-custom-bundle.git\n> Cloning into 'awesome-custom-bundle'...\n$ cd awesome-custom-bundle\n`} {`$ git remote add upstream https://github.com/kineticdata/customer-project-default.git --no-tags\n$ git remote set-url --push upstream no_push\n$ git remote -v\n> origin https://github.com//awesome-custom-bundle.git (fetch)\n> origin https://github.com//awesome-custom-bundle.git (push)\n> upstream https://github.com/kineticdata/customer-project-default.git (fetch)\n> upstream no_push (push)\n`} {`$ git fetch upstream\n> From https://github.com/kineticdata/customer-project-default\n> * [new branch] develop -> upstream/develop\n> * [new branch] master -> upstream/master\n$ git checkout -b master upstream/master --no-track\n$ git push -u origin master\n> To https://github.com//awesome-custom-bundle.git\n> * [new branch] master -> master\n`} {`You are now ready to start developing in your custom bundle repository. See the `}{`Bundle README`}{` for detailed bundle development instructions.`}
\n{`In order to pull the latest changes from the upstream `}
{`$ git checkout master\n$ git fetch upstream\n$ git merge upstream/master\n$ git push origin master\n`}{` .\n ├─ artifacts # Contains artifacts generated for the project\n ├─ bundle # Contains the bundle React code\n │ ├─ packages # Individual packages that define different parts of the bundle\n │ │ ├─ app # Entry point to the bundle application\n │ │ ├─ components # Package that allows for overriding common components\n │ │ └─ ... # Other custom packages may be added\n │ └─ package.json # Monorepo configuration file\n └─ plugins # Contains custom plugins for the project\n`}{`Directory containing artifacts for the project, such as space exports generated from the SDK, or special documentation such as ADRs.`}
\n{`bundle`}
\n{`Directory containing all of the bundle code. See the `}{`Bundle README`}{` for detailed bundle development instructions.`}
\n{`packages`}
\n{`The bundle consists of multiple packages, where each package defines one area of functionality (e.g. service portal package).`}
\n{`The app package is the entry point to the entire bundle, and defines the rendering and authentication wrappers, as well as a default content renderer. This package is rendered when the bundle is loaded, and then in turn renders the content of the other packages as needed.`}
\n{`The components package exists to allow for overriding of common layout components used by other packages. `}{`This package is currently a work in progress.`}
\n{`The majority of the prebuilt Kinetic packages are deployed to NPM, and are installed into the App package from NPM, so their code isn't part of this bundle.\nNew packages may be added and connected into the App package to provide custom functionality.`}
\n{`Directory containing all of the custom plugins (such as handlers, bridge adapters, etc.) created for the project.`}
\n\n