Code Monkey home page Code Monkey logo

micro-cosm / micro-client-private-starter Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.24 MB

A quickstart project that quickly/easily bootstraps a testable/deployable/runnable authenticated Angular micro-frontend(a.k.a. miffy) that encourages rapid iteration and supports micro-cms content in the form of GraphQL datasources. Due to our shared common purpose, we are quick to respond to your hackathon team needs... your win IS our win!

Shell 5.69% Dockerfile 0.40% JavaScript 3.30% TypeScript 50.51% HTML 37.79% SCSS 0.22% Sass 2.10%
angular microfrontend microfrontends-demo gcp mife

micro-client-private-starter's Introduction

MicroClientPrivateStarter

A quickstart project that quickly/easily bootstraps a testable/deployable/runnable authenticated Angular micro-frontend(a.k.a. mife) that encourages rapid iteration and supports micro-cms content in the form of GraphQL datasources. Because our of the shared common purpose, we are quick to respond to your hackathon team needs... your win IS our win!

We value your perspective and invite you to participate regardless of skill-level.


Caution: This project is heavily-opinionated with bias towards Nodejs(Typescript)/GoLang/Angular(CLI)/Google(GCP)/Kubernetes.

A few goals of the overarching project:

  • Run the latest lts node implementation
  • Run the latest of angular cli
  • Use ng new <PROJECT NAME> to create a new mife
  • Use @angular/schematics wherever available to install libraries
  • Use @angular/cli best practice and default libraries where conflicts with mife best practices are not present
  • Use the latest library version of the most active project that serves the need
  • All changes must pass 100% of available tests with 90% coverage before they can be accepted
  • Deployable and testable exclusively on GCP infrastructure using tools that optimize as such, and opting for support of other cloud-based infrastructures where practical.
  • Opt first for include and embrace anyone who wishes to participate, without judgement.

This project was initially generated with Angular CLI version 11.2.3 and can be fully reproduced from scratch by cloning micro-client-public-starter and applying the following updates:

Add Authentication: ngx-auth-firebaseui
  1. npm i -s @angular/material @angular/cdk
  2. npm i -s @angular/material @angular/cdk
  3. npm i -s @angular/animations
  4. npm i -s firebase @angular/fire
  5. npm i -s material-design-icons

Due to this bug the schematic that is available for the ngx-auth-firebaseui repo dies in dependency hell. Until the bug is fixed you can recursively copy all subdirectories under node_modules.tmp directly into your node_modules directory and all should be right with the world.


Quickstart

vi .fd.<ROOT_DOMAIN> -- Update the first few variables to meet your needs

typically modify:
    FD_TARGET_LOCAL_PORT    -- the localhost port used for Docker mapping (s/b unique to mife realm and match npm start port))
    FD_NICKNAME             -- the base route for all requests(peferably relevant to service function)
    FD_TARGET_REALM         -- the subdomain that will serve the realm(must end with a dot)(appended to the root domain to form the auth realm)

Search/Replace all instances 'micro-client-private-starter' with your repo name/project root directory name

npm install

pu.sh --local -- You should be up and running locally at the link provided upon completion of deployment with a working Docker demo!

-- OR --

npm run start -- You should be up and running locally in development mode with watchers and hot reload awaiting your development!

Lastly, update this README with your relevant deets.


Todo

  • Re-enable the CMS micro-service to serve arbitrary content from micro-client-public-starter

Angular Boilerplate Docs

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

micro-client-private-starter's People

Contributors

wejafoo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.