Expand Boilerplate to handle importing css & images?

[joshburgess]

I recently started a new project using this boilerplate as a base, and I'm having a rather hard time trying to figure out how to go about handling important components that import css & images (ex: logos or css pulled in by icon fonts that are used in an app's main navigation components, etc.).

I think it would be nice to show a working example with a little more complexity than just the blank page render. How are you all handling this? So far, I've been checking the process.env.BROWSER variable and doing conditional requires() and have managed to serve the page (without css & images), but haven't yet figured out how to properly pick it all up on the client-side to continue loading in the missing content.

[ericelliott]

Can you share your existing code?

[joshburgess]

Unfortunately, I can't due to the nature of the product (single page app for an enterpise company), but I could talk with you on Gitter/Skype/Google Hangouts/Twitter if you have some free time. I was just trying to figure out how to use this stack & server-side rendering while also handling importing & rendering CSS/images in the main components that I'd want to serve up (like the navigation on the main screen of the app). Have been reading about it a lot the past few days, and it seems it's still handled in a variety of different ways by different people.

[ericelliott]

I was just trying to figure out how to use this stack & server-side rendering while also handling importing & rendering CSS/images in the main components that I'd want to serve up (like the navigation on the main screen of the app).

I personally don't use CSS or image imports using JavaScript modules. Is that what you're talking about?

I import CSS and images the same way I always have, using the built-in HTML and browser JavaScript APIs.

[joshburgess]

Yeah, I'm importing them like you would JS modules, and webpack is able to handle this during the build steps just fine for client-side rendering, but it breaks with server-side rendering. Ideally, I'd like to have these sorts of things included on that first load, because they are logos/icons/css used by the navigational components seen in the initial screen of the app.

You just link straight to css/images/etc. in standard HTML from the static assets folder served up by Express? It's worth noting that some of these things are being pulled in by modules I'm using... for example, react-fa (which is just a wrapper for Font Awesome)... Maybe I should ditch these modules and just use these things directly in the html instead of trying to incorporate it all through React?

[ericelliott]

but it breaks with server-side rendering

This is to be expected, because it relies on browser APIs to work. If you want full control over these things, you need to roll your own. AFAIK, Webpack does not currently support universal module loading for CSS & images.

Maybe I should ditch these modules and just use these things directly in the html instead of trying to incorporate it all through React?

Yes.

[yanivkalfa]

@joshburgess && @ericelliott , webpack does support them if your build your server like you would client - with target:'node', however i am having hard time with that.

[yanivkalfa]

i made a lot of progress with that the past weekend/ i have the build/production working fine. i am now working on the development mode. once i have something concrete i will try to fork/offer it here.

[ericelliott]

Thanks. I'm not sure we want to make the decision to use CSS modules part of this boilerplate, though. There are other ways to handle CSS, and I'm not convinced importing it as modules is the best approach for everybody.

[yanivkalfa]

@ericelliott I am not talking about css modules, i am talking about simply requiring css anywhere you like, and extract-text-webpack-plugin picking it up into another file. the way it is now, when you render on the server you have to either ignore css/fonts/images etc. or something like that. it limit the use of external plugins no ?

maybe i am unfamiliar with another way mind elaborating on that ?

[ericelliott]

I am not talking about css modules, i am talking about simply requiring css anywhere you like, and extract-text-webpack-plugin picking it up into another file.

That's what css modules are. https://github.com/webpack/css-loader

[ericelliott]

There are lots of other options. See this comparison for an overview. Common alternatives are specifying css in JavaScript, and even ignoring CSS completely from the JS and just using CSS with HTML as it was originally intended.

[yanivkalfa]

I was sure that modules are: https://github.com/css-modules/css-modules. and you have to specifically enable them with this loader, require them into an object and later use the object.propertyAsClassName and the css is all message up and ugly.

I am talking about completely normal css. in your react component do something like:

import styless from './aStyle.css';

<component className={"aClassName"}/> 

Vs

<component className={styless.aClassName}/> 

Will read this comparison.

Or might be completely wrong :-)

[ericelliott]

Yeah, css-modules/css-modules is just one implementation of loading css as modules. There are many. ;)

This is why I hesitate to bless one solution, when I'm not sure there is really a well established best practice here.