Help Center

Menu

Configure static files in the manifest.json file

You must declare two static file configurations in your manifest.json file to enable the use of static files:

  • The staticFiles property at the top of the object lets you set the directory location.

  • A staticFiles filter in the function output defines specific static files that can be automatically included in your template or preview.

Add static files to your component:

  1. Add a directory called static at the root level of your component directory.

  2. Inside create three directories called:

    • Images

    • CSS

    • JS

  3. Inside the Images directory, upload an image and call it image.jpg.

  4. Inside the JS directory, add a JavaScript file called test.cjs with the following code:

    console.log(“Testing the JavaScript is working”)

  5. Inside the CSS directory, add a CSS file called component-styles.css with the following code:

    .test-static-files-component{
border: 1px solid red;
}

  6. Add the field staticFiles at the top level of your manifest.json file:

    "staticFiles": {
"locationRoot": "public"
}

  7. In your manifest, add the following to the output field in your main function:

    "staticFiles": [
  {
    "location": "header",
    "file": {
    "type": "css",
    "filepath": "styles.css"
    }
  },
  {
    "location": "footer",
    "file": {
    "type": "js",
    "filepath": "test.js"
    }
    {
    "location": "footer",
    "file": {
    "type": "js",
    "filepath": "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"
       }
    }
  }
]

  8. Test in your local development server to ensure the manifest.json is valid. Read Test using the local development server for more information.

staticFiles example

Expand to see more sample code that features staticFiles settings.

Details 
 "staticFiles": {
    "locationRoot": "public"
  }
"functions": [
    {
      "entry": "main.cjs",
      "name": "main",
      "input": {},
      "output": {
        "responseType": "html",
        "staticFiles": [
          {
            "location": "header",
            "file": {
              "type": "js",
              "filepath": "sub/dir/static-library-file.js"
            }
          },
          {
            "location": "header",
            "file": {
              "type": "js",
              "filepath": "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"
            }
          },
          {
            "location": "header",
            "file": {
              "type": "js",
              "filepath": "./sub2/dir/static-library-file.js"
            }
          }
        ]
      }
    }
  ]