Post

Html/Css/Js.- Configure/Init projects

Posted
By Jorge Levy
1 min read
Html/Css/Js.- Configure/Init projects

Html/Css/Js snippets

Vanilla

1
2
3

mkdir swa-vanilla
cd swa-vanilla
New-Item -Path . -Name "index.html"

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla JavaScript App</title>
</head>
 
<body>
    <main>
        <h1>Vanilla JavaScript App</h1>
        <p>Loading content from the API: <b id="apiresponse">...</b></p>
    </main>
 
    <script>
        (async function () {
            let response = await fetch(`/api/message`);
            let data = await response.text();
            console.log(data);
            document.querySelector('#apiresponse').textContent = data;
        }())
    </script>
</body>
 
</html>

Angular

https://angular.io/guide/setup-local

1
2
3

ng new my-app --package-manager pnpm
cd my-app
ng serve --open

React

https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

1
2
3

npx create-react-app my-app
cd my-app
npm start

Azure Functions

https://docs.microsoft.com/en-us/azure/azure-functions/functions-core-tools-reference?tabs=v2#func-init

1
2
3
4

func init 'api' --worker-runtime dotnet-isolated --target-framework net7.0
cd api
func new --name HttpExample --template "HTTP trigger" --authlevel "anonymous"
func start

Vite

<https://vitejs.dev/guide/?

1
2
3
4

npm create vite@latest
cd [vite-project]
npm install
npm run dev

Vue.js

https://vuejs.org/guide/quick-start.html

1
2

npm create vue@latest
...

SWA CLI

https://github.com/Azure/static-web-apps-cli / https://azure.github.io/static-web-apps-cli/

1
2
3
4
5
6

swa
npx @azure/static-web-apps-cli init
swa start

swa login --tenant-id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx --subscription-id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
swa deploy --env production --deployment-token xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxxxxx
Html/Css/Js
html java script angular react azure functions static web apps
This post is licensed under CC BY 4.0 by the author.