Skip to content

Commit 71755b4

Browse files
nasdannasdan
authored
Merge pull request #785 from Lemoncode/feature/azure-static-web-deploy
add azure static web deploy as bonus project
2 parents 5b354a1 + e8a90e3 commit 71755b4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+10140
-0
lines changed

‎07-cloud/99-bonus/01-vercel/readme-resources/_old/01-project-id-github-secret.png

-45.2 KB
Binary file not shown.

‎07-cloud/99-bonus/01-vercel/readme-resources/_old/02-org-id-github-secret.png

-45 KB
Binary file not shown.

‎07-cloud/99-bonus/01-vercel/readme-resources/_old/03-token-github-secret.png

-45 KB
Binary file not shown.

‎07-cloud/99-bonus/01-vercel/readme-resources/_old/04-build-steps.png

-56 KB
Binary file not shown.

‎07-cloud/99-bonus/05-azure-static/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎07-cloud/99-bonus/05-azure-static/.env.development

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PUBLIC_ORGANIZATION=lemoncode

‎07-cloud/99-bonus/05-azure-static/.env.production

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PUBLIC_ORGANIZATION=facebook

‎07-cloud/99-bonus/05-azure-static/.github/workflows/cd.yml

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: CD Workflow
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
cd:
10+
environment:
11+
name: 'My Static Web App'
12+
# Replace <YOUR_WEB_STATIC_URL> with the url of your static web app
13+
url: <YOUR_WEB_STATIC_URL>
14+
runs-on: ubuntu-latest
15+
name: Build and Deploy Job
16+
steps:
17+
- name: Checkout repository
18+
uses: actions/checkout@v3
19+
20+
- name: Install
21+
run: npm ci
22+
23+
- name: Build
24+
run: npm run build
25+
26+
- name: Deploy
27+
uses: Azure/static-web-apps-deploy@v1
28+
with:
29+
# Replace <YOUR_AUTO_GENERATED_TOKEN> with the name of your secret token
30+
azure_static_web_apps_api_token: ${{ secrets.<YOUR_AUTO_GENERATED_TOKEN> }}
31+
repo_token: ${{ secrets.GITHUB_TOKEN }}
32+
action: "upload"
33+
app_location: "/dist"
34+
ski_app_build: true
35+
ski_api_build: true
36+
env:
37+
NODE_VERSION: 20.17.0

‎07-cloud/99-bonus/05-azure-static/.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
node_modules
2+
dist
3+
coverage
4+
.awcache
5+
test-report.*
6+
junit.xml
7+
*.log
8+
*.orig
9+
.awcache
10+
.env
11+
server/public

‎07-cloud/99-bonus/05-azure-static/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5",
4+
"endOfLine": "lf"
5+
}

‎07-cloud/99-bonus/05-azure-static/README.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# 05 Azure Static
2+
3+
In this example we are going to upload a front app to Azure using an Static Web App.
4+
5+
We will start from `04-manual-render-deploy`.
6+
7+
# Steps to build it
8+
9+
`npm install` to install previous sample packages:
10+
11+
```bash
12+
npm install
13+
```
14+
15+
Create new repository and upload files:
16+
17+
![01-create-repo](./readme-resources/01-create-repo.png)
18+
19+
```bash
20+
git init
21+
git remote add origin [email protected]...
22+
git add .
23+
git commit -m "initial commit"
24+
git push -u origin main
25+
26+
```
27+
28+
Create a new _Azure Static Web App_:
29+
30+
![Go to azure static web apps](./readme-resources/02-1-static-web-apps.png)
31+
32+
![Create new static web apps](./readme-resources/02-2-create-static-web-app.png)
33+
34+
Configure the app:
35+
36+
![Configure the app](./readme-resources/03-configure-new-static-web.png)
37+
38+
Review and create:
39+
40+
![Review and create](./readme-resources/04-review-and-create.png)
41+
42+
Once we click on `Create`, Azure will create automatically a new Github Workflow in your repository like:
43+
44+
![Automatically added Github Workflow](readme-resources/05-automatically-added-github-workflow.png)
45+
46+
And a new `Action Secret`:
47+
48+
![Automatically added Action Secret](readme-resources/06-automatically-added-action-secret.png)
49+
50+
Let's download the new repository changes to local:
51+
52+
```bash
53+
git pull
54+
```
55+
56+
Since the Github workflow is a generic template, we will remove all content but preserve the secrect and add the following content:
57+
58+
_./github/workflows/cd.yml_
59+
60+
```yml
61+
name: CD Workflow
62+
63+
on:
64+
push:
65+
branches:
66+
- main
67+
68+
jobs:
69+
cd:
70+
environment:
71+
name: 'My Static Web App'
72+
# Replace <YOUR_WEB_STATIC_URL> with the url of your static web app
73+
url: <YOUR_WEB_STATIC_URL>
74+
runs-on: ubuntu-latest
75+
name: Build and Deploy Job
76+
steps:
77+
- name: Checkout repository
78+
uses: actions/checkout@v3
79+
80+
- name: Install
81+
run: npm ci
82+
83+
- name: Build
84+
run: npm run build
85+
86+
- name: Deploy
87+
uses: Azure/static-web-apps-deploy@v1
88+
with:
89+
# Replace <YOUR_AUTO_GENERATED_TOKEN> with the name of your secret token
90+
azure_static_web_apps_api_token: ${{ secrets.<YOUR_AUTO_GENERATED_TOKEN> }}
91+
repo_token: ${{ secrets.GITHUB_TOKEN }}
92+
action: "upload"
93+
app_location: "/dist"
94+
ski_app_build: true
95+
ski_api_build: true
96+
env:
97+
NODE_VERSION: 20.17.0
98+
99+
```
100+
101+
> Visit official documentation to get more info about [Azure Static Web Apps Config Props](https://aka.ms/swaworkflowconfig)
102+
103+
Upload changes:
104+
105+
```bash
106+
git add .
107+
git commit -m "update cd github workflow"
108+
git push
109+
110+
```
111+
112+
# About Basefactor + Lemoncode
113+
114+
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
115+
116+
[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
117+
118+
[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
119+
120+
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

‎07-cloud/99-bonus/05-azure-static/config/test/config.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vitest/globals" />

‎07-cloud/99-bonus/05-azure-static/config/test/config.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineConfig } from 'vitest/config';
2+
import { fileURLToPath } from 'node:url';
3+
4+
export default defineConfig({
5+
test: {
6+
globals: true,
7+
restoreMocks: true,
8+
environment: 'jsdom',
9+
setupFiles: ['./config/test/setup.ts'],
10+
alias: {
11+
'@': fileURLToPath(new URL('../../src', import.meta.url)),
12+
},
13+
},
14+
});

‎07-cloud/99-bonus/05-azure-static/config/test/setup.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom/vitest';

‎07-cloud/99-bonus/05-azure-static/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Cloud Module</title>
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/index.tsx"></script>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)