Skip to content

Commit 8d197f6

Browse files
dominicarrojadodominicarrojado
committed
set up for deployment
1 parent daf6059 commit 8d197f6

File tree

12 files changed

+243
-83
lines changed

12 files changed

+243
-83
lines changed

‎.github/workflows/ci.yml

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: CI/CD
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
permissions:
8+
contents: write
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
14+
strategy:
15+
matrix:
16+
node-version: [16.x]
17+
18+
steps:
19+
- name: Checkout repository
20+
uses: actions/checkout@v3
21+
22+
- name: Set up Node.js ${{ matrix.node-version }}
23+
uses: actions/setup-node@v3
24+
with:
25+
node-version: ${{ matrix.node-version }}
26+
27+
- name: Get yarn cache directory path
28+
id: yarn-cache-dir-path
29+
run: echo "::set-output name=dir::$(yarn cache dir)"
30+
31+
- name: Cache dependencies
32+
uses: actions/cache@v3
33+
id: yarn-cache
34+
with:
35+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
36+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
37+
restore-keys: |
38+
${{ runner.os }}-yarn-
39+
- name: Install dependencies
40+
run: yarn install --frozen-lockfile
41+
42+
- name: Run the tests
43+
run: yarn test --coverage
44+
45+
- name: Upload coverage to Codecov
46+
uses: codecov/codecov-action@v3
47+
48+
- name: Build
49+
run: yarn build
50+
51+
- name: Deploy
52+
uses: JamesIves/github-pages-deploy-action@v4
53+
with:
54+
folder: build

‎.github/workflows/pr.yml

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: PR
2+
3+
on:
4+
pull_request:
5+
branches: [main]
6+
7+
permissions:
8+
contents: write
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
14+
strategy:
15+
matrix:
16+
node-version: [16.x]
17+
18+
steps:
19+
- name: Checkout repository
20+
uses: actions/checkout@v3
21+
22+
- name: Set up Node.js ${{ matrix.node-version }}
23+
uses: actions/setup-node@v3
24+
with:
25+
node-version: ${{ matrix.node-version }}
26+
27+
- name: Get yarn cache directory path
28+
id: yarn-cache-dir-path
29+
run: echo "::set-output name=dir::$(yarn cache dir)"
30+
31+
- name: Cache dependencies
32+
uses: actions/cache@v3
33+
id: yarn-cache
34+
with:
35+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
36+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
37+
restore-keys: |
38+
${{ runner.os }}-yarn-
39+
- name: Install dependencies
40+
run: yarn install --frozen-lockfile
41+
42+
- name: Run the tests
43+
run: yarn test --coverage
44+
45+
- name: Upload coverage to Codecov
46+
uses: codecov/codecov-action@v3
47+
48+
- name: Build
49+
run: yarn build

‎README.md

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,49 @@
1-
# Getting Started with Create React App
1+
# React TypeScript Bar Graph
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3+
[![CI/CD](https://github.com/dominicarrojado/react-typescript-bar-graph/actions/workflows/ci.yml/badge.svg)](https://github.com/dominicarrojado/react-typescript-bar-graph/actions/workflows/ci.yml)
44

5-
## Available Scripts
5+
A bar graph component with positive and negative values bootstrapped with [Create React App](https://github.com/facebook/create-react-app) + [TypeScript](https://www.typescriptlang.org/).
66

7-
In the project directory, you can run:
7+
## Quick Start
88

9-
### `yarn start`
9+
1. Install [Yarn](https://yarnpkg.com/lang/en/docs/install/).
10+
2. Clone the app:
1011

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
12+
```bash
13+
git clone git@github.com:dominicarrojado/react-typescript-bar-graph.git
14+
```
1315

14-
The page will reload if you make edits.\
15-
You will also see any lint errors in the console.
16+
3. Install dependencies:
1617

17-
### `yarn test`
18+
```bash
19+
cd react-typescript-bar-graph
20+
yarn install
21+
```
1822

19-
Launches the test runner in the interactive watch mode.\
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
23+
4. Run the development server:
2124

22-
### `yarn build`
25+
```bash
26+
yarn start
27+
```
2328

24-
Builds the app for production to the `build` folder.\
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
29+
5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
2630

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
31+
## Running Tests (Watch)
2932

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
33+
```bash
34+
yarn test
35+
```
3136

32-
### `yarn eject`
37+
## Build For Production
3338

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
39+
1. Build static files:
3540

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
41+
```bash
42+
yarn build
43+
```
3744

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
45+
2. The `build` directory can be served by any static hosting service or CDN.
3946

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
47+
## Learn
4148

42-
## Learn More
43-
44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45-
46-
To learn React, check out the [React documentation](https://reactjs.org/).
49+
Learn how to build this bar graph component [here](https://dominicarrojado.com/posts/how-to-create-your-own-bar-graph-in-react-and-typescript-with-tests-part-1/).

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,6 @@
4848
"/src/index.tsx",
4949
"/src/reportWebVitals.ts"
5050
]
51-
}
51+
},
52+
"homepage": "."
5253
}

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 85 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,99 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<title>React TypeScript Bar Graph | Dominic Arrojado</title>
45
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link rel="icon" href="https://dominicarrojado.com/favicon.ico" />
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1"
10+
/>
711
<meta name="theme-color" content="#000000" />
812
<meta
913
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React TypeScript Bar Graph</title>
14+
content="A bar graph component with positive and negative values built in React and TypeScript"
15+
/>
16+
<link
17+
rel="canonical"
18+
href="https://dominicarrojado.com/react-typescript-bar-graph/"
19+
/>
20+
<meta property="og:locale" content="en_US" />
21+
<meta property="og:type" content="website" />
22+
<meta
23+
property="og:title"
24+
content="React TypeScript Bar Graph | Dominic Arrojado"
25+
/>
26+
<meta
27+
property="og:description"
28+
content="A bar graph component with positive and negative values built in React and TypeScript"
29+
/>
30+
<meta
31+
property="og:url"
32+
content="https://dominicarrojado.com/react-typescript-bar-graph/"
33+
/>
34+
<meta property="og:site_name" content="Dominic Arrojado" />
35+
<meta
36+
name="twitter:description"
37+
content="A bar graph component with positive and negative values built in React and TypeScript"
38+
/>
39+
<meta
40+
name="twitter:title"
41+
content="React TypeScript Bar Graph | Dominic Arrojado"
42+
/>
2843
</head>
2944
<body>
45+
<!-- Google Tag Manager (noscript) -->
46+
<noscript
47+
><iframe
48+
src="https://www.googletagmanager.com/ns.html?id=GTM-TSMLTPT"
49+
height="0"
50+
width="0"
51+
style="display: none; visibility: hidden"
52+
></iframe
53+
></noscript>
54+
<!-- End Google Tag Manager (noscript) -->
55+
56+
<!-- Google AdSense -->
57+
<script
58+
async
59+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3632473845121107"
60+
crossorigin="anonymous"
61+
></script>
62+
<!-- End Google AdSense -->
63+
64+
<!-- Google AdSense Unit (Header) -->
65+
<div style="max-width: 1200px; margin: 30px auto">
66+
<ins
67+
class="adsbygoogle"
68+
style="display: block"
69+
data-ad-client="ca-pub-3632473845121107"
70+
data-ad-slot="2299922139"
71+
data-ad-format="auto"
72+
data-full-width-responsive="true"
73+
></ins>
74+
</div>
75+
<script>
76+
(adsbygoogle = window.adsbygoogle || []).push({});
77+
</script>
78+
<!-- End Google AdSense Unit (Header) -->
79+
3080
<noscript>You need to enable JavaScript to run this app.</noscript>
3181
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
3882

39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
83+
<!-- Google AdSense Unit (Footer) -->
84+
<div style="max-width: 1200px; margin: 30px auto">
85+
<ins
86+
class="adsbygoogle"
87+
style="display: block"
88+
data-ad-client="ca-pub-3632473845121107"
89+
data-ad-slot="3221836158"
90+
data-ad-format="auto"
91+
data-full-width-responsive="true"
92+
></ins>
93+
</div>
94+
<script>
95+
(adsbygoogle = window.adsbygoogle || []).push({});
96+
</script>
97+
<!-- End Google AdSense Unit (Footer) -->
4298
</body>
4399
</html>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/App.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,16 @@
55
padding: 20px 15px;
66
user-select: none;
77
}
8+
9+
.footer {
10+
padding: 30px 0;
11+
}
12+
13+
.footer a {
14+
color: #555555;
15+
text-decoration: underline;
16+
}
17+
18+
.footer a:hover {
19+
color: #000000;
20+
}

‎src/App.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ export default function App() {
6363
<BarGraph dataArray={dataArray1} />
6464
<BarGraph dataArray={dataArray2} />
6565
<BarGraph dataArray={dataArray3} />
66+
<footer className="footer">
67+
<a href="https://dominicarrojado.com/posts/how-to-create-your-own-bar-graph-in-react-and-typescript-with-tests-part-1/">
68+
Learn how to build this bar graph component in React and TypeScript
69+
</a>
70+
</footer>
6671
</div>
6772
);
6873
}

‎src/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ body {
1010
-webkit-font-smoothing: antialiased;
1111
-moz-osx-font-smoothing: grayscale;
1212
}
13+
14+
.adsbygoogle[data-ad-status='unfilled'] {
15+
display: none !important;
16+
}

0 commit comments

Comments
 (0)