LIGHT

  • News
  • Docs
  • Community
  • Reddit
  • GitHub
Star

Full Stack Developer

In the previous View React UI developer tutorial, we have described how to deploy the dev.lightapi.net and dev.signin.lightapi.net on the test cloud to support UI developers to leverage all services in the cloud without installing anything locally. It is very convenient for UI developers because they only need to start the Nodejs server to develop locally with hot reload, and all the OAuth 2.0 authorization code flow interactions with backend services are handled already. What if we want to debug the interaction with the light-oauth2 from the UI, or we want to update the backend services and test them from the UI. For a full-stack developer, he/she needs to get everything deployed on the local desktop or laptop so that he/she can even work without Internet access.

In this tutorial, we are going to show users how to deploy the light-oauth2, light-portal, and light-router locally to allow the React app to access backend in debug mode. For me, this is a typical setup on my desktop computer.

Environment

We are going to use the following two domains for the light-portal virtual host. These are used on the test cloud, but we can update the /etc/hosts to simulate the local DNS.

192.168.1.144   dev.lightapi.net dev.signin.lightapi.net dev.oauth.lightapi.net

We are going to use Consul for service discovery. To start the Consul Docker container, use the following commands.

cd ~/networknt/light-docker
docker-compose -f docker-compose-consul.yml up -d

You can access the Consul UI from the browser at http://localhost:8500/ to check all the registered services after starting the light-oauth2 and light-portal services.

With Consul up and running, we can start the light-oauth2 services with the following commands.

cd ~/networknt/light-config-test/light-oauth2/local-consul
docker-compose up -d

Now we can start the hybrid-command and hybrid-query servers in debug mode in IDE to test/debug the interactions with the UI. For details, please refer to debug-both-servers.

With all backend services started, we need to start the light-router instance to serve the virtual hosts and proxy the calls to the backend services.

cd ~/networknt/light-config-test/light-router/local-portal
docker-compose up -d

The light-portal router is listening to 8443 and we need to redirect 443 to 8443 with iptables.

sudo iptables -t nat -A OUTPUT -p tcp --dport 443 -o lo -j REDIRECT --to-port 8443

React UI

Start the portal view application in HTTPS.

cd ~/networknt/light-portal/view
yarn startHttps
  • About Light
    • Overview
    • Testimonials
    • What is Light
    • Features
    • Principles
    • Benefits
    • Roadmap
    • Community
    • Articles
    • Videos
    • License
    • Why Light Platform
  • Getting Started
    • Get Started Overview
    • Environment
    • Light Codegen Tool
    • Light Rest 4j
    • Light Tram 4j
    • Light Graphql 4j
    • Light Hybrid 4j
    • Light Eventuate 4j
    • Light Oauth2
    • Light Portal Service
    • Light Proxy Server
    • Light Router Server
    • Light Config Server
    • Light Saga 4j
    • Light Session 4j
    • Webserver
    • Websocket
    • Spring Boot Servlet
  • Architecture
    • Architecture Overview
    • API Category
    • API Gateway
    • Architecture Patterns
    • CQRS
    • Eco System
    • Event Sourcing
    • Fail Fast vs Fail Slow
    • Integration Patterns
    • JavaEE declining
    • Key Distribution
    • Microservices Architecture
    • Microservices Monitoring
    • Microservices Security
    • Microservices Traceability
    • Modular Monolith
    • Platform Ecosystem
    • Plugin Architecture
    • Scalability and Performance
    • Serverless
    • Service Collaboration
    • Service Mesh
    • SOA
    • Spring is bloated
    • Stages of API Adoption
    • Transaction Management
    • Microservices Cross-cutting Concerns Options
    • Service Mesh Plus
    • Service Discovery
  • Design
    • Design Overview
    • Design First vs Code First
    • Desgin Pattern
    • Service Evolution
    • Consumer Contract and Consumer Driven Contract
    • Handling Partial Failure
    • Idempotency
    • Server Life Cycle
    • Environment Segregation
    • Database
    • Decomposition Patterns
    • Http2
    • Test Driven
    • Multi-Tenancy
    • Why check token expiration
    • WebServices to Microservices
  • Cross-Cutting Concerns
    • Concerns Overview
  • API Styles
    • Light-4j for absolute performance
    • Style Overview
    • Distributed session on IMDG
    • Hybrid Serverless Modularized Monolithic
    • Kafka - Event Sourcing and CQRS
    • REST - Representational state transfer
    • Web Server with Light
    • Websocket with Light
    • Spring Boot Integration
    • Single Page Application
    • GraphQL - A query language for your API
    • Light IBM MQ
    • Light AWS Lambda
    • Chaos Monkey
  • Infrastructure Services
    • Service Overview
    • Light Proxy
    • Light Mesh
    • Light Router
    • Light Portal
    • Messaging Infrastructure
    • Centralized Logging
    • COVID-19
    • Light OAuth2
    • Metrics and Alerts
    • Config Server
    • Tokenization
    • Light Controller
  • Tool Chain
    • Tool Chain Overview
  • Utility Library
  • Service Consumer
    • Service Consumer
  • Development
    • Development Overview
  • Deployment
    • Deployment Overview
    • Frontend Backend
    • Linux Service
    • Windows Service
    • Install Eventuate on Windows
    • Secure API
    • Client vs light-router
    • Memory Limit
    • Deploy to Kubernetes
  • Benchmark
    • Benchmark Overview
  • Tutorial
    • Tutorial Overview
  • Troubleshooting
    • Troubleshoot
  • FAQ
    • FAQ Overview
  • Milestones
  • Contribute
    • Contribute to Light
    • Development
    • Documentation
    • Example
    • Tutorial
“Full Stack Developer” was last updated: July 5, 2021: fixes #275 checked and corrected grammar/spelling for majority of pages (#276) (b3bbb7b)
Improve this page
  • News
  • Docs
  • Community
  • Reddit
  • GitHub
  • About Light
  • Getting Started
  • Architecture
  • Design
  • Cross-Cutting Concerns
  • API Styles
  • Infrastructure Services
  • Tool Chain
  • Utility Library
  • Service Consumer
  • Development
  • Deployment
  • Benchmark
  • Tutorial
  • Troubleshooting
  • FAQ
  • Milestones
  • Contribute