Getting React working is real hard

[elli...@gmail.com]

Hi all,

I'm trying to integrate React (and Flux) with Phoenix's Brunch pipeline and I'm having a lot of trouble, mostly because I've not been a frontend developer for years now.

React is or requires NPM packages which don't sit well in a browser, and hooking in browserify is beyond my ability.

There's this experimental app: https://github.com/fxg42/phoenix-flux-react/ but it's getting on a bit and uses a) an old version of Phoenix and b) a different package manager.

I've been working on a throwaway chat project as a test bed, so the best I've got to looks like this: https://github.com/SmartCasual/chat-test/tree/wip

Any advice on how to fix this up?

Regards,
Elliot

[Chris McCord]

See  https://github.com/ericmj/gaze
For an example of Phoenix, brunch, react 

--
You received this message because you are subscribed to the Google Groups "phoenix-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phoenix-talk...@googlegroups.com.
To post to this group, send email to phoeni...@googlegroups.com.
Visit this group at http://groups.google.com/group/phoenix-talk.
To view this discussion on the web visit https://groups.google.com/d/msgid/phoenix-talk/8eba4f31-d5e1-4118-b5ee-07d410d86579%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Flávio Alves Granato]

https://github.com/elpassion/sprint-poker

> --
> You received this message because you are subscribed to the Google
> Groups "phoenix-talk" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to phoenix-talk...@googlegroups.com

> <mailto:phoenix-talk...@googlegroups.com>.

> To post to this group, send email to phoeni...@googlegroups.com

> <mailto:phoeni...@googlegroups.com>.

> Visit this group at http://groups.google.com/group/phoenix-talk.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/phoenix-talk/8eba4f31-d5e1-4118-b5ee-07d410d86579%40googlegroups.com

> <https://groups.google.com/d/msgid/phoenix-talk/8eba4f31-d5e1-4118-b5ee-07d410d86579%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Elliot Crosby-McCullough]

On 6 November 2015 at 19:20, Chris McCord <ch...@chrismccord.com> wrote:

See  https://github.com/ericmj/gaze
For an example of Phoenix, brunch, react 

This seems to use bower as well, but I can't tell why that's necessary. 

[Chris Keathley]

Elliot, bower is just used to pull in your dependencies and works with brunch out of the box. Brunch currently doesn't support loading npm modules (although there is an open issue about that).

IMO if you're working with React then you might consider replacing Brunch with Webpack. Its a very straightforward replacement and is documented in the phoenix guides here: http://www.phoenixframework.org/docs/static-assets#section-phoenix-without-brunch. If you want to see what an example webpack config you can checkout the elixirfriends repo: https://github.com/knewter/elixir_friends.

[Elliot Crosby-McCullough]

Hi Chris,

Combining the static assets doc and a webpack-and-react guide (plus a bunch of other learning) I managed to get up to speed.

The thing I'm caught on now is that the config mentioned in that phoenix guide doesn't do anything with images or CSS now we've removed brunch.

The webpack docs are also very JS focused, with the exception of this which just seems gross: http://webpack.github.io/docs/stylesheets.html

[Elliot Crosby-McCullough]

Nevermind, I got there: https://github.com/SmartCasual/chat-test/commit/04e37ca3ad2f982d0d42b287b04ec30ecb298510

[Imran Ismail]

I had the same problem... If you're interested, you can give this https://github.com/imranismail/phoenix_webpack generator a go. The same phoenix generator but with Webpack instead of Brunch, you can take a look at the config here https://github.com/imranismail/phoenix_webpack/blob/develop/templates/static/webpack/webpack.config.js

[Dominic Stockdale]

Thanks for this! It's exactly what I was looking for just when I needed it. I was about to ask almost the same question.

- d

--

Dominic Stockdale

dom.st...@gmail.com

cambodia: +855 (0)93696546

skype: dom.stockdale

¸.·´¯`·.´¯`·.¸¸.·´`·.¸¸.><{{{*>

--
You received this message because you are subscribed to the Google Groups "phoenix-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phoenix-talk...@googlegroups.com.
To post to this group, send email to phoeni...@googlegroups.com.

Visit this group at https://groups.google.com/group/phoenix-talk.
To view this discussion on the web visit https://groups.google.com/d/msgid/phoenix-talk/efae2770-e6f1-45c3-92b0-5d8016ee67f8%40googlegroups.com.

[Chris Keathley]

Glad that you got it all working!

If you're interested I have an example app that includes the latest react, redux, webpack, style loading, image loading as well as redux+webpack hot reloading, devtools and errors: https://github.com/keathley/conflicted. I'm planning on writing a blogpost on putting it all together but you can probably get the gist just by looking over the repo.

[Elliot Crosby-McCullough]

Yeah, quite interested.  Right now I'm getting on with actually making the app, but when it comes to the cleanup phase having a solid example / blog post to refer to will be very helpful.  Let me know when you've got it posted :)

--
You received this message because you are subscribed to a topic in the Google Groups "phoenix-talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phoenix-talk/WKRuHwvGnWg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phoenix-talk...@googlegroups.com.

To post to this group, send email to phoeni...@googlegroups.com.
Visit this group at https://groups.google.com/group/phoenix-talk.

To view this discussion on the web visit https://groups.google.com/d/msgid/phoenix-talk/9c7cb119-0d4e-4219-bac6-00105405e2c6%40googlegroups.com.

[Chris McCord]

Brunch 2.1.1 has vastly improved npm support, and now for react support should you be able to do:

$ npm install react --save

`import React from "react"`

and you are done! :)

The next minor version of phoenix will ship with Brunch 2.1.1. In the meantime, you can update your package.json:

{

  "repository": {

  },

  "dependencies": {

    "babel-brunch": "paulmillr/babel-brunch#5c841fcacbd50e06bce6f67571a23619c11940fe",

    "brunch": "^2.1.1",

    "clean-css-brunch": ">= 1.0 < 1.8",

    "css-brunch": ">= 1.0 < 1.8",

    "javascript-brunch": ">= 1.0 < 1.8",

    "uglify-js-brunch": ">= 1.0 < 1.8"

  }

}

To unsubscribe from this group and all its topics, send an email to phoenix-talk+unsubscribe@googlegroups.com.

To post to this group, send email to phoeni...@googlegroups.com.
Visit this group at https://groups.google.com/group/phoenix-talk.