These are chat archives for redfin/react-server

5th
Jun 2016
Perry Shuman
@Noirbot
Jun 05 2016 00:01
Someone have a second to help me understand how to add a style to a body tag inside React Server?
I'm rather confused about how to set this up
The docs say I can do something like:
getHeadStylesheets() {
    return [
      '/styles/style.css',
    ];
  }
But that 404's when it tries to load the css file
Bo Borgerson
@gigabo
Jun 05 2016 00:03
Hi @Noirbot. You can actually just require("./style.css") right in your page module.
Webpack will pick that up and make sure it gets loaded with your page, whether the page is rendered by the server or via client transition.
(That is, if you're using react-server-cli)
Perry Shuman
@Noirbot
Jun 05 2016 00:05
Oh, and that'll just put it on the page?
Bo Borgerson
@gigabo
Jun 05 2016 00:05
Yep!
Perry Shuman
@Noirbot
Jun 05 2016 00:05
What's the point of having getHeadStylesheets then?
Bo Borgerson
@gigabo
Jun 05 2016 00:06
There's actually a middleware that implements getHeadStylesheets, and returns the bundled CSS picked up by webpack.
It's the CSS direct-load API, but if you're using react-server-cli it's easier to let webpack set it up for you. :)
Perry Shuman
@Noirbot
Jun 05 2016 00:07
I think I'm using the cli?
Bo Borgerson
@gigabo
Jun 05 2016 00:07
:thumbsup:
If you started with the yeoman generator, then it set the CLI up for you.
Perry Shuman
@Noirbot
Jun 05 2016 00:07
Ah, yea
Ah, that seems to be working. Thank so much!
Bo Borgerson
@gigabo
Jun 05 2016 00:10
Great! :smile:
Perry Shuman
@Noirbot
Jun 05 2016 00:13
Hmm, it's working, but it seems to still be trying to load a URL that's 404ing.
That's curious
Bo Borgerson
@gigabo
Jun 05 2016 00:13
What's the URL?
Perry Shuman
@Noirbot
Jun 05 2016 00:14
I'm just running it locally
Bo Borgerson
@gigabo
Jun 05 2016 00:14
Oh, I mean the URL that's 404ing.
Perry Shuman
@Noirbot
Jun 05 2016 00:14
I have this in my file:
require('./styles/style.css');
And the page is 404ing on loading http://localhost:3000/styles/style.css
But it's loading another CSS file right before it that's going fine
http://localhost:3001/PokeFight.css
Bo Borgerson
@gigabo
Jun 05 2016 00:15
Oh, do you still have the getHeadStylesheets() in your page class?
Perry Shuman
@Noirbot
Jun 05 2016 00:16
Nope, got rid of that and restarted the server
Bo Borgerson
@gigabo
Jun 05 2016 00:16
Huh...
Perry Shuman
@Noirbot
Jun 05 2016 00:16
Yea, i dunno
not a big deal, I guess
Bo Borgerson
@gigabo
Jun 05 2016 00:18
Curious to know what's going on there.
But I guess if you're getting your styles, at least you're unblocked for now. :confused:
Perry Shuman
@Noirbot
Jun 05 2016 00:20
Haha, yea
I'm seeing this in the logs:
debug: [react-server.core.util.ClientCssHelper] Removing stylesheet: http://localhost:3000/styles/style.css
client.js?59ff:69debug: [react-server.core.util.ClientCssHelper] Stylesheet already loaded (no-op): http://localhost:3001/PokeFight.css
And I'm seeing this in the client payload:
<link rel="stylesheet" type="text/css" media="" href="/styles/style.css" data-react-server-css>
Weird, refreshed again and it went away. Beats me.
Perry Shuman
@Noirbot
Jun 05 2016 00:28
Thanks a lot @gigabo. It's been great working with this so far. You Redfin people are good folks
Bo Borgerson
@gigabo
Jun 05 2016 02:22
That's great to hear! Thanks @Noirbot! :tada:
Jennifer Hwang
@jmhwang7
Jun 05 2016 03:54
@Noirbot whoa, Perry! You're in here? So psyched to see you checking react server out! :smile:
Perry Shuman
@Noirbot
Jun 05 2016 14:07
Oh, hey! Good to see you too @jmhwang7
Perry Shuman
@Noirbot
Jun 05 2016 17:37
Fancy meeting you here :P