Skip to content

Commit 4033d49

Browse files
reouctrockyRaccoon13jattasNI
authored
App shell for Service Account Dashboard (#103)
Co-authored-by: Kurt Rowley <bensonro@byu.edu> Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>
1 parent cde66c2 commit 4033d49

21 files changed

Lines changed: 8240 additions & 0 deletions

‎examples/Web Apps/Framework Examples/React/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.vite/

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/.env.development‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# NOTE: This is a tracked file.
2+
#If adding sensitive data, add this file to .gitignore and make an example file
3+
4+
# Development should use a locally running server to proxy to the api domain
5+
# (e.g. https://demo-api.lifecyclesolutions.ni.com)
6+
VITE_SYSTEMLINK_SERVER_URL=http://localhost:4000/apiProxy

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/.env.production‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# NOTE: This is a tracked file.
2+
# If adding sensitive data, add this file to .gitignore and make an example file
3+
4+
5+
# Production should use the actual website domain of the SystemLink environment that is hosting it
6+
# e.g. https://demo.lifecyclesolutions.ni.com
7+
8+
# Empty url will result in the domain shown in browser
9+
VITE_SYSTEMLINK_SERVER_URL="" # Keep blank
10+

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Service Account Manager
2+
3+
**This application is still under development!**
4+
5+
A React + Vite application for managing service account users.
6+
7+
## Prerequisites
8+
9+
- Node.js
10+
- npm
11+
- Access to a SystemLink environment
12+
- A SystemLink API key (for local development through the API proxy)
13+
14+
## Why a local proxy is required
15+
16+
When running this app locally, browser requests to SystemLink API domains are
17+
blocked by CORS. Use the API Service Proxy to forward requests from localhost to
18+
your SystemLink API server.
19+
20+
## Run Locally
21+
22+
### 1. Start the API proxy
23+
24+
From `examples/Web Apps/Dev Tools/ApiServiceProxy`:
25+
26+
```bash
27+
npm ci
28+
```
29+
30+
Create `proxyConfig.js` from `proxyConfig.example.js`, then set:
31+
32+
- SystemLink API URL (for example, `https://demo-api.lifecyclesolutions.ni.com`)
33+
- API key
34+
35+
Start proxy:
36+
37+
```bash
38+
npm run start
39+
```
40+
41+
The proxy runs at `http://localhost:4000`.
42+
43+
### 2. Configure this app for local development
44+
45+
In this project folder (`ServiceHealthDashboard`), `.env.development` should
46+
point to the proxy:
47+
48+
```bash
49+
VITE_SYSTEMLINK_SERVER_URL=http://localhost:4000/apiProxy
50+
```
51+
52+
This value is already configured in the repo.
53+
54+
### 3. Install and run the app
55+
56+
From `examples/Web Applications/Framework Examples/React/ServiceHealthDashboard`:
57+
58+
```bash
59+
npm ci
60+
npm run dev
61+
```
62+
63+
Open the URL printed by Vite (typically `http://localhost:5173`).
64+
65+
## Useful Commands
66+
67+
From this project folder:
68+
69+
```bash
70+
npm run dev # Start dev server
71+
npm run build # Build production assets into dist/
72+
npm run preview # Preview the production build locally
73+
npm run lint # Run ESLint
74+
npm run lint:fix # Run ESLint and auto-fix issues
75+
```
76+
77+
## Deployment using the SystemLink CLI
78+
79+
Prereq:
80+
**[Install](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
81+
the SystemLink CLI to your machine and
82+
**[login](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
83+
to the CLI.
84+
85+
1. `cd` into the project folder and run `npm run build` to create `dist/` folder
86+
2. Create .nipkg file using `slcli webapp pack dist/`
87+
3. Publish the webapp with
88+
`slcli webapp publish dist.nipkg --name NAME --workspace WORKSPACE`. Specify
89+
the webapp NAME and the user WORKSPACE
90+
4. After any changes are made, repack the webapp (step 2) and update the webapp
91+
with `slcli webapp publish dist.nipkg --id ID`. (Use `slcli webapp list` to
92+
get the ID)
93+
94+
For more details on
95+
[WebApp Management](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)
96+
see the SL-CLI docs

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/eslint.config.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { defineConfig } from 'eslint/config';
2+
import react from 'eslint-plugin-react';
3+
4+
import reactHooks from 'eslint-plugin-react-hooks';
5+
import reactRefresh from 'eslint-plugin-react-refresh';
6+
7+
import { javascriptConfig } from '@ni/eslint-config-javascript';
8+
import { typescriptConfig } from '@ni/eslint-config-typescript';
9+
10+
export default defineConfig([
11+
{
12+
ignores: ['dist/**'],
13+
},
14+
{
15+
files: ['**/*.ts', '**/*.tsx'],
16+
plugins: {
17+
react,
18+
'react-refresh': reactRefresh,
19+
'react-hooks': reactHooks,
20+
},
21+
extends: [
22+
typescriptConfig,
23+
react.configs.flat.recommended,
24+
react.configs.flat['jsx-runtime'],
25+
reactHooks.configs.flat.recommended,
26+
],
27+
languageOptions: {
28+
parserOptions: {
29+
project: './tsconfig.app.json',
30+
tsconfigRootDir: import.meta.dirname,
31+
ecmaFeatures: {
32+
jsx: true,
33+
},
34+
},
35+
},
36+
settings: {
37+
react: {
38+
version: 'detect',
39+
},
40+
},
41+
rules: {
42+
// The React components should use PascalCase
43+
'@typescript-eslint/naming-convention': [
44+
'error',
45+
{
46+
selector: 'variable',
47+
format: ['camelCase', 'PascalCase'],
48+
},
49+
],
50+
'react-refresh/only-export-components': [
51+
'error',
52+
{ allowConstantExport: true },
53+
],
54+
// "@typescript-eslint/strict-boolean-expressions": "off",
55+
// "no-alert": "off",
56+
},
57+
},
58+
59+
{
60+
files: ['vite.config.ts'],
61+
extends: [typescriptConfig],
62+
languageOptions: {
63+
parserOptions: {
64+
project: './tsconfig.node.json',
65+
tsconfigRootDir: import.meta.dirname.pathname,
66+
},
67+
},
68+
rules: {
69+
// Configuration scripts will not be in published package and are allowed to use devDependencies
70+
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
71+
// Build scripts should give verbose logging
72+
'no-console': 'off',
73+
// Rollup config files use default exports
74+
'import/no-default-export': 'off',
75+
},
76+
},
77+
78+
{
79+
files: ['**/*.js'],
80+
extends: [javascriptConfig],
81+
},
82+
]);

‎examples/Web Apps/Framework Examples/React/ServiceAccountManager/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Service Account Manager</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/app/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)