12 Work With Application Resources

As you develop an application, you can import and export static resource files for use in your application's pages.

Resources are typically files that you import to support or add functionality to pages in your application. For example, when you want to use an image in a page, you can import the image as a resource into an images folder, then use an Image component on a page to reference the imported image.

By default, each web (and mobile) application contains a resources folder to store custom components, images, translation files, and other resources that can be used in the application. Here are the folders created by default for the following types of resource files:

Folder	Description
actions	Location for custom actions that you might define in your application. Right-click the folder to either create or import a custom action.
components	Location for custom web components that are installed to your application (by importing them in the Page Designer). You can also create a custom component here by clicking Create Component. Note: Importing custom components to the resources/components folder or creating them there makes them a part of your application. Because these components are not cached, you're likely to run into performance issues when they are downloaded each time you reload the Page Designer for preview, or at runtime when you publish an update to your app. As a best practice then, it helps to publish your components to a CDN (Content Delivery Network) or an external location that your browser can cache requests from. This is useful especially when you have multiple apps that use the same components. Talk to your administrator for site-specific information on how to publish these components externally.
css	Location for the app.css stylesheet that is linked from your application's pages. This stylesheet is empty by default. You can edit the stylesheet to add custom styling to page elements. See Add a Custom Style to a Component. The app.css file is not used to control the styling of Oracle JET components.
images	Default location for any custom images that you might want to add to your application. Images in the application’s resources directory can be used in any page in the application. This folder contains two favicon files by default (favicon-dark.ico and favicon-light.ico), used by web and Progressive Web Apps. The favicon used depends on the mode the app uses (light or dark mode). Overwrite the default-provided favicons if you want to use your own favicons. See Work with the Image Gallery. Flow artifacts can also contain an images folder that stores images that can be used in pages in the flow. When you add an image to a page, it is stored in the images folder in the resources folder of the flow that contains the page.
js	Location for external JavaScript files that you want to use in your application's pages.
strings	Default location for your translation bundles. See About Translation Resources. Flow and page artifacts can also contain a strings folder that stores translation bundles.

To work with resources at the visual application level, see Export and Import Application Resources.