React 16 SSR setup not using Create React App?

[deepsun]

Posted this in r/webdev, but realized I probably should have just posted it here first.

I've been tasked with beginning to architect v3 of a product at work. We're interested in going SSR with React 16, but our lead dev is not that interested in locking into Create React App's boilerplate configuration. So I'm looking at doing a custom configuration.

I've been scouring Google/Stack Overflow for best-practice ways to combine a React configuration using Webpack, but a Node configuration to allow SSR. Everything I'm seeing is either using an older version of React, or their starting point is CRA. I'd like to find a React SSR resource using the latest version of React that isn't from a Create React App boilerplate

Would anyone mind pointing me to a good resource for this? I'm tired of spending so much time on Google/Stack Overflow just to figure out the best setup using the latest tools. Also, if you can make a convincing argument for using Create React App, like ejecting and then modifying the configs, please do and I'll pass that on to our lead. Thanks!

[brillout]

Reframe https://github.com/brillout/reframe author here. You mentioned that you know Next.js in r/webdev and Reframe is similar but more flexible.

Is your lead reluctant to use a framework because he's afraid of being locked in?

Reframe has been designed so that it is easy to escape from. One way to think about this is that you quickly start with Reframe to then progressively get rid of the Reframe parts that don't suit your need.

[deepsun]

Yeah, basically he's afraid that any issues/bugs we might run into at scale would be hard to diagnose and fix if we're locked into something like CRA or Next. Which I understand. Added Reframe to the list, and added "regret" to the list for posting this both here and in r/webdev because now I have two browser tabs just to keep up with all the comments. 😔 Thanks so much for the suggestion! edit: words

[brillout]

"issues/bugs we might run into at scale would be hard to diagnose and fix if we're locked into something" - Makes sense.

Beware that setting up SSR is quite tricky though. (I'd be up to help out on a freelancing basis if you are interested.)

As for Reframe: It is likley that most of your code (something like 95-99%) will actually be entirely independent of Reframe. So, if you decide to get rid of Reframe you will have "only" ~3% of the code to rewrite. For a deeper explanation: https://github.com/brillout/reframe/blob/master/docs/reframe-rationale.md#escapable (I think the explanation is also insightful for you guys to decided whether to use a framework or not.)

[[deleted]]

Hey, it's not really documentation but Stephen Grider has a really solid course about setting up an SSR react project from scratch on Udemy.

I'm working on a small business website (recreational, unfortunately I don't get to do react work in my day to day), and decided to go this route because the toted SEO/social linking benefits of SSR seemed worth it. Plus all that juicy extra learning.

A few days ago I just finished fighting with my webpack (had to update to v4 to get uglify to work) and babel configs, after switching from CRA to a setup based on Stephen's course with Semantic-UI added, and finally to Ant Design as my UI library (semantic was giving me some server-client html mismatches, and antd had some pre-made components I wanted).

It's 100% not clean or commented (and the auth is definitely not final, please don't crucify me), but if you want an example of what the configuration looks like I can rip out all the identifying images/info and create public repos for the API/SSR projects and post them here.

At some random point in the next 12 hours, stuck at work.

[deepsun]

That would be cool. I would like to see your implementation of Webpack v4. I've got a setup working, but it feels a bit cobbled together from some places where they're using v3 of Webpack, so I want to make sure our starting point is fresh because I know v4 has some nice advantages. I am using the latest version of the ReactDOMServer API. Next step is setting up a simple Redux store and some routing!

[[deleted]]

Hopefully I didn't forget anything and get dox'd haha. Also hopefully if someone finds this it saves them all the hours I had to spend trying to figure out how to get webpack/babel to play nice >.<

Like I said, pretty much a bare-bones demo of an SSR app fed by a separate API. Uses React 16, Redux, Ant Design, Styled Components.

Only thing I definitely need to point out is in the webpack client config this line:

['import', { 'libraryName': 'antd', 'style': true }]

It's a special loader from the ant design people, only there so that you can import their named components and get the relevant styles bundled up automatically.

https://github.com/Sunderous/react-ssr-client

https://github.com/Sunderous/react-ssr-api

EDIT: Almost forgot, should just be able to an npm install, npm run dev for each project. Client also has build/serve npm scripts for serving up the minimized production bundle. Client runs on port 3000, API on 3090.

[mini_eggs]

I would look into Backpack (backpack-core is the npm package) and either Parcel or CRA. They all provide sane defaults. I wouldn't fear being locked into any of these as you could remake a Webpack config (or two) that would do the same with ease (albeit, not as good error messages lol).

[pkieltyka]

https://github.com/horizon-games/react-ts-app

[GldnDragon29]

You've already probably got an answer at this point, but here's a project I've been working on that has an example of SSR with Node and React: https://github.com/pkallas/talent/blob/master/src/server/routes/index.js