4 ms·

Ask HN: What is a good React stack?

12 points by CraftThatBlock 10y ago

I've been trying to do this for a while, but can't find anything 'official' for this. My goal is to have a React front-end with a RESTful-style backend, with user auth. What do you recommend using? React + auth is my biggest issue

cpg1111 10y ago
Well fullstack Javascript is pretty common, you can use express or Koa, and passport works well for auth. Really you could use any backend and be just fine, whether it's Python, Ruby, Go, Elixir, etc. Burger (BGR) stack is popping up lately too http://go-talks.appspot.com/github.com/gophercon/2016-talks/BenJohnson-TheBurgerStack/main.slide#1 http://go-talks.appspot.com/github.com/gophercon/2016-talks/.... Additionally things like Redux and Relay make it very nice to communicate between React and your backend. Otherwise, just speaking ajax to the backend works.
- CraftThatBlock 10y ago
  To get started on all of this, is there any boiler plates with auth built-in to take a look instead of reimplementing everything from the base up?
  - mooshe 10y ago
    You could use something like Django as an API for React to hit. It has user auth, and if you use django-rest-framework it works flawlessly with React/webpack
  - xackpot 10y ago
    Are you open to using parse-server? It has good auth API's built in.
CuriouslyC 10y ago
In terms of front-end, definitely go Redux. If I can toot my own horn, I suggest React/Redux/Radical (http://www.nathan-rice.net/projects/radical/ http://www.nathan-rice.net/projects/radical/ ); it greatly simplifies working with Redux. I also suggest Typescript, you're already going to be on the hook with Webpack, you might as well take the small extra step and get a much better development experience. As for a back-end, Postgrest is absolutely amazing. There are examples of how to implement auth with Postgrest on the official site. If you implement your application logic as stored procedures in the database, you don't need Flask/Django/etc at all.
- ruler88 10y ago
  the link isn't working :(
  - CuriouslyC 10y ago
    Thanks for the heads up. Fixed.
- jcroll 10y ago
  How would you send an email when an event occurs (e.g. user registration) if your only backend logic is stored procedures?
  - ruslan_talpa 10y ago
    The basic idea is that in db you generate events (lots of ways) and a custom script listens and reacts (sends the email) This page can give you an idea http://postgrest.com/examples/users/ http://postgrest.com/examples/users/ (somewhere in the middle of the article) But also note that there are tons of ways to extend the functionality of PostgreSQL. Here is a stackoverflow answer about this also http://stackoverflow.com/questions/12002662/how-can-i-send-email-from-postgresql-trigger http://stackoverflow.com/questions/12002662/how-can-i-send-e... it is even possible to do it directly in the db (but not recommended) http://brandolabs.com/pgmail http://brandolabs.com/pgmail
    - jcroll 10y ago
      Right, then you still need a script listening to the event omitted from Posgrest. And if the scripts you are building are anything less than trivial it seems to me you are right back to Flask/Django/etc at all.
      - ruslan_talpa 10y ago
        are you saying you need a framework to send an email or that somehow that script is not trivial? Maybe you are saying that it's not just email, you have to interact with some other services ... ok so it's a bit more complex and you go for a framework to handle that but your problem/task has just been reduced from building a complete REST api to reacting to a handful of events and taking appropriate actions. Postgrest is an executable that you start and you have an api right that second, it's not like it's another framework that you need to code against.
andrewhayter 10y ago
https://github.com/sahat/hackathon-starter https://github.com/sahat/hackathon-starter https://github.com/jaredpalmer/react-production-starter https://github.com/jaredpalmer/react-production-starter
patrickgordon 10y ago
I used this starter kit (v2.0.0-alpha3): https://github.com/davezuko/react-redux-starter-kit https://github.com/davezuko/react-redux-starter-kit I paired it with a Rails API backend. Auth handled by Auth0 and use JWT to communicate between back and front (soon to be fronts as I will be adding in an app).
rtcoms 10y ago
Anyone here used MobX (https://github.com/mobxjs/mobx https://github.com/mobxjs/mobx) ? Would like to know about pros and cons compared to redux . I haven't used any of those but would like to know about them before I start using any of those.
- arisAlexis 10y ago
  Mobx makes many tasks much easier and pragmatic. Redux is more on rhe immutable no side-effects site but will need more boilerplate for even small things.
arisAlexis 10y ago
I found here the best combination. I am not using redux. https://github.com/coryhouse/react-slingshot https://github.com/coryhouse/react-slingshot
steve_taylor 10y ago
I use container components at the appropriate levels in the hierarchy in a similar way to Flux stores, managing their state using React's own state management, exposing the state via context (to avoid excessive property passing). I implement actions as functions in the container components which I also expose via context. So far, I've found it to be simple and effective. I use page.js for routing and superagent for web service calls.
hungvo 10y ago
Read this article for your answer https://blog.designveloper.comhttps://blog.designveloper.com/2016/06/21/react-structure-container-component-in-meteor/ https://blog.designveloper.comhttps://blog.designveloper.com...
AlexOrtiz201 10y ago
Just going to put this here, https://medium.com/javascript-scene/passwordless-authentication-with-react-and-auth0-c4cb003c7cde#.o92147ko1 https://medium.com/javascript-scene/passwordless-authenticat...
ruslan_talpa 10y ago
If you are going with React I suggest you go all in, i.e. React + Relay + GraphQL. In FB words "While each of these technologies — React, Relay, and GraphQL — are powerful on their own, the combination is a UI platform that allows us to move fast and ship high-quality apps at scale" The tricky part is the GraphQL/backend server. You can roll your sleeves and do it yourself starting form this https://github.com/graphql/graphql-js https://github.com/graphql/graphql-js Might also try https://github.com/calebmer/postgraphql https://github.com/calebmer/postgraphql (PostgREST inspired, open source but no auth and has N+1 problem) I am also working on a tool/platform that you might be interested for the backend (in beta). It is based on OpenResty/PostgREST/PostgreSQL and it will give you a REST and GraphQL (Relay compatible) backend with very little work. http://graphqlapi.com/ http://graphqlapi.com/ https://github.com/ruslantalpa/sub0_sample_app https://github.com/ruslantalpa/sub0_sample_app

cpg1111 10y ago

Well fullstack Javascript is pretty common, you can use express or Koa, and passport works well for auth. Really you could use any backend and be just fine, whether it's Python, Ruby, Go, Elixir, etc. Burger (BGR) stack is popping up lately too http://go-talks.appspot.com/github.com/gophercon/2016-talks/BenJohnson-TheBurgerStack/main.slide#1 http://go-talks.appspot.com/github.com/gophercon/2016-talks/.... Additionally things like Redux and Relay make it very nice to communicate between React and your backend. Otherwise, just speaking ajax to the backend works.

CraftThatBlock 10y ago
To get started on all of this, is there any boiler plates with auth built-in to take a look instead of reimplementing everything from the base up?
- mooshe 10y ago
  You could use something like Django as an API for React to hit. It has user auth, and if you use django-rest-framework it works flawlessly with React/webpack
- xackpot 10y ago
  Are you open to using parse-server? It has good auth API's built in.

CuriouslyC 10y ago

In terms of front-end, definitely go Redux. If I can toot my own horn, I suggest React/Redux/Radical (http://www.nathan-rice.net/projects/radical/ http://www.nathan-rice.net/projects/radical/ ); it greatly simplifies working with Redux. I also suggest Typescript, you're already going to be on the hook with Webpack, you might as well take the small extra step and get a much better development experience. As for a back-end, Postgrest is absolutely amazing. There are examples of how to implement auth with Postgrest on the official site. If you implement your application logic as stored procedures in the database, you don't need Flask/Django/etc at all.

ruler88 10y ago
the link isn't working :(
- CuriouslyC 10y ago
  Thanks for the heads up. Fixed.
jcroll 10y ago
How would you send an email when an event occurs (e.g. user registration) if your only backend logic is stored procedures?
- ruslan_talpa 10y ago
  The basic idea is that in db you generate events (lots of ways) and a custom script listens and reacts (sends the email) This page can give you an idea http://postgrest.com/examples/users/ http://postgrest.com/examples/users/ (somewhere in the middle of the article) But also note that there are tons of ways to extend the functionality of PostgreSQL. Here is a stackoverflow answer about this also http://stackoverflow.com/questions/12002662/how-can-i-send-email-from-postgresql-trigger http://stackoverflow.com/questions/12002662/how-can-i-send-e... it is even possible to do it directly in the db (but not recommended) http://brandolabs.com/pgmail http://brandolabs.com/pgmail
  - jcroll 10y ago
    Right, then you still need a script listening to the event omitted from Posgrest. And if the scripts you are building are anything less than trivial it seems to me you are right back to Flask/Django/etc at all.
    - ruslan_talpa 10y ago
      are you saying you need a framework to send an email or that somehow that script is not trivial? Maybe you are saying that it's not just email, you have to interact with some other services ... ok so it's a bit more complex and you go for a framework to handle that but your problem/task has just been reduced from building a complete REST api to reacting to a handful of events and taking appropriate actions. Postgrest is an executable that you start and you have an api right that second, it's not like it's another framework that you need to code against.

andrewhayter 10y ago

https://github.com/sahat/hackathon-starter https://github.com/sahat/hackathon-starter https://github.com/jaredpalmer/react-production-starter https://github.com/jaredpalmer/react-production-starter

patrickgordon 10y ago

I used this starter kit (v2.0.0-alpha3): https://github.com/davezuko/react-redux-starter-kit https://github.com/davezuko/react-redux-starter-kit I paired it with a Rails API backend. Auth handled by Auth0 and use JWT to communicate between back and front (soon to be fronts as I will be adding in an app).

rtcoms 10y ago

Anyone here used MobX (https://github.com/mobxjs/mobx https://github.com/mobxjs/mobx) ? Would like to know about pros and cons compared to redux . I haven't used any of those but would like to know about them before I start using any of those.

arisAlexis 10y ago
Mobx makes many tasks much easier and pragmatic. Redux is more on rhe immutable no side-effects site but will need more boilerplate for even small things.

arisAlexis 10y ago

I found here the best combination. I am not using redux. https://github.com/coryhouse/react-slingshot https://github.com/coryhouse/react-slingshot

steve_taylor 10y ago

I use container components at the appropriate levels in the hierarchy in a similar way to Flux stores, managing their state using React's own state management, exposing the state via context (to avoid excessive property passing). I implement actions as functions in the container components which I also expose via context. So far, I've found it to be simple and effective. I use page.js for routing and superagent for web service calls.

hungvo 10y ago

Read this article for your answer https://blog.designveloper.comhttps://blog.designveloper.com/2016/06/21/react-structure-container-component-in-meteor/ https://blog.designveloper.comhttps://blog.designveloper.com...

AlexOrtiz201 10y ago

Just going to put this here, https://medium.com/javascript-scene/passwordless-authentication-with-react-and-auth0-c4cb003c7cde#.o92147ko1 https://medium.com/javascript-scene/passwordless-authenticat...

ruslan_talpa 10y ago

If you are going with React I suggest you go all in, i.e. React + Relay + GraphQL. In FB words "While each of these technologies — React, Relay, and GraphQL — are powerful on their own, the combination is a UI platform that allows us to move fast and ship high-quality apps at scale" The tricky part is the GraphQL/backend server. You can roll your sleeves and do it yourself starting form this https://github.com/graphql/graphql-js https://github.com/graphql/graphql-js Might also try https://github.com/calebmer/postgraphql https://github.com/calebmer/postgraphql (PostgREST inspired, open source but no auth and has N+1 problem) I am also working on a tool/platform that you might be interested for the backend (in beta). It is based on OpenResty/PostgREST/PostgreSQL and it will give you a REST and GraphQL (Relay compatible) backend with very little work. http://graphqlapi.com/ http://graphqlapi.com/ https://github.com/ruslantalpa/sub0_sample_app https://github.com/ruslantalpa/sub0_sample_app