Home

Awesome

<img src="https://user-images.githubusercontent.com/822159/76695715-1cd40180-6659-11ea-8815-00f0e1d7a209.png" alt="LemonMart" width="36"/> LemonMart

The enterprise-ready Angular template project with REST and GraphQL RBAC pre-configured.

LemonMart was implemented with a Route-first architecture to designing SPAs.

See Changes section for important or breaking changes made to the project.

Angular Version CircleCI Coverage Status DeepScan grade

devs served lemons served <sup>As of August 2023</sup>

lemon-mart-profile

Get the book & watch the talk

LemontMart has been developed to support my book Angular for Enterprise Applications. You can get the book at any major bookstore or find the links at AngularForEnterprise.com.

Watch the talk on Architecture for Scalable Angular Apps on Pluralsight.

Check out the slides for Architecture for Scalable Angular Apps free at Slides.com.

Check out LocalCast Weatherto learn Angular, Material, and RxJS fundamentals using OpenWeatherMap.org APIs at https://github.com/duluca/local-weather-app.

Build, debug, and publish Docker images with npm Scripts for Docker and achieve Blue-Green deployments on AWS Fargate with npm Scripts for AWS.

Router-first Architecture

A router-first architecture to SPA design will save development teams, large and small, significant waste in duplicative work and re-architecting of the code base to enable better collaboration or achieve sub-second first meaningful paints in your application.

In order to pull off a router-first implementation, you need to:

  1. Define user roles and a site map early on,
  2. Design with lazy loading in mind, leveraging router outlets, auxiliary paths, and smart link tracking,
  3. Implement a walking-skeleton navigation experience and validate, allowing multiple teams to execute seamlessly,
  4. Design around major data components, using stateless data-driven components using RxJS/BehaviorSubjects,
  5. Be disciplined in sticking to a decoupled component architecture, allowing remixing the UX quickly to respond to changes in requirements without having to re-architect the codebase,
  6. Differentiate between user controls and components to appropriately use binding, resolve, and auth guards,
  7. With TypeScript classes, interfaces, enums, validators, and pipes to maximize code reuse

Design Artifacts

Head over to the Wiki for user roles, site maps, data entity diagrams, and user mock-ups: https://github.com/duluca/lemon-mart/wiki.

Building Lemon Mart

Authentication

For demonstration purposes, the login screen shows the Authentication Mode of the app. There are three modes:

The current mode can be adjusted in environment.ts. You can see how each mode is implemented in the link source files above.

This is covered in more detail in Angular for Enterprise Applications, 3rd Edition.

Build Configurations

3 build configurations map to authentication modes:

  1. Production:

Executing npm run build:prod or npx ng build --configuration production or npx ng build --configuration=production leverages InMemory authentication. Note that the fake credentials are documented on the Login screen.

  1. Firebase:

Executing npx ng build --configuration=firebase leverages Firebase authentication. For this to work, you must set up your own Firebase back-end and create a user in the Firebase console.

  1. Lemon-Mart-Server:

Executing npx ng build --configuration=lemon-mart-server leverages Custom authentication. This is implemented by the example project Lemon Mart Server, which is detailed below.

Lemon Mart Server

Lemon Mart Server is an easy-to-learn and use TypeScript Node.js server using Minimal MEAN for Lemon Mart.

To run Lemon Mart in a full-stack setup, visit https://github.com/duluca/lemon-mart-server.

Developers

This project is a sample implementation containing numerous recipes and design patterns useful for developing an Angular application.

If you'd like to use this project as a starter or a template project for your project, you can get many benefits from using a pre-configured project. Some of the benefits are:

Pre-requisites

Adapting the template

During Development

Code scaffolding

Further help with Angular CLI

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Full-Stack Setup with Docker Compose and Deploying to AWS

See the example project here https://github.com/duluca/lemon-mart-server

Changes

Changes are inevitable to keep the project up-to-date with libraries, tools, patterns and practices. Below are some notable changes that differ from the 1st, 2nd, and 3rd edition of my book.

Angular 17

Angular 16

Angular 13-15

Angular 12 configuration changes

Renamed master branch to main

If you already have a master branch locally, then execute the following commands:

git branch -m master main
git fetch origin
git branch -u origin/main main
git remote set-head origin -a

Augury