README.md

Open LXP

Table of content

• Installation
  • Clone Project
  • Install Project Dependencies
• Getting started
  • Environment Variables
  • Creating a local env
    • Walk through
    • Template
  • Important Notes
• Available Scripts
  • yarn start
  • yarn test
  • yarn build
  • yarn coverage

---

Installation

Clone Project

git clone [email protected]:OpenLXP/openlxp-xds-ui.git

Install Project Dependencies

Start off by verifying that you have yarn installed.

yarn -version

If yarn is not installed use the following command to install it. This will install the yarn package manager globally on your system.

global install

npm install yarn -g

local install

npm install yarn

Once yarn has been installed you will need to install the project dependencies. Using the following command we will manually set your yarn version for this project.

yarn set version 1.22.1

After the version has been installed and set we will install the dependencies. Using the following command we will install all the project dependencies.

yarn install package.json

---

Getting started

Environment Variables

This project makes use of globally available environment variables. Below are the required environment variables required for this project.

REACT_APP_BACKEND_HOST

This is the root API endpoint used by the config file to dynamically generate the various endpoints.

http://<YOUR_BACKEND_ENDPOINT>/

Creating a local environment file

Walk through

Let's create a local .env.local file. If you are in a code editor you can right click and create new file.

If you are using the terminal use the following command to create a new file.

bash command

touch <PATH_TO_YOUR_PROJECT_ROOT>/.env.local

powershell

New-Item -Path <PATH_TO_YOUR_PROJECT_ROOT>\.env.local -ItemType File

Navigate to the newly created file and paste the template (below) into the file. Replace <YOUR_BACKEND_ENDPOINT> with your localhost setup or your live endpoint.

.env Template

REACT_APP_BACKEND_HOST=<YOUR_BACKEND_ENDPOINT>

Important Notes

To use this piece of code without any issues you will need the XDS component to accompany it.

OpenLXP XDS

You're all set! Explore the commands below to run, build, or test the app.

---

Available Scripts

In the project directory, you can run the following.

yarn start

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

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn coverage

Launches the test runner with coverage mode enabled. See the section about running tests for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

---

Color Guide

---

Core Configurations Checklist

These configurations are required.

• XDS Configurations
• XDS UI Configurations
• Course Detail Highlights
• Course Information Mappings

---