Installing and getting started with the design system

To get started quickly, install Node.js, install a React application, install the Social Program Management Design System Node packages, and complete the short tutorial. When it is time to develop and test your REST APIs, install the IBM® Cúram Social Program Management Java Application Development Environment (ADE).

About this task

You need a React application into which you can install the Social Program Management Design System node packages. You can use any React application. However, the Facebook create-react-app contains some useful tools that simplify getting started with React development.

create-react-app plus the design system packages are installed in Node.js, and connect to Tomcat in the SPM development environment through REST APIs.

The Social Program Management Design System consists of the following Node packages:

@spm/core
@spm/core-ui
@spm/core-ui-locales
@spm/intelligent-evidence-gathering
@spm-intelligent-evidence-gathering-locales
@govhhs/govhhs-design-system-core
@govhhs/govhhs-design-system-react
@spm/eslint-config
@spm/test-framework
@spm/web-dev-accelerator-scripts
@spm/web-dev-accelerator

Attention: When working with npm packages, it is important that you familiarize yourself with the npm ecosystem and how package dependencies work, so that you can adopt a suitable security strategy for your project needs.

Procedure

Download and install Node.js from https://nodejs.org. The installation includes the npm (Node package manager), which you can use to install your Node packages.
For more information about Node.js, see this Node.js developerWorks article.
Create your React application by using Facebook's create-react-app:
1. From the directory where you want to create your React application, enter the following command, where my-app is the name that you want to call your application. A my-app directory is created to contain the application files.
```
npx create-react-app my-app
```
  For more information about create-react-app, see the create-react-app user guide.
2. You now have a basic React application in the my-app directory. You can run the application by entering the following commands:
```
cd my-app
npm start
```
  If the local host does not start automatically, browse to http://localhost:3000/ to see the running application.
Download, install, and configure the IBM Social Program Management Design System Node packages.
1. Open IBM Fix Central, select Cúram Social Program Management, your installed version and platform, and click Continue.
2. Ensure that Browse for fixes is selected, and click Continue.
3. Select the check box for IBMSocialProgramManagementDesignSystem and click Continue.
4. Only versions that are compatible with your IBM Cúram Social Program Management version are shown. Download SPM_DS_<version>.zip and extract the packages in the archive file to any directory.
5. From your my-app React application directory, enter the following command for each design system package to install the packages.
```
npm install <path>/<package-name>-<version>.tgz
```
  Where <path> is the download path, <package-name> is a downloaded package, and <version> is the package version.
  Note: Ignore any Node package dependency warnings for now. If needed, you can resolve them later.
6. To import the minified JavaScript and CSS files for the design system components, edit the my-app\src\App.js file and insert the following lines:
```
import '@govhhs/govhhs-design-system-core/dist/js/@govhhs/govhhs-wds.min';
import '@govhhs/govhhs-design-system-core/dist/css/govhhs-wds.min.css';
```
Now, you can do the short tutorial to get started, or you can install the IBM Cúram Social Program Management Java ADE that you need to develop and test your REST APIs, and do the tutorial later.
1. Complete the short tutorial to get started, see Tutorial: Creating a page in your application.
2. Install the IBM Cúram Social Program Management Java ADE, see Installing a Development Environment.