Skip to content

Commit 7cc6467

Browse files
author
Laura Warr
committed
Initial react example app
1 parent 87983d1 commit 7cc6467

19 files changed

+10224
-124
lines changed

‎.github/unit-test.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Unit Test
2+
3+
on:
4+
pull_request:
5+
types: [opened, edited, reopened, synchronize]
6+
branches:
7+
- main
8+
merge_group:
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
jobs:
13+
unit-test:
14+
name: Test
15+
runs-on: ubuntu-latest
16+
steps:
17+
- uses: actions/checkout@v4
18+
- uses: actions/setup-node@v3
19+
with:
20+
node-version: '20.x'
21+
cache: 'yarn'
22+
- name: Install dependencies
23+
run: yarn --immutable
24+
- name: Test Project
25+
run: yarn test

‎.gitignore

+16-122
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,24 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
.pnpm-debug.log*
9-
10-
# Diagnostic reports (https://nodejs.org/api/report.html)
11-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12-
13-
# Runtime data
14-
pids
15-
*.pid
16-
*.seed
17-
*.pid.lock
18-
19-
# Directory for instrumented libs generated by jscoverage/JSCover
20-
lib-cov
21-
22-
# Coverage directory used by tools like istanbul
23-
coverage
24-
*.lcov
25-
26-
# nyc test coverage
27-
.nyc_output
28-
29-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30-
.grunt
31-
32-
# Bower dependency directory (https://bower.io/)
33-
bower_components
34-
35-
# node-waf configuration
36-
.lock-wscript
37-
38-
# Compiled binary addons (https://nodejs.org/api/addons.html)
39-
build/Release
40-
41-
# Dependency directories
42-
node_modules/
43-
jspm_packages/
44-
45-
# Snowpack dependency directory (https://snowpack.dev/)
46-
web_modules/
47-
48-
# TypeScript cache
49-
*.tsbuildinfo
50-
51-
# Optional npm cache directory
52-
.npm
53-
54-
# Optional eslint cache
55-
.eslintcache
56-
57-
# Optional stylelint cache
58-
.stylelintcache
59-
60-
# Microbundle cache
61-
.rpt2_cache/
62-
.rts2_cache_cjs/
63-
.rts2_cache_es/
64-
.rts2_cache_umd/
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
652

66-
# Optional REPL history
67-
.node_repl_history
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
687

69-
# Output of 'npm pack'
70-
*.tgz
8+
# testing
9+
/coverage
7110

72-
# Yarn Integrity file
73-
.yarn-integrity
11+
# production
12+
/build
7413

75-
# dotenv environment variable files
76-
.env
14+
# misc
15+
.DS_Store
16+
.env.local
7717
.env.development.local
7818
.env.test.local
7919
.env.production.local
80-
.env.local
81-
82-
# parcel-bundler cache (https://parceljs.org/)
83-
.cache
84-
.parcel-cache
85-
86-
# Next.js build output
87-
.next
88-
out
89-
90-
# Nuxt.js build / generate output
91-
.nuxt
92-
dist
93-
94-
# Gatsby files
95-
.cache/
96-
# Comment in the public line in if your project uses Gatsby and not Next.js
97-
# https://nextjs.org/blog/next-9-1#public-directory-support
98-
# public
99-
100-
# vuepress build output
101-
.vuepress/dist
102-
103-
# vuepress v2.x temp and cache directory
104-
.temp
105-
.cache
106-
107-
# Docusaurus cache and generated files
108-
.docusaurus
109-
110-
# Serverless directories
111-
.serverless/
112-
113-
# FuseBox cache
114-
.fusebox/
115-
116-
# DynamoDB Local files
117-
.dynamodb/
118-
119-
# TernJS port file
120-
.tern-port
121-
122-
# Stores VSCode versions used for testing VSCode extensions
123-
.vscode-test
20+
.env
12421

125-
# yarn v2
126-
.yarn/cache
127-
.yarn/unplugged
128-
.yarn/build-state.yml
129-
.yarn/install-state.gz
130-
.pnp.*
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*

‎README.md

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,24 @@
1-
# example-js-web-app
2-
Example app for using the DevCycle Client SDK with a web app
1+
# DevCycle React SDK Example App
2+
3+
An example app built using [Create React App](https://github.com/facebook/create-react-app) and the [DevCycle React SDK](https://docs.devcycle.com/sdk/client-side-sdks/react/)
4+
5+
## Running the example
6+
7+
* Run `yarn install` in the project directory to install dependencies
8+
* Create a `.env` file and set `REACT_APP_DEVCYCLE_CLIENT_SDK_KEY` to the SDK Key for your environment.\
9+
You can find this under [Settings > Environments](https://app.devcycle.com/r/environments) on the DevCycle dashboard.
10+
* Create a new feature on the dashboard with a string variable named `greeting` and a boolean variable named `spin-logo`
11+
* If you added user targeting to your feature, update the user object `App.js` based on your targeting rules.
12+
13+
### `yarn start`
14+
15+
Runs the app in the development mode.\
16+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
17+
18+
The page will reload when you make changes.\
19+
You may also see any lint errors in the console.
20+
21+
### `yarn test`
22+
23+
Launches the test runner in the interactive watch mode.\
24+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

‎config-overrides.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
webpack: function (config, env) {
3+
config.module.rules = config.module.rules.map((rule) => {
4+
if (rule.oneOf instanceof Array) {
5+
rule.oneOf[rule.oneOf.length - 1].exclude = [
6+
/\.(js|mjs|jsx|cjs|ts|tsx)$/,
7+
/\.html$/,
8+
/\.json$/,
9+
]
10+
}
11+
return rule
12+
})
13+
return config
14+
},
15+
}

‎package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "example-react-with-provider",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@devcycle/react-client-sdk": "^1.13.2",
7+
"@testing-library/jest-dom": "^5.17.0",
8+
"@testing-library/react": "^13.4.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"classnames": "^2.3.2",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-scripts": "5.0.1"
14+
},
15+
"devDependencies": {
16+
"@babel/plugin-proposal-private-property-in-object": "^7.21.0",
17+
"react-app-rewired": "^2.2.1"
18+
},
19+
"scripts": {
20+
"start": "react-app-rewired start",
21+
"build": "react-app-rewired build",
22+
"test": "react-app-rewired test",
23+
"eject": "react-scripts eject"
24+
},
25+
"eslintConfig": {
26+
"extends": [
27+
"react-app",
28+
"react-app/jest"
29+
]
30+
},
31+
"browserslist": {
32+
"production": [
33+
">0.2%",
34+
"not dead",
35+
"not op_mini all"
36+
],
37+
"development": [
38+
"last 1 chrome version",
39+
"last 1 firefox version",
40+
"last 1 safari version"
41+
]
42+
}
43+
}

‎public/favicon.svg

+24
Loading

‎public/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="DevCycle React SDK example app"
11+
/>
12+
<title>DevCycle React SDK Example</title>
13+
</head>
14+
<body>
15+
<noscript>You need to enable JavaScript to run this app.</noscript>
16+
<div id="root"></div>
17+
</body>
18+
</html>

‎src/App.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.App {
2+
text-align: center;
3+
background-color: #282c34;
4+
min-height: 100vh;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
font-size: calc(10px + 2vmin);
10+
color: white;
11+
}
12+
13+
.App-logo {
14+
height: 40vmin;
15+
pointer-events: none;
16+
}
17+
18+
.App-user {
19+
margin: 0.5em
20+
}
21+
22+
.App-user p {
23+
margin: 0.5em
24+
}
25+
26+
.App-buttons {
27+
display: flex;
28+
justify-content: center;
29+
}
30+
31+
.App-button {
32+
font-weight: bold;
33+
padding: 0.5em 1em;
34+
margin: 0 0.5em;
35+
border-color: transparent;
36+
border-radius: 3px;
37+
cursor: pointer;
38+
}
39+
40+
@media (prefers-reduced-motion: no-preference) {
41+
.spin {
42+
animation: Spin infinite 20s linear;
43+
}
44+
}
45+
46+
.App-link {
47+
color: #61dafb;
48+
}
49+
50+
@keyframes Spin {
51+
from {
52+
transform: rotate(0deg);
53+
}
54+
to {
55+
transform: rotate(360deg);
56+
}
57+
}

0 commit comments

Comments
 (0)