{"id":18989876,"url":"https://github.com/cdcgov/cdh-lava-react","last_synced_at":"2025-04-22T11:12:14.375Z","repository":{"id":44676088,"uuid":"442489541","full_name":"CDCgov/cdh-lava-react","owner":"CDCgov","description":"CDC Data Hub Lifecycle, Analysis \u0026 Visualization Accelerator (LAVA) REACT Components based on machine readable requirements.","archived":false,"fork":false,"pushed_at":"2024-06-19T00:48:12.000Z","size":15117,"stargazers_count":11,"open_issues_count":4,"forks_count":4,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-17T00:14:40.650Z","etag":null,"topics":["agile-development","azure","data-analysis","data-catalog","data-governance","data-quality","data-science","data-visualization","databricks","datavisualization","devops","excel-export","metadata","operations","powerautomate","powerbi","pyspark","security","sql","test-automation"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CDCgov.png","metadata":{"files":{"readme":"docs/README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-28T14:32:49.000Z","updated_at":"2024-11-16T12:46:52.000Z","dependencies_parsed_at":"2024-05-02T19:53:40.268Z","dependency_job_id":"1372919d-5491-4339-91c4-fa91f3915b3d","html_url":"https://github.com/CDCgov/cdh-lava-react","commit_stats":null,"previous_names":["cdcgov/cdh-lava-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDCgov%2Fcdh-lava-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDCgov%2Fcdh-lava-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDCgov%2Fcdh-lava-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDCgov%2Fcdh-lava-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CDCgov","download_url":"https://codeload.github.com/CDCgov/cdh-lava-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250228642,"owners_count":21395958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agile-development","azure","data-analysis","data-catalog","data-governance","data-quality","data-science","data-visualization","databricks","datavisualization","devops","excel-export","metadata","operations","powerautomate","powerbi","pyspark","security","sql","test-automation"],"created_at":"2024-11-08T17:08:13.164Z","updated_at":"2025-04-22T11:12:14.360Z","avatar_url":"https://github.com/CDCgov.png","language":"CSS","readme":"# CDC Data Hub React Web Components\n\n- Project Name: CDC Data Hub Analytics and Visualization Documentation\n- GitHub Link: [cdh-dav](https://github.com/cdcgov/cdh-dav)\n- Point of contact: [Nishant Nepal](mailto:mailto:zfi4@cdc.gov) [John Bowyer](mailto:zfi4@cdc.gov)\n- Organizational unit: DDPHSS/IAD/ADB\n- Related projects: OPHDST/IAD/ADB/CDH\n- Related investments:  Pending Public Release\n- Governance status: Pending Public Release\n- Program official:  [Sachin Agnihotri](mailto:sax5@cdc.gov)\n\n## Overview\n\nThe CDC Data Hub React Web Client Application performs the last mile (S component - Serving, Sharing and Storytelling) in the IDEAS Framework. The application is a React Single Page Application (SPA) that may be hosted in multiple envronment such as WCMS.  Development of PowerApp React components is also under evaluation.\n\n### React Client Libraries - React / WCMS\n\n| Component         | Tag                | Description                                                                                                                                                            |\n| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| @cdc/cdccore      | n/a                | This is an internal package that is consumed by external facing packages in CDC React Components. The cdccore component contains shared components, styles and assets. |\n| @cdc/cdcheader    | `\u003cCDCHeader /\u003e`    | `\u003cCDCHeader /\u003e` is a React component produced by the CDC for displaying a standard page header.                                                                        |\n| @cdc/cdcmarkdown  | `\u003cCDCMarkdown /\u003e`  | `\u003cCDCMarkdown /\u003e` is a React component produced by the CDC for importing markdown data from a separate source link.                                                    |\n| @cdc/cdcsidebar   | `\u003cCDCSidebar /\u003e`   | `\u003cCDCSidebar /\u003e` is a React component produced by the CDC that displays a sidebar menu.                                                                                |\n|                   |\n| @cdc/cdcsitetitle | `\u003cCDCSiteTitle /\u003e` | `\u003cCDCSiteTitle /\u003e` is a React component produced by the CDC that displays a site title menu with breadcrumbs.                                                          |\n\n### Live Demo hosted in WCMS\n\n- [Dev](https://wcms-wp-stage-intradev.cdc.gov/demo/ocoo/index.html)\n- [Staging](https://wcms-wp-stage-intralink.cdc.gov/demo/ocoo/index.html)\n\n## Initial Setup to Use CDC React components\n\n### Install package from GitHub\n\nGitHub has the latest instructions for installing packages from GitHub here:\n\n- [GitHub Installation](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package)\n\n\n1. Recipe in GitHub to Generate Personal Access Token\n\n- [Team Version](https://publichealthsurveillance.atlassian.net/wiki/x/AQALnw)\n- [Intranet Version](https://wcms-wp-intra.cdc.gov/datahub/dashboards/recipes/github_generate_personal_access_token.html)\n\n3. There's two ways to authenticate - use \"token\" for username and the token path for password, or use an `.npmrc` file.\n\n   - **npm login:*-From your root repo, commandline, run this command:\n\n    ```bash\n    npm login --scope=cdcgov --registry=https://npm.pkg.github.com\n    ```\n\n    It will ask for login info, and you'll use your token as the account password.\n\n    - **.npmrc file:*-Create an `.npmrc` file in your root with these contents (replace TOKEN with your token):\n\n    ```bash\n    cd \u003cyour-repo-project dir\u003e\n    npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN\n    echo \"@cdcgov:registry=https://npm.pkg.github.com/\" \u003e .npmrc\n    echo \"//npm.pkg.github.com/:_authToken=$GITHUB_TOKEN\" \u003e\u003e .npmrc\n    echo \"always-auth=true\" \u003e\u003e .npmrc\n    ```\n\n   ⚠️ **Important:*-Make sure `.npmrc` is in your `.gitignore`. It's your login credentials, shouldn't exist in your repo.\n\n4. If you've done this successfully, you should be able to install this like any other npm library:\n\n    ```bash\n    npm install cdcgov/cdh-lava-react\n    ```\n\n### Requirements\n\n-[react](https://www.npmjs.com/package/react) v16+\n\nThere are 2 SVG assets included in `CDCHeader`. If you're using webpack, you'll need a rule in your `webpack.config.js` to treat them as assets.\n\n``` js\n  rules: [\n    {\n      test: /\\.(png|jpe?g|gif|svg)$/i,\n      type: 'asset/resource',\n    }\n    ...\n```\n\n### Usage\n\nOnce you've installed this package in your local JS project via `npm`, you can include these modules in your main js file:\n\n``` js\nimport { CDCHeader, CDCSiteTitle, CDCBody, CDCFooter } from '@cdcgov/cdh-lava-react';\n// This includes the built CSS files\nimport '@cdcgov/cdh-lava-react/assets/css/bootstrap.min.css';\nimport '@cdcgov/cdh-lava-react/assets/css/app.min.css';\n```\n\n#### Themes\n\nTemplate Package supports 11 themes. `theme-blue` is included in `app.min.css` by default. To use, add a class to your page body element:\n\n``` html\n\u003cbody class=\"theme-blue\"\u003e\n```\n\nFor the other themes, you'll need to include the associated theme css and use its associated `theme-\u003ccolor\u003e` class.\n\n``` html\ntheme-amber.min.css\ntheme-brown.min.css\ntheme-cyan.min.css\ntheme-green.min.css\ntheme-indigo.min.css\ntheme-orange.min.css\ntheme-pink.min.css\ntheme-purple.min.css\ntheme-slate.min.css\ntheme-teal.min.css\n```\n\n[More info on available colors here](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/utilities/colors.html)\n\n#### Favicon\n\nThe default CDC favicon is available in `assets/imgs/favicon.ico`. Either pull it in ask with the SVGs in webpack config, or copy to your public folder and reference appropriately.\n\n```html\n\u003clink rel=\"icon\" href=\"%PUBLIC_URL%/assets/imgs/favicon.ico\" /\u003e\n```\n\n#### Icon font\n\nTemplate Package includes a icon webfont file that adds a host of icons from FontAwesome 5 as well as created icons. The full list can be seen here.\n\n[CDC Icons](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/utilities/icons.html)\n\n```html\n\u003cspan class=\"cdc-icon-globe_03\"\u003e\u003c/span\u003e\n```\n\n#### Bootstrap styles\n\nTemplate Package is built on top of Bootstrap 4, so it includes all core Bootstrap styles and additional styles for our modules. Some more information on available styles:\n\n[Bootstrap Style](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/utilities/styles.html)\n\n### React Components\n\nCurrently the components are quite flat, just enough to render the same site header and footer used by the rest of CDC. If you have any questions about page structure or elements, or Template Package in general, send an email to wcms@cdc.gov.\n\n#### CDCHeader\n\nAccepts props:\n\n-`search`: boolean [default true] enable / disable display of header search\n\n```jsx\n  \u003cCDCHeader search={ true }\u003e\u003c/CDCHeader\u003e\n```\n\n#### CDCSiteTitle\n\nAccepts props:\n\n-`title`: The site title\n-`tagline`: A tagline under the site title\n\n```jsx\n  \u003cCDCSiteTitle\n    title=\"Demo Site\"\n    tagline=\"Demo tagline\"\n  \u003e\n  \u003c/CDCSiteTitle\u003e\n```\n\n#### CDCBody\n\nDisplays children inside a body wrapper.\n\n``` jsx\n  \u003cCDCBody\u003e\n    \u003ch2\u003eTest\u003c/h2\u003e\n    \u003cp\u003e\n      Site content\n    \u003c/p\u003e\n    ...\n  \u003c/CDCBody\u003e\n```\n\n#### CDCFooter\n\nAccepts no props.\n\n``` jsx\n  \u003cCDCFooter\u003e\u003c/CDCFooter\u003e\n```\n\n### Set up Git\n\nNOTE: Must Logout of ZScaler\n\n1. Check version\n\n    ```sh\n    git --version\n    ```\n\n2. If version is not  \u003e= v2.39.0, Install Git\n\n    ```sh\n    sudo apt-get install git\n    ```\n\n    or\n\n    ```sh\n    sudo apt-get upgrade git\n    ```\n\n## Modifying and Updating Components\n\n### Prequisites\n\nFollow set up instructions for NodeJS and NPM:\n\n- Run from Ubuntu-20.04, use WSL if Windows\n- [NodeJS and NPM Getting Started](../docs/pade_node/readme.md)\n\n### Initial Setup to modify core components\n\nThis repository is a [monorepo](https://en.wikipedia.org/wiki/Monorepo) that is managed with [Lerna](https://github.com/lerna/lerna#readme) and uses [yarn](https://yarnpkg.com/) for package management. Make sure you have yarn installed before beginning. To work on individual packages you must setup the entire monorepo.\n\n#### Clean up existing caches\n\n```sh\nsudo yarn cache clean\nsudo npm cache clean --force\nsudo lerna clean\nnx cache clear --all\nfind . -name \"node_modules\" -type d -prune -exec sudo rm -rf '{}' +\n```\n\n#### Setup Yarn\n\nNOTE: MUST LOGOUT: Sign out of ZScaler and run the following\n\n```sh\ncd $HOME\nnpm --version\nsudo npm install -g yarn\nyarn --version\ncd cdc-react\nsudo yarn install\n```\n\nMake the yarn cache available to all users\n\n```sh\nsudo chmod -R 777 /home/[your_alias]/.cache/yarn\n```\n\nexample\n\n```sh\nsudo chmod -R 777 /home/zfi4/.cache/yarn\n```\n\nor\n\n```sh\nsudo chmod -R 777 /usr/local/share/.cache/yarn/v6\n```\n\n#### Setup Lerna\n\nInstall Lerna and initialize all the packages for you. NOTE: MUST LOGOUT: Sign out of ZScaler and run the following\n\n```sh\ncd cdc-react\nsudo yarn global add lerna\nsudo yarn install\nsudo lerna init\nsudo lerna bootstrap\n```\n\n#### Setup Vite\n\nNOTE: MUST LOGOUT: Sign out of ZScaler and run the following\n\n1. Install Vite globally using Yarn:\n\n    ```sh\n    cd cdc-react\n    sudo yarn global add vite\n    ```\n\n2. Check if Vite is added to your PATH environment variable. You can check this by running the following command:\n\n    ```sh\n    echo $PATH\n    ```\n\n3. If you do not see the path to the directory where Vite is installed (e.g., /usr/local/bin), you need to add it to your PATH. You can do this by adding the following line to your shell profile file :\n\n    ```sh\n    cd $HOME\n    nano .bashrc\n    ````\n\n4. Add the following line to the end of the file:\n\n    ```sh\n    export PATH=\"$PATH:/usr/local/bin\"\n    ```\n\n5. Run the following command to reload the profile file:\n\n    ```sh\n    source .bashrc\n    ```\n\n### Setup Sass\n\nRun the following command to install Sass globally.\n\n```sh\nsudo yarn global add sass\n```\n\n### Setup Vitest\n\nRun the following command to install Sass globally.\n\n```sh\nsudo yarn global add vitest\nsudo yarn global add @vitest/ui\nsudo yarn global add jsdom\nsudo yarn install\n```\n\n### Set up .env Environment Variables\n\n1. Install dotenv.  NOTE: MUST LOGOUT: Sign out of ZScaler and run the following\n\n    ```sh\n    sudo yarn add dotenv  -W\n    ```\n\n2. Create a .env file in the root of your project using the following command:\n\n    ```sh\n    touch .env\n    ```\n\n3. Set the following environment variables to tell your `index.html` which server to point to for the Analytics collection:\n\n    ```sh\n    cd cdc-react\n    nano .env\n    ```\n\n4. Add the following lines to the file:\n\n    ```sh\n    REACT_APP_CDC_PATH=https://www.cdc.gov\n    ```\n\n5. create an `.env.development.local` file\n\n    ```sh\n    touch .env.development.local\n    ```\n\n6. Set the following environment variables to tell your `index.html` which server to point to for the Analytics collection:\n\n    ```sh\n    cd cdc-react\n    nano env.development.local\n    ```\n\n7. Add the variable\n\n  ```sh\n  REACT_APP_CDC_PATH=https://wwwdev.cdc.gov\n  ```\n\n### Setup Adobe Analytics\n\n-copy the following into the bottom of the \u003cbody\u003e of your index.html page:\n\n```html\n\u003c!-- Begin Adobe Analytics code version: JS-2.0 --\u003e\n\u003cscript src=\"%REACT_APP_CDC_PATH%/JScript/metrics/topic_levels.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"%REACT_APP_CDC_PATH%/JScript/metrics/adobe/analytics_cdcgov.js\"\u003e\u003c/script\u003e\n\u003cnoscript\u003e\n  \u003ca href=\"https://cdc.112.2o7.net\"\u003e\n    \u003cimg\n      src=\"https://cdc.112.2o7.net/b/ss/cdcgov/1/H.21--NS/01/H.21--NS/0\"\n      height=\"1\"\n      width=\"1\"\n      alt=\"Web Analytics\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/noscript\u003e\n\u003c!--/DO NOT REMOVE/--\u003e\n\u003c!-- End Adobe Analytics code version: JS-2.0 --\u003e\n```\n\nSet the following environment variables to tell your `index.html` which server to point to for the Analytics collection:\n\n**IMPORTANT**\n`wwwdev.cdc.gov` reports to the \"test\" Adobe Analytics suite, and is accessible to everyone from the intranet. `.env` is used at build time so you may need to set up some external proxy server like NGINX. There are many ways to do this that are out of scope, however make sure this is figured out before dev deployment.\n\nIf you are using NGINX make a proxy route to `/JScript` which will point that path to `www.cdc.gov` and then set the `REACT_APP_CDC_PATH=` to nothing in the `.env` file. This will remove the path at build time and let nginx handle the rest.\n\n#### Build All Components\n\nRun the following command to build all of the packages in the correct order.\n\n```sh\ncd cdc-react\nsudo lerna run build --stream --verbose\n```\n\n#### Build Individual Components\n\nTo begin working on an individual package, run the following, replacing `package_name` with the package's name (ex: `@cdc/map`).\n\n```sh\ncd cdc-react\nsudo lerna run --scope @cdc/package_name start\n```\n\n#### Run Individual Components - cdccore\n\n```sh\ncd cdc-react\nsudo lerna run  --scope @cdc/cdccore start  --verbose\n```\n\n#### Run Individual Component - cdcmarkdown\n\n```sh\ncd cdc-react\nsudo lerna run  --scope @cdc/cdcmarkdown start  --verbose\n```\n\n#### Run Individual Component - cdcsitetitle\n\n```sh\ncd cdc-react\nsudo npx lerna run  --scope @cdc/cdcsitetitle start  --verbose\n```\n\n#### Run Individual Component - cdcheader\n\n```sh\ncd cdc-react\nsudo npm run  --scope @cdc/cdcheader start  --verbose\n```\n\n#### Run Individual Component - cdcsidebar\n\n```sh\ncd cdc-react\nsudo npm run  --scope @cdc/cdcsidebar start  --verbose\n```\n\n### TemplatePackage-React\n\nThis package includes assets and components needed to recreate the CDC site header, site title, and footer.\n\n### Set up GitHub Security: Option 1: Credential Manager: On Windows\n\nGCM is included with [Git for Windows](https://gitforwindows.org/). During installation you will be asked to select a credential helper, with GCM listed as the default.\n\n### Set up GitHub Security: Option 1: Credential Manager: On Ubuntu: Primary\n\nReference: [Microsoft Learn](https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-git)\nReference: [GitHub](https://github.com/git-ecosystem/git-credential-manager/blob/release/docs/credstores.md)\nReference: [GitHub Env](https://github.com/git-ecosystem/git-credential-manager/blob/3ffa1900b4360e3041e3e2ce74a5fc8ca4b56e10/docs/environment.md)\nNOTE: Must Logout of ZScaler\n\n1. cd $HOME\n\n    NOTE: LOG OUT OF ZSCALER\n\n2. Download\n\n    ```sh\n    wget \"https://github.com/GitCredentialManager/git-credential-manager/releases/download/v2.0.886/gcm-linux_amd64.2.0.886.deb\" -O /tmp/gcmcore.deb\n    ```\n\n3. Once the script is downloaded, make it executable by running:\n\n    ```sh\n    sudo dpkg -i /tmp/gcmcore.deb\n    ```\n\n4. This will install Git Credential Manager Core on your Ubuntu system.\n\n    ```sh\n    git-credential-manager configure\n    ```\n\n5. Update .bashrc to set the credential type to cache\n\n    ```sh\n    cd $HOME\n    nano ~/.bashrc\n    export GCM_CREDENTIAL_STORE=cache\n    export GCM_PROVIDER=github\n    source ~/.bashrc\n    ```\n\n    or use git config\n\n    ```sh\n    git config --global credential.credentialStore cache\n    ```\n\n6. Set Helper\n\n    ```sh\n    git-credential-manager configure\n    ```\n\n7. Save User Name\n\n    ``` sh\n    git config --global user.name \"John Bowyer\"\n    git config --global user.email  \"jcbowyer@hotmail.com\"\n    git credential-manager store\n    ```\n\nIf everything is installed correctly, this command will output the version number of Git Credential Manager Core.\n\n### Set up GitHub Security: Option 2 SSH\n\n#### Check for existing SSH keys\n\n1. Open Terminal.\n\n2. Enter ls -al ~/.ssh to see if existing SSH keys are present.\n\n    ```sh\n    $ ls -al ~/.ssh\n    # Lists the files in your .ssh directory, if they exist\n    ```\n\n3. Check the directory listing to see if you already have a public SSH key. By default, the filenames of supported public keys for GitHub are one of the following.\n\n    - id_dsa.pub\n    - id_ecdsa.pub\n    - id_ed25519.pub\n\n4. Either generate a new SSH key or upload an existing key.\n\n    - If you don't have a supported public and private key pair, or don't wish to use any that are available, generate a new SSH key.\n\n    - If you see an existing public and private key pair listed (for example, id_rsa.pub and id_rsa) that you would like to use to connect to GitHub, you can add the key to the ssh-agent.\n\n#### Generate SSH keys if missing\n\n1. Open Terminal\n\n2. Paste the text below, substituting in your GitHub email addres\n\n    ```sh\n    ssh-keygen -t ed25519 -C \"your_email@example.com\"\n    ```\n\n3. Log in to your GitHub account and navigate to your account settings.\n\n4. Click on \"SSH and GPG keys\" in the left sidebar.\n\n5. Find the incorrect key in the list of SSH keys and click \"Delete\".\n\n6. Click on \"New SSH key\" and give the key a title.\n\n7. Paste your new public key into the \"Key\" field and click \"Add SSH key\".\n\n#### Add Your Key to GitHub\n\n1. Open Terminal.\n\n2. nano ~/.ssh/id_ed25519.pub\n\n3. Copy the SSH public key to your clipboard.\n\n4. In the upper-right corner of any page, click your profile photo, then click Settings.\n\n5. In the upper-right corner of any page, click your profile photo, then click Settings.\n\n6. Click New SSH key or Add SSH key.\n\n7. In the \"Title\" field, add a descriptive label for the new key. For example, if you're using a personal laptop, you might call this key \"Personal laptop\".\n\n8. Select the type of key, either authentication or signing. For more information about commit signing, see \"About commit signature verification.\"\n\n9. Paste your public key into the \"Key\" field.\n\n10. Click Add SSH key.\n\n11. Authorize the key\n\n### How to Publish an NPM Package to GitHub Packages on Windows\n\nThis guide outlines the steps to publish an NPM package to GitHub Packages from a Windows environment.\n\n## 1. Set `NODE_AUTH_TOKEN` Environment Variable\n\nSet the `NODE_AUTH_TOKEN` environment variable with your GitHub token:\n\n- **Using Command Prompt:**\n  setx NODE_AUTH_TOKEN \"Your_GitHub_Token\"\n\n- **Using PowerShell:**\n  [System.Environment]::SetEnvironmentVariable('NODE_AUTH_TOKEN', 'Your_GitHub_Token', [System.EnvironmentVariableTarget]::User)\n  Replace `Your_GitHub_Token` with your actual GitHub token.\n\n## 2. Update `.gitignore` in Project Root\n\nExclude `.npmrc` in your `.gitignore` file:\n*.npmrc\n\n## 3. Create a `.npmrc` File in the Root of the Project\n\nNavigate to your project directory and create `.npmrc`:\n\n```sh\ncd path\\to\\your\\project\necho \"@cdcgov:registry=https://npm.pkg.github.com/\" \u003e .npmrc\necho \"//npm.pkg.github.com/:_authToken=%NODE_AUTH_TOKEN%\" \u003e\u003e .npmrc\n```\n\n## 4. Login to NPM with GitHub Registry\n\n```sh\nnpm login --registry=https://npm.pkg.github.com/ --scope=@cdcgov --always-auth\n```\n\nWhen prompted, enter your GitHub username, GitHub token as the password, and your email address.\n\n## 5. Create and Publish Your NPM Package\n\n- Initialize your package (if not already done):\n\n```sh\nnpm init\n```\n\n- Set the version according to your format:\n\n```sh\nnpm version 202304.0.0\n```\n\nIf you're using Lerna:\n\n```sh\nlerna version --major 202304\n```\n\n- Publish your package:\n\n```sh\nnpm publish --registry https://npm.pkg.github.com/@cdcgov\n```\n\n## 6. Check Package Access and Status\n\n```sh\nnpm access list packages --scope=@cdcgov\nnpm access get status @cdcgov/cdc-react\n```\n\nRemember to replace placeholders like `path\\to\\your\\project` and `Your_GitHub_Token` with your actual project path and GitHub personal access token.\n\n### How to Publish Your REACT NPM Package To GitHub on Ubuntu\n\nTo publish an NPM package to GitHub, you will first need to create an NPM account if you haven't already. Once you have an account, you can follow these steps:\n\n1. Add NODE_AUTH_TOKEN to .bashrc\n\n    ```sh\n    cd $HOME\n    nano ~/.bashrc\n    export NODE_AUTH_TOKEN=$GITHUB_TOKEN\n    source ~/.bashrc\n    ```\n\n2. Update .gitignore in project root to exclude .npmrc\n\n    ```sh\n    *.npmrc\n    ```\n\n3. Create a .nprc file in the root of the project\n\n    ```sh\n    cd cdc-react\n    echo \"@cdcgov:registry=https://npm.pkg.github.com/\" \u003e .npmrc\n    echo \"//npm.pkg.github.com/:_authToken=$GITHUB_TOKEN\" \u003e\u003e .npmrc\n    ```\n\n4. Login\n\n    ```sh\n    npm login --registry=https://npm.pkg.github.com/ --scope=@cdcgov --always-auth --_authToken=\u003cYOUR_GITHUB_TOKEN\u003e\n    ```\n\n5. Create your NPM package: Once your repository is created, you can start creating your NPM package. You can do this by running the npm init command in your terminal to create a new package.json file. Then, you can add your code and dependencies as you normally would.  For PADE, our NPM Package is stored in the cdc-react folder.\n\n    Create a version with the YYYYMMM.RELEASE.PATCH:  Example: 202304.0.0\n\n    ```sh\n    npm version 202304.0.0\n    lerna version --major 202304\n    ```\n\n6. Publish your package to NPM: To publish your NPM package to the NPM registry, run npm login to log in to your NPM account and authenticate yourself. Then, run npm publish to publish your package to the registry. Make sure to specify the correct version number in your package.json file before publishing.\n\n    ```sh\n    npm access list packages scope:@cdcgov\n    npm access get status @cdcgov/cdc-react\n    npm publish -registry https://npm.pkg.github.com/cdcgov --scope=cdcgov\n    ```\n\n### More Information\n\nTemplate Package is maintained by the WCMS / TP team with OADC, in the repo: [CDC WCMS Template Repository](https://github.com/cdcgov/TemplatePackage)\n\nFeel free to submit issues to this repo. More information is available here:\n\n-[Metrics Guide](http://intranet.cdc.gov/cdcweb/web/metrics/adobe-analytics/metrics-application-guidance.html)\n-[Template Package gallery](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/)\n-[Template Package gallery: Icons](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/utilities/icons.html)\n-[Template Package gallery: Styles](https://static.prototype.cdc.gov/TemplatePackage/4.0/gallery/utilities/styles.html)\n\n### Troubleshooting\n\n#### Problem - can't load svg image in react\n\n-[Reference Article](https://blog.logrocket.com/how-to-use-svgs-react/)\n\n#### Problem - .yarn-metadata.json: Unexpected end of JSON input\n\nThis error typically indicates that there was a problem with the installation or caching of a package using Yarn. To resolve this error, you can try the following steps:\n\nClear the Yarn cache by running the following command:\n\n```bash\nyarn cache clean\n```\n\nDelete the .yarn-metadata.json file in the rxjs package directory:\n\n```bash\nsudo rm /usr/local/share/.cache/yarn/v6/npm-rxjs-7.8.0-90a938862a82888ff4c7359811a595e14e1e09a4-integrity/node_modules/rxjs/.yarn-metadata.json\n```\n\nIf these steps don't resolve the error, you may need to try updating or reinstalling Yarn itself.\n\n#### Problem: Unable to connect to GitHub with ssh: @github.com: Permission denied (publickey).\n\nWarning: Permanently added the ECDSA host key for IP address '140.82.114.3' to the list of known hosts.\njcbowyer@github.com: Permission denied (publickey).\ngit@github.com: Permission denied (publickey).\n\nSolution:\n\nCheck your keys\n\n```bash\ncd $HOME/.ssh\nls -al\n```\n\nCheck that your SSH key has the appropriate permissions. The SSH key should have read-only permissions, which you can set by running the following command:\n\n``` bash\nchmod 400 ~/.ssh/known_hosts\n```\n\nVerify that your SSH key is added to the ssh-agent. You can add your key to the ssh-agent by running the following command:\n\n``` bash\nssh-add ~/.ssh/known_hosts\n```\n\nEnsure that you have the correct remote URL for your Git repository. You can check the remote URL by running the following command:\n\n``` bash\ngit remote -v\n```\n\nIf the URL is incorrect, you can update it using the following command:\n\n``` bash\ngit remote set-url origin git@github.com:\u003cusername\u003e/\u003crepository\u003e.git\n```\n\nReplace \u003cusername\u003e with your GitHub username and \u003crepository\u003e with the name of your Git repository.\n\n#### Problem: Division Fails in SASS\n\nArticle: [Stack Overflow](https://stackoverflow.com/questions/67688301/using-math-div-instead-of-in-scss)\n\nSolution:\n\n```sh\nsudo yarn global  add sass-migrator\nsudo yarn install --force\n# Run the codemod on all .scss files recursively from the working directory\nsudo sass-migrator division **/*.scss\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdcgov%2Fcdh-lava-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdcgov%2Fcdh-lava-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdcgov%2Fcdh-lava-react/lists"}