Using Static Assets on Your Pages
Last edit: May 21, 2024
This guide will help you use static assets (e.g. CSS, Javascript, or HTML files) on your pages.
Requirements
To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase, and understand the concepts of pages, layouts, and assets. You'll extend code samples from the previous tutorials.
- Directory Structure
- Pages
- Layouts
- Assets
- Reusing Code Across Multiple Pages (previous tutorial)
Steps
Note
Below steps are using Liquid filters, to learn about Liquid filters click here.
Using static assets on your pages is a four-step process:
Step 1: Create assets directory and subdirectories
If you are starting from scratch (without having created the codebase), create an assets directory inside app.
If you have already created the codebase, you can skip this step, and just locate your app/assets directory.
Create subdirectories for different assets inside the assets directory: for this tutorial, create scripts for storing Javascript files, and styles for storing CSS files.
Step 2: Create assets
Create a couple of assets.
Create a CSS file app.css in the styles directory:
body {
background-color: #ccc;
}
Create a Javascript file app.js in the scripts directory:
console.log("Hello from JS!");
Create an HTML file test.html in the assets directory:
Hello from test.html
Step 3: Check assets
Use {{ asset_url }} variable to check your assets. This will list the full URL of your assets on our content delivery network, including the time of the latest update (used for caching).
Example for this documentation site:
{"73.aa3.js":"https://uploads.platformos.dev/instances/85/assets/73.aa3.js?updated=1730879549","graphql.js":"https://uploads.platformos.dev/instances/85/assets/graphql.js?updated=1730879549","images/awards/template.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/template.jpeg?updated=1726477978","images/awards/tests.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/tests.jpeg?updated=1726477978","images/get-started/graphiql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/graphiql.png?updated=1726477978","images/get-started/todo/ui.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/ui.jpg?updated=1726477978","images/awards/UKTC2019_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/UKTC2019_quote.png?updated=1726477978","images/svg/callout-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/callout-bg.svg?updated=1726477978","images/get-started/contact-us-tutorial/events_ui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_ui.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_arr.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_arr.png?updated=1726477978","images/get-started/contact-us-tutorial/fill_form_no_render.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/fill_form_no_render.gif?updated=1726477978","images/developer-guide/ci-cd/constants.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/constants.png?updated=1737379575","images/awards/cicd.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/cicd.jpeg?updated=1726477978","362.8eb.js":"https://uploads.platformos.dev/instances/85/assets/362.8eb.js?updated=1726481185","781.026.js":"https://uploads.platformos.dev/instances/85/assets/781.026.js?updated=1726481185","app.css":"https://uploads.platformos.dev/instances/85/assets/app.css?updated=1745994436","search.a0c.css":"https://uploads.platformos.dev/instances/85/assets/search.a0c.css?updated=1726481185","search.a0c.js":"https://uploads.platformos.dev/instances/85/assets/search.a0c.js?updated=1726481185","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1726477978","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1726477978","images/awards/2022/Best_SME_DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best_SME_DevPortal.png?updated=1726477978","images/best-practices/qa/sanity_tests.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/sanity_tests.png?updated=1726477978","images/best-practices/qa/smoke_testing.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/smoke_testing.png?updated=1726477978","images/awards/styleguide.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/styleguide.jpeg?updated=1726477978","images/developer-guide/ci-cd/all-instances.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/all-instances.png?updated=1737379575","images/developer-guide/pos-cli-workflow/final-result.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1726477978","201.e9e.js":"https://uploads.platformos.dev/instances/85/assets/201.e9e.js?updated=1730879549","images/favicon-32x32.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-32x32.png?updated=1726477978","images/favicon-96x96.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-96x96.png?updated=1726477978","images/get-started/contact-us-tutorial/contactus_first_test_message.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_first_test_message.png?updated=1726477978","images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui.png?updated=1745993461","images/get-started/contact-us-tutorial/database_contact.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/database_contact.png?updated=1726477978","app.js":"https://uploads.platformos.dev/instances/85/assets/app.js?updated=1745994436","252.879.js":"https://uploads.platformos.dev/instances/85/assets/252.879.js?updated=1726481185","images/user-research/PP-DesignStyle.png":"https://uploads.platformos.dev/instances/85/assets/images/user-research/PP-DesignStyle.png?updated=1726477978","images/workflow/development_workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/workflow/development_workflow.png?updated=1726477978","images/get-started/contact-us-tutorial/test_graphql_mutation.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/test_graphql_mutation.gif?updated=1726477978","images/get-started/contact-us-tutorial/valid_email.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_email.png?updated=1726477978","images/get-started/contact-us-tutorial/valid_email_log.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_email_log.png?updated=1726477978","images/kits/ui/Figma_pOS_atomicProcess.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_atomicProcess.png?updated=1726477978","images/best-practices/qa/qrcode.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/qrcode.jpg?updated=1726477978","images/get-started/contact-us-tutorial/graphql-explorer-create.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphql-explorer-create.png?updated=1730119792","images/get-started/contact-us-tutorial/invalid_error_log.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/invalid_error_log.png?updated=1726477978","images/get-started/contact-us-tutorial/logs_cli.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/logs_cli.png?updated=1726477978","images/get-started/contact-us-tutorial/lsp_authenticity_token.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_authenticity_token.png?updated=1726477978","images/get-started/contact-us-tutorial/lsp_open_path.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_open_path.gif?updated=1726477978","images/get-started/contact-us-tutorial/new_instance_details.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/new_instance_details.png?updated=1726477978","images/kits/ui/Figma_pOS_AMO.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_AMO.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_hash.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hash.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_hello.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hello.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_hello_hi.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hello_hi.png?updated=1726477978","search.568.css":"https://uploads.platformos.dev/instances/85/assets/search.568.css?updated=1730879549","images/get-started/contact-us-tutorial/something-went-wrong.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/something-went-wrong.png?updated=1730119792","images/svg/sections/best-practices.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/best-practices.svg?updated=1726477978","668.0ab.js":"https://uploads.platformos.dev/instances/85/assets/668.0ab.js?updated=1730879549","images/best-practices/gdpr/thankyou_page.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/thankyou_page.png?updated=1726477978","images/best-practices/gdpr/unsubscribe.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/unsubscribe.png?updated=1726477978","images/best-practices/lighthouse/slack-notification.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/lighthouse/slack-notification.png?updated=1726477978","images/best-practices/qa/executed_suit.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_suit.jpg?updated=1726477978","images/developer-guide/ci-cd/click_new_instance.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/click_new_instance.png?updated=1737379575","images/developer-guide/ci-cd/main-authorize.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/main-authorize.png?updated=1737379575","images/developer-guide/ci-cd/pos_file_token.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/pos_file_token.png?updated=1737379575","images/developer-guide/dns/legacy-dns-page.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/legacy-dns-page.png?updated=1726477978","images/developer-guide/pos-marketplace-template/pmt_commands.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-marketplace-template/pmt_commands.png?updated=1726477978","668.60c.js":"https://uploads.platformos.dev/instances/85/assets/668.60c.js?updated=1745994436","images/get-started/contact-us-tutorial/contact_us_rerender.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_rerender.gif?updated=1726477978","images/get-started/contact-us-tutorial/contactus_invalid_graphql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_invalid_graphql.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_another_val.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_another_val.png?updated=1726477978","images/get-started/contact-us-tutorial/parameters_array.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_array.png?updated=1726477978","images/get-started/contact-us-tutorial/record-in-the-database.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/record-in-the-database.png?updated=1730119792","images/get-started/contact-us-tutorial/valid_log.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_log.gif?updated=1726477978","images/get-started/todo/email_basic.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/email_basic.jpg?updated=1726477978","images/get-started/todo/gui_records.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_records.jpg?updated=1726477978","images/kits/ui/Figma_pOS_customizable.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_customizable.png?updated=1726477978","images/kits/ui/recolor.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/recolor.gif?updated=1726477978","images/svg/sections/api-reference.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/api-reference.svg?updated=1726477978","images/svg/sections/pos-kits.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/pos-kits.svg?updated=1726477978","images/developer-guide/dns/wildcard.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/wildcard.png?updated=1726477978","images/developer-guide/dns/reparking-ns.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/reparking-ns.png?updated=1726477978","images/developer-guide/dns/specific-subdomain.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/specific-subdomain.png?updated=1726477978","images/best-practices/qa/executed_tests.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_tests.jpg?updated=1726477978","images/best-practices/qa/list_browsers.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/list_browsers.png?updated=1726477978","images/best-practices/qa/test_results.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/test_results.png?updated=1726477978","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1726477978","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1726477978","images/get-started/contact-us-tutorial/authorize.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/authorize.gif?updated=1726477978","images/get-started/contact-us-tutorial/authorize.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/authorize.png?updated=1726477978","images/get-started/contact-us-tutorial/contact_form_post_endpoint.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_form_post_endpoint.gif?updated=1730119792","images/get-started/contact-us-tutorial/contact_us_display_error.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_display_error.gif?updated=1726477978","images/get-started/contact-us-tutorial/contact_us_example_data.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_example_data.png?updated=1726477978","images/get-started/contact-us-tutorial/contact_us_prefill.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_prefill.gif?updated=1726477978","images/get-started/contact-us-tutorial/contactus_pos_test_module_run_dummy_test.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_pos_test_module_run_dummy_test.png?updated=1745993461","images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui_run_happy_path_tests.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui_run_happy_path_tests.png?updated=1745993461","images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui_run_negative_path_tests_fail.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_pos_tests_module_ui_run_negative_path_tests_fail.png?updated=1745993461","images/get-started/contact-us-tutorial/contactus_rendered_invalid.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_rendered_invalid.png?updated=1726477978","images/get-started/contact-us-tutorial/contactus_test_context_param_contect.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_test_context_param_contect.gif?updated=1726477978","images/get-started/contact-us-tutorial/contactus_test_first.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_test_first.gif?updated=1726477978","images/get-started/contact-us-tutorial/contactus_thanks_database.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_thanks_database.gif?updated=1726477978","images/get-started/contact-us-tutorial/create_new_instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/create_new_instance.png?updated=1726477978","images/get-started/contact-us-tutorial/database-empty.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/database-empty.png?updated=1745993461","images/get-started/contact-us-tutorial/events_consumer.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_consumer.png?updated=1726477978","fonts/Gotham-Book.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Book.woff2?updated=1726477978","images/kits/ui/colorvariants/color_variant_description.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_description.png?updated=1726477978","modules/graphql/graphql.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.css?updated=1726477978","modules/graphql/graphql.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.js?updated=1726477978","images/get-started/contact-us-tutorial/events_listed.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_listed.png?updated=1726477978","images/get-started/contact-us-tutorial/graphql-explorer-response.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphql-explorer-response.png?updated=1730119792","images/get-started/contact-us-tutorial/log_notify_submitted.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_notify_submitted.png?updated=1726477978","images/get-started/contact-us-tutorial/new_instance_ready.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/new_instance_ready.png?updated=1726477978","images/kits/ui/Figma_pOS_standards.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_standards.png?updated=1726477978","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1726477978","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1726477978","images/kits/ui/designkit/components.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components.png?updated=1726477978","images/kits/ui/features/button.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/button.gif?updated=1726477978","images/kits/ui/features/flexible.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/flexible.gif?updated=1726477978","search.e33.css":"https://uploads.platformos.dev/instances/85/assets/search.e33.css?updated=1745994436","search.e33.js":"https://uploads.platformos.dev/instances/85/assets/search.e33.js?updated=1745994436","fonts/Gotham-Medium.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Medium.woff2?updated=1726477978","images/get-started/show-deleted-records.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/show-deleted-records.png?updated=1729068342","images/graphiql/main-window.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/main-window.png?updated=1726477978","images/graphiql/multiple-queries.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/multiple-queries.png?updated=1726477978","images/svg/sections/code-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/code-kit.svg?updated=1726477978","images/svg/sections/design-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/design-kit.svg?updated=1726477978","images/svg/sections/how-platformos-works.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/how-platformos-works.svg?updated=1726477978","images/svg/sections/sections-sprite.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/sections-sprite.svg?updated=1726477978","images/svg/sections/use-cases.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/use-cases.svg?updated=1726477978","images/kits/ui/colorvariants/color_variant_variable_name.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_variable_name.png?updated=1726477978","images/graphiql/variables.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/variables.png?updated=1726477978","images/meet-us/marketplace_risk_conference.png":"https://uploads.platformos.dev/instances/85/assets/images/meet-us/marketplace_risk_conference.png?updated=1726477978","search.568.js":"https://uploads.platformos.dev/instances/85/assets/search.568.js?updated=1730879549","images/svg/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/header-bg.svg?updated=1726477978","images/awards/2021/Best Onboarding Award.svg":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Onboarding Award.svg?updated=1726477978","images/kits/ui/features/mobile-layout.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile-layout.gif?updated=1726477978","images/kits/ui/features/mobile.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile.png?updated=1726477978","images/developer-guide/dns/ownership-verification.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/ownership-verification.png?updated=1726477978","images/get-started/contact-us-tutorial/contact_us_parameters.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_parameters.png?updated=1726477978","images/svg/sections/dev-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/dev-kit.svg?updated=1726477978","images/svg/sections/developer-guide.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/developer-guide.svg?updated=1726477978","images/svg/sections/get-started.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/get-started.svg?updated=1726477978","images/use-cases/recording-terminal/hello.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/hello.svg?updated=1726477978","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1726477978","images/use-cases/social-media-cards/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/after.jpg?updated=1726477978","images/use-cases/social-media-cards/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/before.jpg?updated=1726477978","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1726477978","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1726477978","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1726477978","images/developer-guide/records/building-contact-form-with-records/contact-table.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/records/building-contact-form-with-records/contact-table.png?updated=1726477978","images/get-started/contact-us-tutorial/contact_us_test1.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_test1.png?updated=1726477978","images/get-started/contact-us-tutorial/contactus_first.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_first.png?updated=1726477978","images/graphiql/comments.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/comments.png?updated=1726477978","images/get-started/contact-us-tutorial/events_no_consumers.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_no_consumers.png?updated=1726477978","images/get-started/contact-us-tutorial/function_lsp_help.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/function_lsp_help.png?updated=1726477978","images/get-started/contact-us-tutorial/function_tag_lsp.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/function_tag_lsp.png?updated=1726477978","images/get-started/contact-us-tutorial/graphiql-icon.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphiql-icon.png?updated=1730119792","images/get-started/contact-us-tutorial/graphiql-variables.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphiql-variables.png?updated=1730119792","images/svg/logo.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/logo.svg?updated=1726477978","images/best-practices/gdpr/join_newsletter.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/join_newsletter.png?updated=1726477978","images/awards/2021/ISTC.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC.png?updated=1726477978","images/contributor-guide/feedback_block.png":"https://uploads.platformos.dev/instances/85/assets/images/contributor-guide/feedback_block.png?updated=1726477978","images/awards/uktc_ceremony.jpg":"https://uploads.platformos.dev/instances/85/assets/images/awards/uktc_ceremony.jpg?updated=1726477978","images/awards/workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/workflow.png?updated=1726477978","images/get-started/Marketplace_MVP.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/Marketplace_MVP.jpg?updated=1726477978","images/get-started/authorize.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/authorize.png?updated=1737379575","images/get-started/create-new-instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/create-new-instance.png?updated=1737379575","images/get-started/database-gui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/database-gui.png?updated=1729068342","images/awards/2021/DPA21_alternativestorestAPIs_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_alternativestorestAPIs_quote.png?updated=1726477978","images/awards/2021/DPA21_besteditorial_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_besteditorial_quote.png?updated=1726477978","images/awards/2021/DPA21_bestonboarding_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_bestonboarding_quote.png?updated=1726477978","images/awards/2022/Best Accessible Devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Accessible Devportal.png?updated=1726477978","images/awards/2022/Best DevPortal beyond REST Platforms.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best DevPortal beyond REST Platforms.png?updated=1726477978","images/awards/2022/Best New DX Innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best New DX Innovation.png?updated=1726477978","images/awards/2022/dpa_best_accessible_devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_accessible_devportal.png?updated=1726477978","images/awards/2022/dpa_best_devportal_beyond_rest.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_devportal_beyond_rest.png?updated=1726477978","images/awards/2022/dpa_best_new_dx_innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_new_dx_innovation.png?updated=1726477978","images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png?updated=1726477978","images/awards/2021/Best Editorial Experience.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Editorial Experience.png?updated=1726477978","images/get-started/contact-us-tutorial/contact-table-columns.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact-table-columns.png?updated=1730119792","images/svg/search-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/search-bg.svg?updated=1726477978","images/get-started/contact-us-tutorial/invalid_email.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/invalid_email.png?updated=1726477978","images/get-started/contact-us-tutorial/localhost_logs.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/localhost_logs.png?updated=1726477978","images/get-started/contact-us-tutorial/log_email_sent.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_email_sent.png?updated=1726477978","images/get-started/contact-us-tutorial/log_liquid_error.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_liquid_error.png?updated=1726477978","images/favicon-192x192.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-192x192.png?updated=1726477978","images/kits/ui/figma_app_screen.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/figma_app_screen.jpg?updated=1726477978","images/get-started/contact-us-tutorial/test_message_context.params.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/test_message_context.params.png?updated=1726477978","images/get-started/contact-us-tutorial/use_env_add.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/use_env_add.png?updated=1726477978","images/get-started/contact-us-tutorial/using-graphql-explorer.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/using-graphql-explorer.gif?updated=1730119792","images/kits/ui/designkit/overview.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/overview.png?updated=1726477978","images/kits/ui/designkit/rules.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/rules.png?updated=1726477978","images/kits/ui/designkit/style_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/style_guide.png?updated=1726477978","images/kits/ui/features/accessible.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/accessible.png?updated=1726477978","images/kits/ui/features/spacing.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/spacing.gif?updated=1726477978","images/kits/ui/features/swap.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/swap.gif?updated=1726477978","images/kits/ui/features/variants.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/variants.png?updated=1726477978","modules/graphql/code.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/code.css?updated=1726477978","modules/graphql/filter-types.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/filter-types.js?updated=1726477978","images/awards/2022/Best Small to Medium Enterprise DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Small to Medium Enterprise DevPortal.png?updated=1726477978","images/awards/2022/DPA22_bestDX_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestDX_quote.png?updated=1726477978","images/awards/2022/DPA22_bestaccessible_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestaccessible_quote.png?updated=1726477978","images/awards/2022/DPA22_beyondrest_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_beyondrest_quote.png?updated=1726477978","images/awards/2022/DevRel_Awards_2022-Winner_badge.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DevRel_Awards_2022-Winner_badge.png?updated=1726477978","images/best-practices/qa/devops.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/devops.png?updated=1726477978","images/developer-guide/ci-cd/create_record_instance.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/create_record_instance.png?updated=1737379575","images/developer-guide/ci-cd/github_secrets_token.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/github_secrets_token.png?updated=1737379575","images/developer-guide/ci-cd/instance_table_add.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/ci-cd/instance_table_add.png?updated=1737379575","images/get-started/contact-us-tutorial/lsp_contact_never_used.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_contact_never_used.png?updated=1726477978","images/developer-guide/records/building-contact-form-with-records/create-contact.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/records/building-contact-form-with-records/create-contact.png?updated=1726477978","images/kits/ui/designkit/inputs.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/inputs.png?updated=1726477978","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1726477978","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1726477978","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1726477978","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1726477978","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1726477978","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1726477978","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1726477978","images/graphiql/autocomplete.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/autocomplete.png?updated=1726477978","images/graphiql/docs.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/docs.png?updated=1726477978","images/graphiql/explorer-add-new.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer-add-new.png?updated=1726477978","images/graphiql/explorer.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer.png?updated=1726477978","images/graphiql/history.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/history.png?updated=1726477978","images/pos-logo-2to1.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-2to1.png?updated=1726477978","images/pos-logo-dark.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-dark.png?updated=1726477978","images/pos-logo.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo.png?updated=1726477978","images/get-started/database-ui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/database-ui.png?updated=1726477978","images/get-started/instance-url.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/instance-url.png?updated=1737379575","images/get-started/new-instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/new-instance.png?updated=1737379575","images/get-started/partner-portal-list.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/partner-portal-list.png?updated=1737379575","images/get-started/restore-record.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/restore-record.png?updated=1729068342","images/get-started/todo/gui_graphiql_delete.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_delete.jpg?updated=1726477978","images/get-started/todo/gui_graphiql_mutation.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_mutation.jpg?updated=1726477978","images/get-started/todo/gui_graphiql_query.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_query.jpg?updated=1726477978","images/kits/ui/designkit/components_buttons.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components_buttons.jpg?updated=1726477978","images/kits/ui/designkit/customization_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/customization_guide.png?updated=1726477978","images/kits/ui/designkit/designkit_illustration.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/designkit_illustration.jpg?updated=1726477978","images/kits/ui/designkit/getting_started.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/getting_started.png?updated=1726477978","modules/graphql/line-link.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/line-link.js?updated=1726477978","modules/graphql/images/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/images/header-bg.svg?updated=1726477978"}
Step 4: Access assets
To access assets, use the asset_url filter in your liquid file, e.g. layout:
<html>
<head>
<link rel="stylesheet" href="{{ 'styles/app.css' | asset_url }}">
<script src="{{ 'scripts/app.js' | asset_url }}"></script>
</head>
<body>
<a href="{{ 'test.html' | asset_url }}">Test</a>
{{ content_for_layout }}
</body>
</html>
Sync or deploy. The background color of the page has changed to the color specified in the app.css file, and the link to test.html works. If you check the developer console, the Javascript is there.
Next steps
Congratulations! You have learned how to use static assets on your pages. Now you can learn about adding visuals to your pages using CSS or Javascript.