CMS Development

MNick2
Participant

Ideas with using "get_asset_url" during local development?

SOLVE

Was curious how people manage developing templates and themes locally and because we have to use something like "get_asset_url" for everything (css/images etc). I find myself not using that until I'm done developing so I can preview my stuff locally, and then when I am ready to upload to Hubspot I'll replace with "get_asset_url" but then if we need to make changes again, I have to remove "get_asset_url" and relative path back on my local machine to keep working properly ie "assets/main.css" since "get_asset_url" obviously won't render the local css.

 

I was wondering how people handle this, maybe some kind of script that adds "get_asset_url" to all assets before uploading etc.

1 Accepted solution
Anton
Solution
Thought Leader

Ideas with using "get_asset_url" during local development?

SOLVE

Hey @MNick2,

most times I don't use "get_asset_url" while developing modules/templates.

 

My personal approach is:
creating a single CSS file with static code which defines the default state of a module or function, combine them all in a main.css like

 

 

{% include '../css/globals/forms.css' %}
{% include '../css/globals/typo.css' %}
{% include '../css/modules/socials.css' %} 
... ​

 

 

 

I include it via "get_asset_url" in the layout.html file like this

 

 

{{ require_css(get_asset_url('../../css/main.css')) }}

 

 

so only relative paths.

 

Also a big thing: While developing I have the "hs watch" function running constantly in VSCode. The watcher is uploading every change to a developer portal and I'm checking/debugging everything there. Once the development is done I upload it to the clients portal.

 

If I need a script or (CSS) file specifically for one module I include it via the meta.json file of a module like this

 

 

"js_assets": [
{ 
"autoload": false, 
"path": "../../../js/swiper.js", 
"name": "swiper.js", 
"defer": true 
} 
]

 

 

 

hope that helps.

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

3 Replies 3
Anton
Solution
Thought Leader

Ideas with using "get_asset_url" during local development?

SOLVE

Hey @MNick2,

most times I don't use "get_asset_url" while developing modules/templates.

 

My personal approach is:
creating a single CSS file with static code which defines the default state of a module or function, combine them all in a main.css like

 

 

{% include '../css/globals/forms.css' %}
{% include '../css/globals/typo.css' %}
{% include '../css/modules/socials.css' %} 
... ​

 

 

 

I include it via "get_asset_url" in the layout.html file like this

 

 

{{ require_css(get_asset_url('../../css/main.css')) }}

 

 

so only relative paths.

 

Also a big thing: While developing I have the "hs watch" function running constantly in VSCode. The watcher is uploading every change to a developer portal and I'm checking/debugging everything there. Once the development is done I upload it to the clients portal.

 

If I need a script or (CSS) file specifically for one module I include it via the meta.json file of a module like this

 

 

"js_assets": [
{ 
"autoload": false, 
"path": "../../../js/swiper.js", 
"name": "swiper.js", 
"defer": true 
} 
]

 

 

 

hope that helps.

 

best, 

Anton

Anton Bujanowski Signature
Jaycee_Lewis
Community Manager
Community Manager

Ideas with using "get_asset_url" during local development?

SOLVE

Thank you, @Anton!

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Ideas with using "get_asset_url" during local development?

SOLVE

Hi, @MNick2 👋 Thanks for reaching out. Let's invite some community members into the conversation — hey @BarryGrennan @Anton @LucBenayoun, can you share how you are handling this in your current workflow? 

 

Thank you very much! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot