> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Starter Kits

### Bring Your Own Stack (BYOS)

***

Does `domo init` not give you enough of what you’re used to for starting new projects If you have a generator or starter kit you’re partial to, you can still use it. All you have to do is update your local development server to handle requests for data from Domo. Here are a few examples of how you can leverage the <a href="https://www.npmjs.com/package/@domoinc/ryuu-proxy">ryuu-proxy</a> module to turn any existing web application into a Domo App.

<Tabs>
  <Tab title="React">
    <Note>
      **Advanced React Template**
      Domo also has a more advanced template available that Domo teams use when building apps. Contact your Account Executive for more information on how to obtain access to the Advanced App Platform Package.
    </Note>

    #### Basic Create React App

    DomoApps has a basic create-react-app template that can be installed that includes all the Domo-specific dependencies and configurations. Follow the instructions from the <a href="https://create-react-app.dev/portal/getting-started#creating-an-app">create-react-app documentation</a> to install a new react app with the [`@domoinc/cra-template`] template based on the package manager of your choice (`npx`, `yarn`, or `npm`).

    [`@domoinc/cra-template`]: https://www.npmjs.com/package/@domoinc/cra-template?activeTab=readme

    Replace the word `my-app` in the following commands with the app name of your choice.

    <strong>yarn</strong>
    `yarn create react-app my-app --template @domoinc`
    <strong>npx</strong>
    `npx create-react-app my-app --template @domoinc`
    <strong>npm</strong>
    `npm init react-app my-app -- --template @domoinc`

    These commands will create your project in a `my-app` folder with the following included:

    * The manifest and thumbnail are provided in the `public` folder.
    * The proxy server is setup with `@domoinc/ryuu-proxy` for local development to your domo instance.
    * An upload script has been added to the package.json for easy upload.

    #### Upload and configure

    * Use the [domoapps cli](/portal/Apps/App-Framework/Tools/domo-CLI) to login to your Domo instance with `domo login`
    * Upload the boilerplate app to your Domo instance using `yarn upload` or `npm run upload`
      * The project will build, add all assets to the `build` folder, and then upload the assets to Domo
      * The `manifest.json` file in the `build` folder will be modified by the domoapps cli to include an `id` property—you will want to copy this `id` into the manifest in your `public` folder so that it doesn't continue to create a new `id` on each upload
    * If you intend to use endpoints provided by the App Platform (e.g. datasets, AppDB, etc), make sure to also add a `proxyId` to the `manifest.json` file in your `public` folder. See [proxy documentation](/portal/Apps/App-Framework/Guides/manifest#getting-a-proxyid-advanced) for more info.

    #### Local Development

    Run the `yarn start` (or `npm start`) command (after you've uploaded your app at least once) to start developing locally.
  </Tab>

  <Tab title="Angular">
    #### Prerequisites

    You'll need the <a href="http://cli.angular.io/">Angular CLI</a> installed in order to run the `ng add` command.

    #### Create a new project

    ```
    $ ng new domo-app
    $ cd domo-app
    ```

    Select NO when prompted whether SSR should be enabled for the new project.

    #### Add Ryuu Angular

    ```
    $ ng add @domoinc/ryuu-angular
    ```

    This will add the following:

    * Domo `manifest.json` and `thumbnail.png` to a new `domo` directory at the root of the project
    * `extra-webpack.config.js` at the root of the project that configures a local proxy.
    * `domo:upload` helper script to `package.json` to upload to Domo.

    #### Local development

    In order for the proxy to work in local development you need to have uploaded your app at least once with `npm run domo:upload`

    After this you should be able to run `ng serve` like normal and you'll be able to proxy domo requests in your local development.
  </Tab>

  <Tab title="Vue">
    #### Prerequisites

    Install <a href="https://github.com/vuejs/vue-cli">Vue CLI</a>

    #### Create new project

    ```
    vue init webpack my-app
    cd my-app
    ```

    #### Add Domo Assets

    Add a `manifest.json` and `thumbnail.png` to a `./domo` directory at the root of the project. Then modify the copy plugin patterns in the `./build/webpack.prod.conf.js` to copy over Domo assets.

    ```
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] },
      { from: path.resolve(__dirname, '../domo') },
    ])
    ```

    #### Add Domo Dev Proxy

    ```
    npm install --save-dev @domoinc/ryuu-proxy
    ```

    Add the following to `./config/index.js`

    ```
    var { Proxy } = require('@domoinc/ryuu-proxy')
    var manifest = require('../domo/manifest.json')
    var domoProxy = new Proxy({ manifest })
    ```

    Now add the following to `dev:{}` within the same file `./config/index.js`

    ```
    dev: {
        // existing scaffolded options
        // ...
        // ...
        "before": app =&gt; app.use(domoProxy.express())
    }
    ```

    Open `./build/webpack.dev.conf.js` and add the following to the end of `devServer: {}`

    ```
    devServer: {
        // existing scaffolded options
        // ...
        // ...
        before: config.dev.before
    }
    ```

    Add `id` to `manifest.json` if not already done, and run:

    ```
    domo publish
    ```
  </Tab>
</Tabs>