Implement a client side version

[philippemiguet]

Purpose

From this discussion, implement a client side version to be used and free the engineers from uploading manually the assets.

Idea

// @bufferapp/static-assets/client.js
let staticFileBaseURL = '/static/' // default for local dev typically via express-static
export setBaseURL = (baseURL) => staticFileBaseURL = baseURL
export staticURL = (file) => `${staticFileBaseURL}${file}`

And in the application:

// app.js
import MyApp from './components/MyApp'
import { setBaseURL } from '@bufferapp/static-assets/client'

// this could be set by a global bootstrapped on the page
setBaseURL(window.staticAssetBaseURL) 
// -> we could even make this the default!

React.render(<MyApp/>, document.getElementById('#app'))

// ./components/MyApp.jsx
import { staticURL } from '@bufferapp/static-assets/client'

<div id="body></div>
<!-- in dev -->
<script> window.staticAssetBaseURL = '/static/' </script>
<!-- in prod -->
<script> window.staticAssetBaseURL = 'https://static.buffer.com/login/' </script>

We could even take this a step further and make some of this more automatic with a piece of express middleware that injects the staticAssetBaseURL into res.locals but that may be a bit overkill for now 😁

Question

How would that work with Buffer component library?

[djfarrelly]

How would that work with Buffer component library?

I'm guessing that the components in our shared library won't require images or static assets to work. I think they would likely allow for the engineer to pass any static file via props. Other components may just use in-line svg's to reduce the number of dependencies. For example:

<Avatar image={staticURL('something.jpg')} />

[philippemiguet]

That's right, it will work well with low-level components. It can be true as well for more complex feature-like components 👍