Skip to content

Latest commit

 

History

History
73 lines (54 loc) · 2.12 KB

README.md

File metadata and controls

73 lines (54 loc) · 2.12 KB

Web widget to show browser memory information.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

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

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build:widget

Generates two file index.js and index.css in the output directory. Add the below script in package.json

    "build:widget": "parcel build src/index.js --no-source-maps --dist-dir output"

Development changes

Update the root element in the public/index.html

<div id="js_widget__root__"></div>

Integration with APP

Add the following content in the root page of your web page.

<link href="output/index.css" rel="stylesheet" />
<script src="output/index.js"></script>

OR

Build CDN to integrate with web pages

<link href="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info/output/index.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info/output/index.js"></script>

CDN with perticular version

 <link href="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info@v1.0.5/output/index.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info@v1.0.5/output/index.js"></script>

Testing

Download a test.html and open in the browser and check the widget.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

    <h3>Widget Demo from CDN</h3>


    <link href="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info@v1.0.5/output/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/gh/RamMohan222/web-widget-metrics-info@v1.0.5/output/index.js"></script>
</body>
</html>

alt output