Help Center

Menu

Reference static files in Component preview

When using static files inside your component, it can be useful to include these dynamically in your preview file so you can preview them locally without having to reference them inside your JavaScript code.

If you completed the Build and test your first component tutorial, you will already have a preview file with the following code to include your static files.

Before you start

Complete the steps in Configure static files in the manifest.json file

Steps

To add static files to your preview.html file:

  1. Open the preview.html file.

  2. Inside the <head> element, add the following declaration to load any static files previously configured in your manifest with the location as header:

    [component://static-header]

  3. Immediately before the closing <body> tag, add the following declaration to load any static files previously configured in your manifest with the location as footer:

    [component://static-footer]

  4. Run the local dev server to validate whether you can see your static files from the previous tutorial page loaded in the preview file.

You will see a red border around the component from your CSS file. Open your browser’s developer console and verify that you can see “Testing the JavaScript is working” printed once.

Your preview.html will look like this:

<html>
<head>[component://static-header]</head>
<body>[component://output] [component://static-footer]</body>
</html>;