Lagom as backend + React Redux as a front end

[dheerajk]

First thing first: I am very beginner to scala, play and lagom.

What i am trying to build is a system which has front-end implementation in React+Redux and for backend i want to use lagom framework.
I have seen that every lagom project has front-end module in it. What i want is: I don't want to put React+Redux app as a part of backend repo.
Front end repo will be completely in different place and will have its own processes for CI\CD.

I don't want to close coupled my front end app in back end app.

So let's say i don't have front end app in lagom project even after that do we really need front-end module as a part of my lagom project? Can i simply delete it?
For what exactly we need front-end?

In such scenario how we can handle CORS issue? And how the routes are defined?

[Fabrice Sznajderman]

Hi Dheerajk,

I will try to anwser to all your question. 

Lagom come with the possibility to have a service (based on PlayFramework) that can served the front end part, but this is not mandatory. 

This service can be used to expose an Rest API (for example) that can be consumed by other client as your React+Redux app. In this way the service, will work as gateway for your business service ( akka microservice). 

Also, Lagom is fundamently based on CQRS / Event Sourcing approach and micro service oriented. If you are newbie in those areas, I advice to you to learn about thoses subjects before to dive into Lagom.

Lagom is a wonderful framework that ease the way of implementing system based on CQRS / Event Sourcing. But definitely Lagom provides you a technical stack. The real difficulty is to do the best design (linked with your business) that fit this approach. 

Without a good design Lagom will become a nightmare for you and your project. I am really fan of this framework (and I using it on my professional project)  but it require a kind knowledge to use it in the right way.

I don't want to discourage you to used it, but just warn you because you told that your are a very beginner with Lagom / Scala and I suppose, may be, with CQRS/Event sourcing.

i hope it will  help you

kind regards

[Greg Methvin]

The point of the frontend app in the examples is to show how you would use a traditional Play application along with Lagom microservices. There's no requirement that you do that. You could expose an API to your frontend through Lagom or through another Play service that acts as a REST API.

If you are new to these things and want to start out with something simple, you could start out with a regular Play app. Lagom is basically a layer on top of Play and Akka Persistence, so you can use existing Play and Akka modules with Lagom too. It's mainly a question of whether you value the service API abstractions Lagom provides and the opinionated CQRS/ES-oriented approach.

--
You received this message because you are subscribed to the Google Groups "Lagom Framework Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lagom-framework+unsubscribe@googlegroups.com.
To post to this group, send email to lagom-framework@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/lagom-framework/693bd885-64ad-4686-b9b9-a0ba014bef8d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Greg Methvin

Tech Lead - Play Framework

Lightbend, Inc.

[dheerajk]

Hello all,

Fabrice, Thank you very much for your opinion.

I totally agree with you that if we don't place right things in right place on right time then it would be a nightmare for me and my project.

We have to design it properly and use existing tools wisely.

I agree I am new to this tech stack and I have to learn a lot of things before I write a single line of code but please understand my situation here, I have to start somewhere even I know I might fail I have to start.

I might do wrong things but I am ready to put my efforts to correct/refactor it.

I am not new to the functional programming languages I worked on Clojure before. So Scala is not my problem right now. I have also worked on similar stack.
We are in a very beginning phase of the project and we think Lagom suits the most for our business requirement.

So anyways I have to work it out. :)

Here before what I have implemented is a simple React+Redux based login page and an auth API implementation using Lagom inside front-end module for now (which should be another module).

UI app runs on 3000 port and backend is at 9000 port.

When I hit the API for the first time it gave me 415 (Unsupported Media Type) so I added a content-type header with values application/jsoen.

But when I hit this POST API using ajax it automatically makes a method type OPTION instead of POST (which is a preflight request and might be because of cors). A simple GET requests works.

So I came to the point that I have to allow origin. But where? Backend Lagom side or on Nginx. As I mentioned before my UI code will not be part of front-end module and will be served from Nginx (For local development I am using webpack server).

I guess we can resolve this thing by allowing origin at backend or we can use proxying to the backend from frontend server (Nginx)
In my case, I am going to choose the second option. The reason behind this is I can put front-end app in public subnet and backend in private subnet which becomes more secure. So Nginx is the only one who can have access to these services.
It is easy to add proxy inside Nginx for production but right now we are in development and we are using either of webpack-dev-server, express or browser-sync.

So I will find a better option for development. And will post here the solution.

Till now I have found following useful links:
https://enable-cors.org/
https://stackoverflow.com/questions/39807666/different-ports-for-frontend-and-backend-how-to-make-a-request
https://groups.google.com/forum/#!msg/lagom-framework/dtYN_1Ds4SQ/gT-BGPuCAQAJ
https://github.com/jroper/online-auction-scala/commit/e7fbf865bf6ada961cbe30715b41448c324cbaf2
https://groups.google.com/forum/#!searchin/lagom-framework/cors|sort:date/lagom-framework/7YZccqRUS4g/EOQUprXrAQAJ

Thanks, Greg. I totally understood we can remove front-end module and use it as a common gateway. And also I have to learn more about CQRS/ES-oriented approach.

It would be very helpful if you guys give me some links for architectural design or some well define GitHub projects link.

Thank you again!

DheerajK

To unsubscribe from this group and stop receiving emails from it, send an email to lagom-framewo...@googlegroups.com.
To post to this group, send email to lagom-f...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/lagom-framework/693bd885-64ad-4686-b9b9-a0ba014bef8d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Tim Moore]

I'll just clarify one point: although Lagom obviously provides a persistence framework based on Event Sourcing and CQRS, it is by no means mandatory.

Several Lagom users are happy using it just for the service API with stateless services or services using an alternative persistence implementation.

However it is totally fair to say that a microservices architecture in general is a fundamentally different approach than a lot of people might be used to, and it might take some adjustment. It is absolutely possible and recommended to take things one small step at a time.

The Lagom maintainers are of course happy to provide advice here on this list... and we appreciate the perspectives that other people share here as well! :)

Best,

Tim

--
You received this message because you are subscribed to the Google Groups "Lagom Framework Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to lagom-framework+unsubscribe@googlegroups.com.
To post to this group, send email to lagom-framework@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/lagom-framework/693bd885-64ad-4686-b9b9-a0ba014bef8d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Tim Moore

Lagom Tech Lead, Lightbend, Inc.

tim....@lightbend.com
+61 420 981 589
Skype: timothy.m.moore

[Tim Moore]

DheerajK,

Here's an example of how to enable CORS in a Lagom service: https://github.com/lagom/lagom-recipes/tree/master/cors/cors-scala

I agree, though, that it is probably better to handle this by using a reverse proxy in front of all of your services, so that it exposes a single origin to clients and hides the back-end implementation details.

This is exactly what Lagom's development mode service gateway was built to simulate: it runs on port :9000 and forwards requests to each of your services. Right now, it isn't that easy to make it forward to servers that aren't part of your Lagom build, but it is possible to do if you take advantage of some undocumented implementation details :)

The trick is to register your UI server with the service registry, which is itself implemented as a Lagom service: https://github.com/lagom/lagom/blob/master/dev/service-registry/devmode-scaladsl/src/main/scala/com/lightbend/lagom/internal/scaladsl/registry/ServiceRegistry.scala

When you "runAll" you can interact with the service registry on localhost:8000 using any HTTP client (curl or Postman are good options):

$ curl http://localhost:8000/services

[{"name":"cas_native","url":"tcp://127.0.0.1:4000/cas_native"},{"name":"kafka_native","url":"tcp://localhost:9092/kafka_native"},{"name":"hello","url":"http://0.0.0.0:57797"},{"name":"hello-stream","url":"http://0.0.0.0:58322"}]

That shows all of the services registered by default in a new Lagom project created from the lagom-scala.g8 template (Cassandra, Kafka, and the hello and hello-stream services).

You can register a new service with a PUT request:

$ curl -X PUT -d '{"uri":"http://localhost:3000","acls":[{"pathRegex":"(?!/api/).*"}]}' http://localhost:8000/services/ui

This registers a new service called "ui" at http://localhost:3000 and tells the service gateway to forward all request paths that don't begin with "/api/" to that location.

You can now see that registration if you query the list of services again:

$ curl http://localhost:8000/services

[{"name":"kafka_native","url":"tcp://localhost:9092/kafka_native"},{"name":"ui","url":"http://localhost:3000"},{"name":"hello-stream","url":"http://0.0.0.0:58322"},{"name":"hello","url":"http://0.0.0.0:57797"},{"name":"cas_native","url":"tcp://127.0.0.1:4000/cas_native"}]

Now if you start your UI server on localhost:3000 and go to http://localhost:9000, you should see your front-end application. Any JavaScript code that makes requests to http://localhost:9000/api/* should be forwarded to the appropriate back-end service (assuming that you are using /api/ in the paths you have defined for the back-end services in your project).

These registrations are not persistent, so you'll need to re-register your UI app every time you runAll. Alternatively, you could automate this with a script that calls the registration API whenever you start your UI server.

It would be very convenient if there were a way to declare some extra routes for the service gateway in your build config so that it is registered automatically when you runAll... this would make a great contribution if you're interested in digging into the Lagom code!

Best,

Tim

To unsubscribe from this group and stop receiving emails from it, send an email to lagom-framework+unsubscribe@googlegroups.com.
To post to this group, send email to lagom-framework@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/lagom-framework/b60b6fe2-f0ef-40b3-9955-400f06095c46%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

[dheerajk]

Hi Tim,
I will not give excuses and simply accept my fault for being late. Really sorry for that.

Thank you very much, Tim. The solution you suggested obviously worked as expected. It was a great help to me and my team.
We can register UI app with service gateway and done!

What I monitored is UI app will do start ticking as I see in network tab but that's okay for the development environment and for production we are free to use the reverse proxy.
Thanks,
DheerajK

To view this discussion on the web visit https://groups.google.com/d/msgid/lagom-framework/b60b6fe2-f0ef-40b3-9955-400f06095c46%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.