Sharing Assets Offline and Online

Question

I have several websites and I want them to share common assets - For now, at least a global css file. As this must be a common challenge, I anticipate there will be several different ways to achieve the end as well as several different opinions as to which is the best strategy.

My preference would be to have some mechanism setup to "clone-link" the css files in 2 separate projects, so that changes in one file are imposed on the other. Then I would still be able to work in the confines of a single project at a time.

An alternative, I can envisage, would be to have seperate projects \ websites link to a common css file which is served by one of the projects. Working offline, I know I can link an HTML files to a css file anywhere on the harddrive. But that would mean linking an HTML file to a css file that is outside the project folder and once the project is posted online, that outside link would be useless. I'm expect there is a smart, i.e. automated, way to change the css-link (or whatever) to a specific web-address, (such as one of my sites) in the process of uploading. For example: when working offline, I can have the HTML files in mysite2 link to D:\Webs\mysite1\global.css. Then, once posted, the links change to www.mysite1\global.css. I imagine this can be achieved quite neatly with a js script, but I am only just getting into jas and, as yet, don't know where to start.

All help and opinions much appreciated. Just please don't mention Bootstrap (I have a peverse need to do it my way). 🙂

osgood_ · Accepted Answer

Thanks Osgood I haven't tried it yet, but it looks like it should work. I will need to do something similar in the css file to change links to background images etc., but I'm not sure a js solution is feasible as it is in the HTML file. But it's not a big deal to simply duplicate the linked resources in both websites and use relative URL's - They don't take much much space and at least they are static (unchanging).

I was hoping js would be able to poll the server and determine whether the site was being served online or offline and do the change automatically. Can you put in a test so that if it's not being served on my harddrive, it should go ahead and make the change? I was thinking maybe it tries to make the link D:/webs/..../global.css, or looks for some marker file that only exists on the harddrive, and if that fails, switch the link to the absolute URL: www.mysite1 (that has the css file) / .../global.css. Wishful thinking?

Offline, I have tried linking to css outside the current project and it works OK. DW Preview doesn't work and I assume it won't track changes outside the working project. But I don't use it much anyway.

I was hoping js would be able to poll the server and determine whether the site was being served online or offline and do the change automatically.

By @Galeodan

You can check some text which is included in the webpages url. Like online http or https will be included in the url, offline that wont be included UNLESS you are working with a local server, in which case 'localhost' will be included in the url, so you could use that to determine which css file to serve.

//get url of current page

const url = window.location.href;

// reference the pages stylesheet
let stylesheet = document.getElementById('globalCss');

//check if url contains text i.e, http or localhost and serve css file based on result
url.includes('http') ? stylesheet.setAttribute('href', 'http://www.mysite1/global.css') : stylesheet.setAttribute('href', 'D:\Webs\mysite1\global.css');

See if that would work for what you need.

Nancy OShea · Answer

Put your common assets on a CDN (content delivery network) such as Amazon S3 Buckets. And reference them with absolute URLs.

Why you should use Content Delivery Networks:

https://www.fastly.com/blog/why-you-should-use-content-delivery-network

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded