You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+71-47Lines changed: 71 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,11 +35,11 @@ The implementation uses
35
35
-[Azure Static WebApp](https://azure.microsoft.com/en-us/services/app-service/static/): to bind everything together in one easy package, natively integrated with GitHub CI/CD pipeline
36
36
-[Vue.Js](https://vuejs.org/) as front-end client
37
37
-[Azure Function](https://azure.microsoft.com/en-us/services/functions/) for providing serverless back-end infrastructure
38
-
-[Prisma](https://www.prisma.io/) to interact with the Azure SQL database
39
-
-[TypeScript](https://www.typescriptlang.org/) for the back-end logic
40
38
-[NodeJS](https://nodejs.org/en/) for the back-end logic
39
+
-[TypeScript](https://www.typescriptlang.org/) for the back-end logic
40
+
-[Prisma](https://www.prisma.io/) to interact with the Azure SQL database
41
41
-[Azure SQL](https://azure.microsoft.com/en-us/services/sql-database/) as database to store ToDo data
42
-
-[GitHub Actions](https://github.com/features/actions) to Deploy the full-stack website (thanks to Azure Static WebApps)
42
+
-[GitHub Actions](https://github.com/features/actions) to Deploy the full-stack website (thanks to Azure Static Web Apps)
43
43
44
44
## Implementation Details
45
45
@@ -48,9 +48,41 @@ Folder structure
48
48
-`/api`: the NodeJs Azure Function code used to provide the backend API, called by the Vue.Js client
49
49
-`/client`: the Vue.Js client. Original source code has been taken from official Vue.js sample and adapted to call a REST or GraphQL client instead of using local storage to save and retrieve todos
50
50
51
-
## Local backend development with SQL Server
51
+
## Install the dependencies
52
+
53
+
Make sure you have [Node](https://nodejs.org/en/download/) installed. Since the free tier of Azure Static Web Apps only supports Node 12, it is recommended to use Node 12 for development too.
54
+
55
+
Also install the [Azure Function Core Tools v3](https://www.npmjs.com/package/azure-functions-core-tools):
56
+
57
+
```sh
58
+
npm i -g azure-functions-core-tools@3 --unsafe-perm true
59
+
```
60
+
61
+
Make sure this dependency is not included in the `package.json` as otherwise the generated package will be too big for Azure Static Web Apps free tier (deployed .zip can max 10MB size).
62
+
63
+
Also install the [Azure Static Web Apps CLI](https://github.com/azure/static-web-apps-cli):
64
+
65
+
```sh
66
+
npm install -g @azure/static-web-apps-cli`
67
+
```
68
+
69
+
Now you can install the dependencies, enter the `./api/` folder and install the dependencies:
70
+
71
+
```sh
72
+
npm install
73
+
```
74
+
75
+
and the build the solution (always from in the `./api` folder):
76
+
77
+
```sh
78
+
npm run build
79
+
```
80
+
81
+
## Create the database
82
+
83
+
You have two options. If you only want to experiment locally, you can use SQL Server. If you prefer to use the cloud, you can use Azure SQL.
52
84
53
-
### Start the SQL Server with Docker
85
+
### Option 1 - Start the SQL Server with Docker
54
86
55
87
If you want to develop locally without any dependency on Azure, you can run SQL Server locally using the included [docker-compose.yaml](./docker-compose.yml) file with the following command:
56
88
@@ -66,21 +98,18 @@ Create a `.env` file by copying [.env.template](./api/.env.template) inside the
> **Beginners:** If you are completely new to Azure SQL, no worries! Here's a full playlist that will help you: [Azure SQL for beginners](https://www.youtube.com/playlist?list=PLlrxD0HtieHi5c9-i_Dnxw9vxBY-TqaeN).
70
104
71
-
### Create the Azure SQL database
72
105
73
106
Another option is to use an Azure SQL database also as a development database. If you need to create an Azure SQL database from scratch, an Azure SQL S0 database would be more than fine to run the tests.
74
107
75
108
```
76
109
az sql db create -g <resource-group> -s <server-name> -n todo_prisma --service-objective S0
77
110
```
78
111
79
-
Remember that if you don't have Linux environment where you can run [AZ CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) you can always use the [Cloud Shell](https://docs.microsoft.com/en-us/azure/cloud-shell/quickstart). If you prefer to do everything via the portal, here's a tutorial: [Create an Azure SQL Database single database](https://docs.microsoft.com/en-us/azure/azure-sql/database/single-database-create-quickstart?tabs=azure-portal).
80
-
81
-
If you are completely new to Azure SQL, no worries! Here's a full playlist that will help you: [Azure SQL for beginners](https://www.youtube.com/playlist?list=PLlrxD0HtieHi5c9-i_Dnxw9vxBY-TqaeN).
82
-
83
-
### Define the connection string
112
+
> **Note:**: Remember that if you don't have Linux environment where you can run [AZ CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) you can always use the [Cloud Shell](https://docs.microsoft.com/en-us/azure/cloud-shell/quickstart). If you prefer to do everything via the portal, here's a tutorial: [Create an Azure SQL Database single database](https://docs.microsoft.com/en-us/azure/azure-sql/database/single-database-create-quickstart?tabs=azure-portal).
84
113
85
114
Prisma will connect to the database using the `DATABASE_URL` environment variable which can be defined in the `./api/.env` file.
86
115
@@ -90,19 +119,9 @@ Create a `.env` file by copying [.env.template](./api/.env.template) inside the
- Build the solution (in the `./api` folder): `npm run build`
123
-
- Start the servers (in the sample root folder): `swa start --api ./api`
140
+
You can now work locally.
124
141
125
142
## Running on Azure
126
143
127
144
This is the amazing part of using Azure Static WebApps. Deploying to Azure is completely automated via GitHub actions.
128
145
129
146
1. Fork this repository
130
-
1. Open the Azure Portal
131
-
1. Create a "Static Web App" resource and follow the instruction here: [Building your first static web app in the Azure portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript), but:
132
-
- When asked for GitHub repo details, point to the forked repo you just created
133
-
- Select "main" as branch
134
-
- Select "Custom" in the "Build Presets" dropdown
135
-
- Set `client` as "App location"
136
-
1. Wait for resource creation and GitHub action completion. Once the resource is ready, click on "Go to Resource".
137
-
1. Be patient, now GitHub Action will kick in and deploy the full-stack website. It will take a couple of minutes.
138
-
1. Relax.
139
-
1. Grab some coffee or tea.
140
-
1. Drink it.
141
-
1. Click on "Functions" and you should be able to see the `todo` function listed.
142
-
1. Go to the "Configuration" tab and add the same key and values that you have in your `.env` file you created earlier for local execution.
143
-
1. Go to "Overview" and click on "Browse" to open your website. Done!
144
-
145
-
### Azure Static Web App
147
+
1. Get a [GitHub Token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)
148
+
1. Run `./azure-deploy.sh`. Please note that if this is the first time you run it, it will create an `.env` file in the root folder. Fill the `.env` file. Run the `./azure-deploy.sh` again.
149
+
1. Done! Well, not really, read next.
150
+
151
+
## Fixing generated workflow file
152
+
153
+
The generated workflow file will not work. Even if the CI/CD pipeline will complete successfully, the Azure Static Web App will not work. This is due to how Onyx, the tool the automate the building and the deployment for Static Web Apps, doesn't now how to properly deal with the nuances of Prisma, that generates the client right away. Fixing this issue is quite easy, just add the following enviroment variable to the workflow, in the "Build and Deploy" step:
154
+
155
+
```yaml
156
+
env: # Add environment variables here
157
+
NODE_VERSION: 12
158
+
PRE_BUILD_COMMAND: "npm install -g prisma@2.30.3"
159
+
CUSTOM_BUILD_COMMAND: "npm install @prisma/client && npm run build"
160
+
POST_BUILD_COMMAND: "npm install @prisma/client"
161
+
```
162
+
163
+
Take a look at the template workflow in the `./github/workflow` folder to see how your workflow file should look like.
164
+
165
+
## Running on Azure (yep!)
166
+
167
+
After you have commited the changes to the workflow file, the CI/CD pipeline will run again automatically. Once the pipeline has run, you should have a working website. Go to http://[your-swa-name].azurestaticapps.net, and enjoy!
168
+
169
+
## Azure Static Web App
146
170
147
171
Azure Static Web App supports a Free tier which is absolutely great so that you can try them for free, but of course don't expect great performances. REST API response will be in the 500 msec area. Keep this in mind if you are planning to use them for something different than testing. If you need better performance right now and cannot when for when Azure Static Web App will be out of preview, you can always deploy the REST API using plain Azure Functions where you can have amazing scalability and performance.
0 commit comments