Janush

Janush

Quick Overview

Janush is web based application for rapid setup and configure application with predefined sections:

• Security
• AWS integration
• Basic component creation

Technology

We are using serverless services on AWS (Amazon Web Services) and TypeScript in all apects of the project, starting from React frontend, Node.js (AWS Lambda) backend and IaC (Infrastructure as Code) using AWS CDK v2 (Cloud Development Kit).

Requirements

Install Janush CLI

You can install the project directly with the following command:

npm install -g @codeandpepper/janush

The application will be available under the command janush

Local development

Currently, to generate a project, you must first run the npm install command, after that npm run build and finally npm link. After going through these steps you'll be able to generate project in every directory

npm install -g @angular-devkit/schematics-cli

npm install
npm run build
npm link
janush --name=fancy-app --types={web,cloud}

Linking to local npm repositories

It's possible to link a package into your local npm packages by running:

npm run build
npm link

and then easily use it:

janush --name=fancy-app --types={web,cloud}

Above command generated new application inside janush app folder

Steps to run application

• Go to web or cloud folder inside generated application
• execute npm

• run npm start

  • It may happend that npm start will throw error:

  To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

  In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/[userdir]/janush/node_modules/babel-jest is outside your project directory. For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls babel-jest in your project folder. This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

  If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

Error above can be resolve by creating .env file. execute code .env and paste SKIP_PREFLIGHT_CHECK=true then hit save

npm start should automatically open browser with generated application. Otherwise app by default is generated under http://localhost:3000

Loggin and sign up doesn't works by default - some configuration need to be completed AWS Setup

Schematics learning resources

https://tomastrajan.medium.com/total-guide-to-custom-angular-schematics-5c50cf90cdb4

Debug schematics

Run command node --inspect-brk $(which schematics) .:app --name=test123 --debug=false

1. Open chrome://inspect (for Chrome)
2. Click on Open deicated DevTools for Node
3. Debugging panel is accesible

   Test e2e

npm run test

If babel-jest is missing error is generated:

    The react-scripts package provided by Create React App requires a dependency:

    "babel-jest": "^26.6.0"

It may happend that error above is visible. It's indicating that babel is not installed, for fix this problem npm install babel-jest@26.6.0 -g

AWS

Setup AWS for Janush app

Requirements

AWS CLI

CDK

First install AWS CDK v2

Install the AWS CDK

Install the AWS CDK Toolkit globally using the following Node Package Manager command.

npm install -g aws-cdk

Run the following command to verify correct installation and print the version number of the AWS CDK.

cdk --version

Example output: 8.3.1

Command to install aws-cdk

npm i -g aws-cdk

AWS requries configuration and setup, to do this run following command:

Initially you must configure your workstation with your AWS credentials and an AWS region If you have the AWS CLI installed, the easiest way to satisfy this requirement is issue the following command:

aws configure (AWS CLI should be installed globally)

Then:

npm run cdk bootstrap

And finally

npm run cdk deploy

To connect newly generated app, following data need to be update inside

import Amplify, { Auth } from "aws-amplify";

export const AUTH_CONFIG = {
  Auth: {
    identityPoolId: ****************************,
    region: region,
    userPoolId: **************************,
    userPoolWebClientId: **************,
  },
};

export const configureAws = (): void => {
  Amplify.Logger.LOG_LEVEL = "DEBUG";

  try {
    Auth.configure(AUTH_CONFIG);
  } catch (err) {
    console.error(
      "A problem with an authentication configuration occurred:",
      err
    );
  }
};

Get identityPoolId

aws cognito-identity list-identity-pools --max-results 20

It will return data with identity pool Id, and identity pool name. identityPoolId need to replaced in here identityPoolId: eu-central-1:d6f28bfe-6d09-xxxxxxxxxxxxxxx

Get region

aws configure get region

Get user pool

User pool can be found under Pool section on AWS portal

Get web client pool id

Web client Id is under App Settings inside cognito settings

More on AWS configuration can be cound in here: AWS Configuration

What’s Included?

Your environment will have everything you need to build a modern single-page React app with built-in Identity/AuthN/AuthZ features.

Contributing

We'd love to have your helping hand on janush! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

License

MIT

Copyright (c) 2021-2022, Code & Pepper