DEV Community

Navdeep Singh
Navdeep Singh

Posted on • Updated on

Reactjs with Laravel or Lumen or Express

Alt Text

I love today’s world web technologies and thanks to various cloud platforms that allow developers to deploy their application to test and showcase, we can use any combination as per our need. Recently, I got the chance to get hands on experience in using Reactjs Library in setting up SPA and Full Stack Applications. I used Reactjs in different combinations. Hope it will give an overview to newbies.

Reactjs and Lumen Application
Reactjs and Laravel Application
Reactjs and Express Application

Reactjs and Lumen Application

Demo: https://master.d30av2lsib94wx.amplifyapp.com/
Email: admin@falcon-agency.com
Password: test123

For this I used separate folders to differentiate between front end and back end (api calls). Front end is developed using Reactjs and can be deployed in AWS Amplify ( I recommend ), or you have other options like Heroku, Netlify, Zeit and can deploy in EC2 instance of AWS. It’s truly depends on personal choice and available resources.

I love the option of Auto-deploy of application on Cloud, It auto push and deploy your changes when you git push your changes on linked git repository.

Backend application developed is basically to get API calls (REST), yet not tried GraphQL but will try it soon and its developed in slim and light php framework Lumen which is mini version of Laravel. I liked it as it provides php artisan to create containers, models, views, service providers and many many things using CLI.

This combination is best when you want separate codebase and deployment for frontend and backend.

Reactjs and Laravel Application

Demo: NA to share

This is the official project. In this case I used Laravel 5.8 as full fledged code base, by default Laravel use Blade as templating engine. But with some tweaks and alteration in code we can use Reactjs as template engine. You can use Vuejs too, as Laravel officially support Vuejs. Again it’s up-to your personal choice.

I used Admin Panel login authorization and created CMS using Laravel and for Routing Reactjs routes used separate route.

This combination is best when you are fan 🤩 of Laravel and want to use Reactjs as front end.

Reactjs and Express Application

Demo: http://falcon-digital.co/future-of-travel

This website I created for my company’s new venture which is static website but need form validation and submission to mailchimp. Again I want to use Reactjs, so to handle server side stuff rather to use php I used Nodejs.

Before :

  1. Create HTML pages for static pages.
  2. Create php page for server side render or handling.
  3. Use jQuery to handle client side form submission.

After :

  1. Create Pages in Reactjs
  2. As Reactjs installed over nodejs, so nodejs is being used to handle server side stuff.
  3. Reactjs to handle form submission itself.

This combination is best when you have small application which need server intervention too.

Detail Setup Explained: https://dev.to/navdeepsingh/basic-ern-stack-application-setup-3gdp

Oldest comments (8)

Collapse
 
abelmiraval profile image
abelmiraval

Not login

Collapse
 
navdeepsingh profile image
Navdeep Singh

Ahh sorry. Please try with revised credentials:
Demo: master.d30av2lsib94wx.amplifyapp.com/
Email: admin@falcon-agency.com
Password: test123

Lemme know if you still got any issue?

Collapse
 
abelmiraval profile image
abelmiraval

Hi, Can Lumen be integrated with Stripe?

Thread Thread
 
navdeepsingh profile image
Navdeep Singh

Hi, Yes you can install laravel/cashier and stripe is up and running. However Kumen registers service providers a bit different but rest it mostly same. So try that.

Thread Thread
 
abelmiraval profile image
abelmiraval

Great! I'm from Peru, Where can I get in touch with you?

Thread Thread
 
navdeepsingh profile image
Navdeep Singh

Wow, Nice to meet you, The land of Machu Picchu.
twitter.com/nswebstudio

Thread Thread
 
abelmiraval profile image
abelmiraval

Nice to meet you, If one day you think of coming here I am here to serve you

Collapse
 
sedemquame profile image
Sedem Quame

This site can not be reached.