Getting Started with techops-frontend

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

npm start

It runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

To generate index.js and index.css file

[1] Check out the dev branch.

[2] Run: npm install

[3] Run npm run build.

[4] It will generate index.js and index.css files at the project root level inside the build folder

Linting and Code Formatting

We have configured eslint for linting and prettier for the file formatting.

NPM Script command for linting check, fix and code formatting

npm run lint

npm run lint: fix

The linting check is configured with every npm start script. The start script will fail if there is any linting error.

To Run the application locally using npm start (Check the extension of the index file under the src folder and rename the index.ts file as index)

To publish NPM package

[1] login to npm account, use command npm login

[2] To publish package, use command npm publish

To include the npm package in the portal from npm account

[1] Search for you package on npm account

[2] Run command into the portal

eg: npm i techops-frontend

[3] import the widget into the application

e.g., In an App.js file,

import { ShowHideWidget } from 'techops-frontend';

<ShowHideWidget />

To generate the npm package locally

[1] npm run build:lib

[2] npm package zip gets created; the version must be updated in the package.json file every time
you make a zip.

[3] Move the npm package zip (e.g., techops-frontend-0.0.1.tgz) to the npm_package_versions folder.

To include the npm package in the portal

[1] Copy the path of the zip file

[2] Go to your project and run the command: npm install <zip_file_path>
e.g., npm install C:\Users\Seema\Downloads\normal-flow\techops-frontend-0.0.1.tgz

[3] This will create dependency in the package.json file. Please make sure to import your 
component wherever required.

e.g., In an App.js file,

import { ShowHideWidget } from 'techops-frontend';

<ShowHideWidget />