Start from an existing application package

If you would like to build on top of a pre-existing application, you will need to create a new application as specified in Create a UI package.

Copy link to this section

Add your dependency

Once you create your application, add the pre-existing application to the dependency list within your package's c3pkg.json. To build examplePackage using version 8.6 of uiDemo, configure your examplePackage.c3pkg.json file as follows:

/* examplePackage/examplePackage.c3pkg.json */
{
  "name": "examplePackage",
  "version": "8.6",
  "dependencies": {
    "uiDemo": "8.6"
  }
}

The dependencies field maps package names to the version that you want of that package. This example specifies version 8.6 of uiDemo.

Copy link to this section

Add new content

By adding a dependency to your package, you automatically inherit all content (such as routes, components, and metadatadata) included in that package. You can then create more content in your package. The resulting application will contain the content from both packages.

Copy link to this section

Modify existing content

Two types of content typically require overrides when you build on another package. The first type includes data or metadata with a unique identifier. The second type consists of files identified by their paths (the path is the identifier).

Copy link to this section

Modify ID-based content

To modify ID-based content, such as component configurations, redefine the content with the same ID in the new package. The new package takes priority over the dependency when setting content. For example, uiDemo sets a UiSdlRoute with the urlPath /. If examplePackage also sets a route to /, the page definition from examplePackage's route will take precedence.

Copy link to this section

Modify path-based content

To override path-based content, make a file at the same path, and its content will take priority. The method is replaces the file at that path from the dependency with the one from the new package.

Here is a table explaining what files are ID-based vs. path-based: