Project - PortFolio

This project was generated using Nx.

This is web page is developed in Angular, React, Vue and webComponents. Host application is in Angular and different components are developed in different libraries.

Check the below image for clear picture.

I used Nx monorepo for this mashup. The main application is in Angular and created libraries for Angular, React and Web components. Since Nx is yet to add support for vue components, I created a vue component in host app it self and rendering it after converted into a web component.

Host application (i.e, Angular) is passing data to other components as @Inputs() (to Angular components) or as props (to react and vue).

Images and styles are added in Assets Library which is shared across all libraries and host application.

And this application is hosted in AWS

Folder Structure of this project

Below are our core plugins:

• apps
  • ng
    • Contains the code for host application.
• libs
  • angular-lib
    • Contains all angular components
  • react-lib
    • Contains all react components
  • footer-lib
    • It contains web component
  • assets
    • Folder where all images and styles are present.

Quick Start & Documentation

MonoRepos

A monorepo (mono repository) is a single repository that stores all of your code and assets for every project.

Using a monorepo is important for many reasons. It creates a single source of truth. It makes it easier to share code. It even makes it easier to refactor code.

Click here to know about MonoRepos

Know how to develope monorepos using Nx.

Run Project

Run nx serve ng --port 4400 to run the project and open http://localhost:4400/

ng is the name of host application which i created in Angular. Hence the name is ng.

Build Project

Run nx build ng to build the project.

A /dist folder is created at root folder and deploy this content anywhere.

To see Dep Graph

Run nx dep-graph to view the dependencies of libraries

Few More useful Commands

Create new application in Angular

ng generate @nrwl/angular:application <--App Name-->

Create new application in React

ng generate @nrwl/react:application <--App Name-->

Creating angular library with publishable

npx nx g @nrwl/angular:lib <--Library Name--> --publishable --importPath ng-components

Creating react library with publishable

npx nx g @nrwl/react:lib <--Library Name--> --publishable --importPath react-components

NOTE: We can publish these libraries to npm as an artifact.

Creating Shared Assets Library

nx g @nrwl/web:lib <--Library Name--> —directory=shared

NOTE: Keep all your styles and images in this folder and this can be shared across all liraries and applications.

To remove any library

nx g @nrwl/workspace:remove <--Library Name--> --forceRemove