Recursos Estáticos

JavaScript, hojas de estilos, imágenes y cualquier otro recurso estático de la aplicación almacenado localmente (disco local) y remotamente (Google Cloud Storage).

¿Cómo publicar recursos estáticos? #

Digamos que tenemos un módulo JavaScript heredado que necesitamos servir desde nuestra aplicación. Primero agregamos nuestro archivo legacy-module.js a nuestro disco local, así que la carpeta se verá algo así:

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

Luego podemos publicar nuestro archivo legacy-module.js usando el comando static collect como se muestra a continuación:

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

Usar los recursos estáticos #

Para usar nuestros recursos estáticos en cualquiera de nuestras páginas, usamos la función elemental_static_url_for así:

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

Al usar esta función, cuando la aplicación se ejecuta localmente, el servidor usará el archivo estático local, mientras que cuando se ejecuta remotamente, el servidor servirá la versión de Google Cloud Storage del recurso.

Explorar el repositorio remoto #

Podemos navegar por nuestro repositorio remoto usando el CLI ejecutando un comando static list --all. Este comando mostrará todos los archivos almacenados en Google Cloud Storage, y mostrará un indicador relacionado de archivo faltante.

Si el indicador de archivo faltante (*) se muestra a la derecha del nombre del archivo, eso significa que el archivo local está faltando. Y si el indicador de archivo faltante se muestra a la izquierda del nombre del archivo, eso significa que el archivo remoto está faltando.

        
            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