added babel preset react to server's webpack configuration

[jpaulfernandez]

Added babel-preset-react in server's webpack configuration to allow server side rendering of styled-components. The idea is to collect the styles of a react component in the server.js and pass it as a props.

[codecov[bot]]

Codecov Report

Merging #392 into master will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #392   +/-   ##
=======================================
  Coverage   96.04%   96.04%           
=======================================
  Files          19       19           
  Lines         253      253           
  Branches       31       31           
=======================================
  Hits          243      243           
  Misses         10       10

Impacted Files	Coverage Δ
...-utils/oc-webpack/lib/configurator/server/index.js	100% <ø> (ø)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update d8dbec5...1707bf9. Read the comment docs.

[matteofigus]

@jpaulfernandez hi, thanks for your Pull Request! In general, the react template as is today is designed to support CSS modules by default, with some autoprefixer stuff too. One of the goals of templates is to be opinionated so that many people developing OCs can adhere to the opinions of a specific template, or create a new template with different opinions.

I am thinking that perhaps, we could actually create a new template for styled components rather than patching this. So, for instance, create a new oc-template-react-styled template that doesn't have all the css modules stuff. I believe in that way it would be cleaner and more opinionated.

What's your thoughts on that? In case, I can help with the code changes. Also, @mattiaerre @nickbalestra @dipunm?

[jpaulfernandez]

Hi @matteofigus, my goal for this is to allow collection of style in the server.js and pass it as a props on the app.js, with this people who chose to serverside render their opencomponent won't experience delayed styling. But sometimes we want to consume the component on client side also.

I think we can create a new template for people who use css in js (styled-components, emotion.js) though the only difference is I added babel-preset-react in the webpack configuration of server to allow jsx compilation.

[matteofigus]

the only difference is I added babel-preset-react in the webpack configuration of server to allow jsx compilation

Ah, I see, in this case, I think I'm in favour of merging this