Using servant with reactjs

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Using servant with reactjs

Ur. Kr.
I am quite unfamiliar with setting up a server-side for a web-application. I wish to create a react application using some haskell code that I have written, but I'm unsure as to what I have to do to setup a project where reactjs would work with servant. I need a server to serve (hehe) as a simple connector (api-provider?) between the aforementioned haskell code and reactjs, and to maintain a database. 


I hope this was clear enough. Forgive me if the question is trivial, but this is my first foray into this kind of thing, so I'd be very grateful if you'd indulge me. A concrete (minimal) example, or explanation would be great, but I'd also be happy with pointers to things I need to research for the answer to be obvious, or if I should be asking this somewhere else. 

--
Reply | Threaded
Open this post in threaded view
|

Re: Using servant with reactjs

Arian van Putten
Hey Ur,

You can use servant to serve an HTTP API that serialises your haskell data types to JSON automatically.  Then in react you can simply use XHR to request the data (which will be in JSON format).   We also have a package, servant-js, that automatically generates javascript code for all the API endpoints in your API description, but this step isn't mandatory to use.   Communicating with servant is simply the same as communicating with any REST API. so it should work out of the box with React.


If you have a route    "users" :> Capture "id" Int :> Get '[JSON] User .  Then in React you can simply do something like this:


React.createClass({
   getInitialState: function () {  return { user: {} } },
   componentDidMount: function () {
      var self = this;
      // using jQuery here for making easy request. You could also use axios for example
      $.get('http://your-api.com/users/5").then(function(user) {
         self.setState({user: user});
      });
   }
   render: function() {
      return (<div>{this.state.user.name}</div>);
   }
});


On Sat, Mar 5, 2016 at 12:20 AM, Ur. Kr. <[hidden email]> wrote:
I am quite unfamiliar with setting up a server-side for a web-application. I wish to create a react application using some haskell code that I have written, but I'm unsure as to what I have to do to setup a project where reactjs would work with servant. I need a server to serve (hehe) as a simple connector (api-provider?) between the aforementioned haskell code and reactjs, and to maintain a database. 


I hope this was clear enough. Forgive me if the question is trivial, but this is my first foray into this kind of thing, so I'd be very grateful if you'd indulge me. A concrete (minimal) example, or explanation would be great, but I'd also be happy with pointers to things I need to research for the answer to be obvious, or if I should be asking this somewhere else. 

--



--
Groetjes,

Arian

--
Reply | Threaded
Open this post in threaded view
|

Re: Using servant with reactjs

Ur. Kr.
That simple huh? Well that's a pleasant surprise. Thanks for taking the time to explain! 

On Sunday, March 6, 2016 at 10:46:35 AM UTC+1, Arian van Putten wrote:
Hey Ur,

You can use servant to serve an HTTP API that serialises your haskell data types to JSON automatically.  Then in react you can simply use XHR to request the data (which will be in JSON format).   We also have a package, servant-js, that automatically generates javascript code for all the API endpoints in your API description, but this step isn't mandatory to use.   Communicating with servant is simply the same as communicating with any REST API. so it should work out of the box with React.


If you have a route    "users" :> Capture "id" Int :> Get '[JSON] User .  Then in React you can simply do something like this:


React.createClass({
   getInitialState: function () {  return { user: {} } },
   componentDidMount: function () {
      var self = this;
      // using jQuery here for making easy request. You could also use axios for example
      $.get('<a href="http://your-api.com/users/5" target="_blank" rel="nofollow" onmousedown="this.href=&#39;http://www.google.com/url?q\75http%3A%2F%2Fyour-api.com%2Fusers%2F5\46sa\75D\46sntz\0751\46usg\75AFQjCNF6Fs9QhuWVUcQgiyDNEsJK-SnYKg&#39;;return true;" onclick="this.href=&#39;http://www.google.com/url?q\75http%3A%2F%2Fyour-api.com%2Fusers%2F5\46sa\75D\46sntz\0751\46usg\75AFQjCNF6Fs9QhuWVUcQgiyDNEsJK-SnYKg&#39;;return true;">http://your-api.com/users/5").then(function(user) {
         self.setState({user: user});
      });
   }
   render: function() {
      return (<div>{<a href="http://this.state.user.name" target="_blank" rel="nofollow" onmousedown="this.href=&#39;http://www.google.com/url?q\75http%3A%2F%2Fthis.state.user.name\46sa\75D\46sntz\0751\46usg\75AFQjCNHZ0QNdaWRhjLotqjlWSs7VJ1UhIQ&#39;;return true;" onclick="this.href=&#39;http://www.google.com/url?q\75http%3A%2F%2Fthis.state.user.name\46sa\75D\46sntz\0751\46usg\75AFQjCNHZ0QNdaWRhjLotqjlWSs7VJ1UhIQ&#39;;return true;">this.state.user.name}</div>);
   }
});


On Sat, Mar 5, 2016 at 12:20 AM, Ur. Kr. <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="rr_94fDxHgAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">urban....@...> wrote:
I am quite unfamiliar with setting up a server-side for a web-application. I wish to create a react application using some haskell code that I have written, but I'm unsure as to what I have to do to setup a project where reactjs would work with servant. I need a server to serve (hehe) as a simple connector (api-provider?) between the aforementioned haskell code and reactjs, and to maintain a database. 


I hope this was clear enough. Forgive me if the question is trivial, but this is my first foray into this kind of thing, so I'd be very grateful if you'd indulge me. A concrete (minimal) example, or explanation would be great, but I'd also be happy with pointers to things I need to research for the answer to be obvious, or if I should be asking this somewhere else. 

--



--
Groetjes,

Arian

--