---
schema_version: "1"
id: ce57b3d7e6b14edc88b11b29df541089f851e261e66377f800df5268ce1f9e6a
title: Move OmniOut into Your App (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_move_omniout_into_your_app.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_move_omniout_into_your_app.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1e71e1f4e5880ed3b75a3f343b2884a4b1dd6c405af2370ae4281e99df6cc78e
description: For the managed package runtime, generate a compiled dist folder to move OmniOut into your app project before deploying your app to a content management system.
products:
  - Omnistudio
release: "264"
---
# Move OmniOut into Your App (Managed Package)

For the managed package runtime, generate a compiled `dist` folder to move OmniOut into your app project before deploying your app to a content management system.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

- For Omniscripts, [Add an Omniscript Lightning Web Component to OmniOut (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_omniscript_lightning_web_component_to_omniout.htm&release=264.0.0&type=5 "For the managed package runtime, download and configure an Omniscript to use it off-platform in OmniOut. Download your Omniscript LWC from the LWC Omniscript Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.").
- For Flexcards, [Add a Flexcard LWC to OmniOut (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_flexcard_lwc_to_omniout.htm&release=264.0.0&type=5 "For the managed package runtime, download and configure a Flexcard to use it off-platform in your OmniOut project. Download your Flexcard LWC from the Flexcard Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.").

1. In your OmniOut project, run the command `npm run build` in your Visual Studio Code terminal. The command compiles OmniOut into a **dist** folder.
    
    ```
    npm run build
    ```
    
    ![OmniOut dist folder](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/dist_folder.png)
2. In the **dist** folder, copy the required Omniscript and Flexcard files from the OmniOut project to your App.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d151220e117">
                  <p style="margin-bottom:0;">File/Folder</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d151220e123">
                  <p style="margin-bottom:0;">Required?</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d151220e129">
                  <p style="margin-bottom:0;">Description</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;"><strong class="uicontrol">app.js</strong> files, including numbered app.js
                    files, such as <strong class="uicontrol">0.app.js</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Yes</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">The JavaScript files required for your Flexcard or Omniscript.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">vlocityresources</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Yes</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">The static resources required for your Flexcard or Omniscript.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">index.html</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Optional</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">A sample index.html file that shows how to run the OmniOut LWC
                    project.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">newport</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Optional</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">This file is required if you’re using the default Newport theme. If
                    your Omniscript has an <strong class="uicontrol">Image</strong> or
                    <strong class="uicontrol">File</strong> element, or your Flexcard contains
                    an <strong class="uicontrol">Image</strong> element, you must also copy over
                    the <strong class="uicontrol">slds</strong> folder.
                  </p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">slds</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Optional</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">This file is required if you’re using the Lightning theme. If your
                    Omniscript contains an <strong class="uicontrol">Image</strong> or
                    <strong class="uicontrol">File</strong> element, or your Flexcard contains
                    an <strong class="uicontrol">Image</strong> element, you must copy over the
                    <strong class="uicontrol">slds</strong> folder.
                  </p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">OmniScriptDocuSignReturnPage.html</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Optional</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">This file is required if there’s a <strong class="uicontrol">DocuSign
                      Action</strong> in the Omniscript.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="File/Folder" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e117 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">OmniScriptLwcDocuSignViewPdf.html</strong>
                  </p>
                </td>

                <td data-label="Required?" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e123 ">
                  <p style="margin-bottom:0;">Optional</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d151220e129 ">
                  <p style="margin-bottom:0;">This file is required if there’s a <strong class="uicontrol">DocuSign
                      Action</strong> in the Omniscript.</p>
                </td>

              </tr>
            </tbody>
          </table>
3. In the **index.html** file, select and copy the script tags that reference app.js files into your app's index.html file.
    
    ![OmniOut appjs files required for an application](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/app_files.png)
4. In the **index.html** file, select and copy your Omniscript or Flexcard component tag into your app's index.html file.
    
    ```
    <vlocityomniscript-doc-example-english run-mode="localScriptDef"></vlocityomniscript-doc-example-english>
    ```
    
    ```
    <flexcards-accountproducts run-mode="localScriptDef"></flexcards-accountproducts> 
    ```

What’s next: [Connect Your OmniOut App (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_connect_your_omniout_app.htm&release=264.0.0&type=5 "For the managed package runtime, OmniOut connects your CMS to Salesforce through a proxy or directly. Configure a connection object to connect to the Salesforce Connected App. Connections are unique to your app's requirements and must be configured outside the scope of OmniOut.").