ANGULAR— Stackerblitz to Github to Azure —

Development to Deployment all in a Browser

Prerequisites:

1. Stackerblitz account
2. Github account (Preferable same as 1)
3. Azure account

Step 1 — Create Stackerblitz Angular project

Changes to files:

a. Add file src/tsconfig.app.json with below content

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
  }

b. Add folder src/environments with 2 file

File --> environment.ts
export const environment = {
production: false
};
File --> environment.prod.ts
export const environment = {
production: false
};

c. Add new file src/web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
     </staticContent>
 
      <rewrite>
        <rules>
            <rule name="Angular" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

Step 2— Checkin to github from stackerblitz

Step 3— Create web app service in azure

Step 4— Create azure devops with the git hub repository