Static resources

javascript, stylesheets, images and any other application static resource stored locally (local drive) and remotely (Google Cloud Storage).

How to publish static resources? #

Let's say we have a legacy javascript module that we need to serve from within our application. We first add our file legacy-module.js to our local drive, so the folder will look something like this:

        
            static
              └─── modules
                     └─── legacy-module.js
              └─── style
              └─── images

Then we can publish our legacy-module.js file by using the static collect command as shown below:

        
            elemental-cms static collect 'static/app/modules/legacy-module.js'

Using the static resources #

In order to use our static resources on any of our pages we use the elemental_static_url_for function like this:

        
            <body>
                <script type="module" src="{{ elemental_url_for_static('modules/legacy-module.js') }}"></script>
            </body>

By using this function when the application runs locally the server will use the local static file, while when it runs remotely the server will serve the Google Cloud Storage versión of the resource.

Exploring the remote repository #

We can browse our remote repository using the CLI by issuing a static list --all command. This command will display all the files stored at Google Cloud Storage, and it will display a related missing file indicator.

If the missing file indicator (*) is shown to the right of the file name that means that the local file is missing. And if the missing file indicator is shown to the left of the file name that means that the remote file is missing.

        
            elemental-cms static list --all

            modules/legacy-module.js *
            styles/common.css

            2 static files found
            * is an indicator of missing files either on remote folder (left) or local folder (right)
Content