3 | 
4 |
7 |
8 |
9 |
21 |
22 |
32 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/vueapp/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
4 |
7 |
8 |
9 |
21 |
22 |
32 |
--------------------------------------------------------------------------------
/1-container-1-domain/vueapp/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
4 |
7 |
8 |
9 |
21 |
22 |
32 |
--------------------------------------------------------------------------------
/2-containers-1-domain/vueapp/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
4 |
7 |
8 |
9 |
21 |
22 |
32 |
--------------------------------------------------------------------------------
/2-containers-2-domains/vueapp/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
4 |
7 |
8 |
9 |
21 |
22 |
32 |
--------------------------------------------------------------------------------
/0-CLIs/vueapp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "register-service-worker": "^1.6.2",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.8.0",
17 | "@vue/cli-plugin-eslint": "^3.8.0",
18 | "@vue/cli-plugin-pwa": "^3.8.0",
19 | "@vue/cli-service": "^3.8.0",
20 | "@vue/eslint-config-prettier": "^4.0.1",
21 | "babel-eslint": "^10.0.1",
22 | "eslint": "^5.16.0",
23 | "eslint-plugin-vue": "^5.0.0",
24 | "vue-template-compiler": "^2.6.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/vueapp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "register-service-worker": "^1.6.2",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.8.0",
17 | "@vue/cli-plugin-eslint": "^3.8.0",
18 | "@vue/cli-plugin-pwa": "^3.8.0",
19 | "@vue/cli-service": "^3.8.0",
20 | "@vue/eslint-config-prettier": "^4.0.1",
21 | "babel-eslint": "^10.0.1",
22 | "eslint": "^5.16.0",
23 | "eslint-plugin-vue": "^5.0.0",
24 | "vue-template-compiler": "^2.6.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/1-container-1-domain/vueapp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "register-service-worker": "^1.6.2",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.8.0",
17 | "@vue/cli-plugin-eslint": "^3.8.0",
18 | "@vue/cli-plugin-pwa": "^3.8.0",
19 | "@vue/cli-service": "^3.8.0",
20 | "@vue/eslint-config-prettier": "^4.0.1",
21 | "babel-eslint": "^10.0.1",
22 | "eslint": "^5.16.0",
23 | "eslint-plugin-vue": "^5.0.0",
24 | "vue-template-compiler": "^2.6.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/2-containers-1-domain/vueapp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "register-service-worker": "^1.6.2",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.8.0",
17 | "@vue/cli-plugin-eslint": "^3.8.0",
18 | "@vue/cli-plugin-pwa": "^3.8.0",
19 | "@vue/cli-service": "^3.8.0",
20 | "@vue/eslint-config-prettier": "^4.0.1",
21 | "babel-eslint": "^10.0.1",
22 | "eslint": "^5.16.0",
23 | "eslint-plugin-vue": "^5.0.0",
24 | "vue-template-compiler": "^2.6.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/2-containers-2-domains/vueapp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "register-service-worker": "^1.6.2",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.8.0",
17 | "@vue/cli-plugin-eslint": "^3.8.0",
18 | "@vue/cli-plugin-pwa": "^3.8.0",
19 | "@vue/cli-service": "^3.8.0",
20 | "@vue/eslint-config-prettier": "^4.0.1",
21 | "babel-eslint": "^10.0.1",
22 | "eslint": "^5.16.0",
23 | "eslint-plugin-vue": "^5.0.0",
24 | "vue-template-compiler": "^2.6.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/0-CLIs/NetApi/Program.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Hosting;
6 | using Microsoft.Extensions.Configuration;
7 | using Microsoft.Extensions.Hosting;
8 | using Microsoft.Extensions.Logging;
9 |
10 | namespace NetApi
11 | {
12 | public class Program
13 | {
14 | public static void Main(string[] args)
15 | {
16 | CreateHostBuilder(args).Build().Run();
17 | }
18 |
19 | public static IHostBuilder CreateHostBuilder(string[] args) =>
20 | Host.CreateDefaultBuilder(args)
21 | .ConfigureWebHostDefaults(webBuilder =>
22 | {
23 | webBuilder.UseStartup
4 |
3 |
12 |
13 |
14 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/vueapp/src/components/ApiValues.vue:
--------------------------------------------------------------------------------
1 |
2 | API Values
4 |5 | Hello from 6 | 7 | {{ val }} 8 | 9 |
10 |{{ exception }}
11 |
3 |
12 |
13 |
14 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/1-container-1-domain/vueapp/src/components/ApiValues.vue:
--------------------------------------------------------------------------------
1 |
2 | API Values
4 |5 | Hello from 6 | 7 | {{ val }} 8 | 9 |
10 |{{ exception }}
11 |
3 |
12 |
13 |
14 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/2-containers-1-domain/vueapp/src/components/ApiValues.vue:
--------------------------------------------------------------------------------
1 |
2 | API Values
4 |5 | Hello from 6 | 7 | {{ val }} 8 | 9 |
10 |{{ exception }}
11 |
3 |
12 |
13 |
14 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/ClientApp/src/components/Counter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export class Counter extends Component {
4 | static displayName = Counter.name;
5 |
6 | constructor (props) {
7 | super(props);
8 | this.state = { currentCount: 0 };
9 | this.incrementCounter = this.incrementCounter.bind(this);
10 | }
11 |
12 | incrementCounter () {
13 | this.setState({
14 | currentCount: this.state.currentCount + 1
15 | });
16 | }
17 |
18 | render () {
19 | return (
20 | API Values
4 |5 | Hello from 6 | 7 | {{ val }} 8 | 9 |
10 |{{ exception }}
11 |
21 |
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/2-containers-2-domains/vueapp/src/components/ApiValues.vue:
--------------------------------------------------------------------------------
1 |
2 | Counter
22 | 23 |This is a simple example of a React component.
24 | 25 |Current count: {this.state.currentCount}
26 | 27 | 28 |
3 |
12 |
13 |
14 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/0-CLIs/NetApi/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:41323",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "IIS Express": {
13 | "commandName": "IISExpress",
14 | "launchBrowser": true,
15 | "launchUrl": "api/values",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "NetApi": {
21 | "commandName": "Project",
22 | "launchBrowser": true,
23 | "launchUrl": "api/values",
24 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
25 | "environmentVariables": {
26 | "ASPNETCORE_ENVIRONMENT": "Development"
27 | }
28 | }
29 | }
30 | }
--------------------------------------------------------------------------------
/1-container-1-domain/NetApi/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:41323",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "IIS Express": {
13 | "commandName": "IISExpress",
14 | "launchBrowser": true,
15 | "launchUrl": "api/values",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "NetApi": {
21 | "commandName": "Project",
22 | "launchBrowser": true,
23 | "launchUrl": "api/values",
24 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
25 | "environmentVariables": {
26 | "ASPNETCORE_ENVIRONMENT": "Development"
27 | }
28 | }
29 | }
30 | }
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/NetApi/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:41323",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "IIS Express": {
13 | "commandName": "IISExpress",
14 | "launchBrowser": true,
15 | "launchUrl": "api/values",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "NetApi": {
21 | "commandName": "Project",
22 | "launchBrowser": true,
23 | "launchUrl": "api/values",
24 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
25 | "environmentVariables": {
26 | "ASPNETCORE_ENVIRONMENT": "Development"
27 | }
28 | }
29 | }
30 | }
--------------------------------------------------------------------------------
/2-containers-1-domain/NetApi/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:41323",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "IIS Express": {
13 | "commandName": "IISExpress",
14 | "launchBrowser": true,
15 | "launchUrl": "api/values",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "NetApi": {
21 | "commandName": "Project",
22 | "launchBrowser": true,
23 | "launchUrl": "api/values",
24 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
25 | "environmentVariables": {
26 | "ASPNETCORE_ENVIRONMENT": "Development"
27 | }
28 | }
29 | }
30 | }
--------------------------------------------------------------------------------
/2-containers-2-domains/NetApi/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:41323",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "IIS Express": {
13 | "commandName": "IISExpress",
14 | "launchBrowser": true,
15 | "launchUrl": "api/values",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "NetApi": {
21 | "commandName": "Project",
22 | "launchBrowser": true,
23 | "launchUrl": "api/values",
24 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
25 | "environmentVariables": {
26 | "ASPNETCORE_ENVIRONMENT": "Development",
27 | "CORS_DOMAIN": "http://localhost:8080"
28 | }
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/Pages/Error.cshtml:
--------------------------------------------------------------------------------
1 | @page
2 | @model ErrorModel
3 | @{
4 | ViewData["Title"] = "Error";
5 | }
6 |
7 | API Values
4 |5 | Hello from 6 | 7 | {{ val }} 8 | 9 |
10 |{{ exception }}
11 |Error.
8 |An error occurred while processing your request.
9 | 10 | @if (Model.ShowRequestId) 11 | { 12 |
13 | Request ID: @Model.RequestId
14 |
Development Mode
18 |19 | Swapping to the Development environment displays detailed information about the error that occurred. 20 |
21 |22 | The Development environment shouldn't be enabled for deployed applications. 23 | It can result in displaying sensitive information from exceptions to end users. 24 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 25 | and restarting the app. 26 |
27 | -------------------------------------------------------------------------------- /1-container-1-domain/Dockerfile: -------------------------------------------------------------------------------- 1 | # build .NET app: 2 | FROM mcr.microsoft.com/dotnet/core/sdk:3.0-alpine as buildnet 3 | 4 | WORKDIR /src 5 | 6 | COPY NetApi/NetApi.csproj . 7 | RUN dotnet restore 8 | 9 | COPY NetApi . 10 | RUN dotnet build -c Release 11 | 12 | # RUN dotnet test ... 13 | 14 | RUN dotnet publish -c Release -o /dist 15 | 16 | 17 | # build Vue app: 18 | FROM node:alpine as buildvue 19 | 20 | WORKDIR /src 21 | 22 | COPY vueapp/package.json . 23 | RUN npm install 24 | 25 | # webpack build 26 | COPY vueapp . 27 | RUN npm run build 28 | 29 | 30 | # Copy results from both places into production container: 31 | FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-alpine 32 | 33 | WORKDIR /app 34 | 35 | ENV ASPNETCORE_ENVIRONMENT Production 36 | ENV ASPNETCORE_URLS http://+:5000 37 | EXPOSE 5000 38 | 39 | # copy .net content 40 | COPY --from=buildnet /dist . 41 | # copy vue content into .net's static files folder: 42 | COPY --from=buildvue /src/dist /app/wwwroot 43 | 44 | CMD ["dotnet", "NetApi.dll"] 45 | -------------------------------------------------------------------------------- /0-CLIs/README.md: -------------------------------------------------------------------------------- 1 | Create the Apps 2 | =============== 3 | 4 | The first step is to create the apps using each product's CLI: 5 | 6 | 1. Download .NET Core SDK from https://dotnet.microsoft.com/download/dotnet-core 7 | 8 | 2. Download Vue.js CLI from NPM using `npm` or `yarn`: 9 | 10 | `npm install -g @vue/cli` 11 | 12 | Install Node from https://nodejs.org/ if needed. 13 | 14 | 3. Scaffold the .NET project: 15 | 16 | `dotnet new webapi -n NetApi` 17 | 18 | 4. Scaffold the Vue app using the Vue cli: 19 | 20 | `vue create vueapp` 21 | 22 | This will walk you through a wizard allowing you to pick your favorite options. 23 | 24 | 5. To call the backend, we added `src/components/ApiValues.vue`, referenced it from `src/App.vue`, and created `vue.config.js` to proxy requests to the back-end. 25 | 26 | 27 | Results 28 | ------- 29 | 30 | The contents of this folder are the results of doing these steps. 31 | 32 | We'll copy this content into each other scenario as we build `Dockerfile`s for each technique. 33 | -------------------------------------------------------------------------------- /0-CLIs/vueapp/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /0-Dockerfiles-for-each/vueapp/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /1-container-1-domain/vueapp/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /2-containers-1-domain/vueapp/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /2-containers-2-domains/vueapp/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /server-rendered-spa/README.md: -------------------------------------------------------------------------------- 1 | Server-rendered SPA 2 | =================== 3 | 4 | Server-rendering produces the SPA's first render cycle on the server, and ships this customized html to the browser. The SPA boots up on the browser, and continues the interactions from here. 5 | 6 | 7 | Technique 8 | --------- 9 | 10 | Inside Visual Studio, choose File -> New -> ASP.NET Core Website, then choose the Angular or React template. (Sadly no Vue template.) It uses the same "host both front-end and back-end in one site" solution we saw in chapter 4. In addition, it includes server-rendered content. Check the "Add Docker Support" check-box in the new project dialog, and it'll scaffold out the Dockerfile too. 11 | 12 | 13 | Results 14 | ------- 15 | 16 | The SPA page is first rendered on the server, producing great SEO-worthy pages on first paint. Then the SPA boots up and continues the interaction. This is great when Search Engine Optimization is key, and works well for users with JavaScript disabled. It requires a server-platform that supports this though (usually Node.js), and generally strays far from the SPA's CLI tools. 17 | -------------------------------------------------------------------------------- /0-CLIs/NetApi/Controllers/ValuesController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore.Mvc; 6 | 7 | namespace NetApi.Controllers 8 | { 9 | [Route("api/[controller]")] 10 | [ApiController] 11 | public class ValuesController : ControllerBase 12 | { 13 | // GET api/values 14 | [HttpGet] 15 | public ActionResult| Date | 21 |Temp. (C) | 22 |Temp. (F) | 23 |Summary | 24 |
|---|---|---|---|
| {forecast.dateFormatted} | 30 |{forecast.temperatureC} | 31 |{forecast.temperatureF} | 32 |{forecast.summary} | 33 |
Loading...
43 | : FetchData.renderForecastsTable(this.state.forecasts); 44 | 45 | return ( 46 |
47 |
51 | );
52 | }
53 |
54 | async populateWeatherData() {
55 | const response = await fetch('api/SampleData/WeatherForecasts');
56 | const data = await response.json();
57 | this.setState({ forecasts: data, loading: false });
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/ClientApp/src/components/NavMenu.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
3 | import { Link } from 'react-router-dom';
4 | import './NavMenu.css';
5 |
6 | export class NavMenu extends Component {
7 | static displayName = NavMenu.name;
8 |
9 | constructor (props) {
10 | super(props);
11 |
12 | this.toggleNavbar = this.toggleNavbar.bind(this);
13 | this.state = {
14 | collapsed: true
15 | };
16 | }
17 |
18 | toggleNavbar () {
19 | this.setState({
20 | collapsed: !this.state.collapsed
21 | });
22 | }
23 |
24 | render () {
25 | return (
26 | Weather forecast
48 |This component demonstrates fetching data from the server.
49 | {contents} 50 |-
33 |
9 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/0-CLIs/NetApi/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Hosting;
7 | using Microsoft.AspNetCore.HttpsPolicy;
8 | using Microsoft.AspNetCore.Mvc;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using Microsoft.Extensions.Logging;
13 |
14 | namespace NetApi
15 | {
16 | public class Startup
17 | {
18 | public Startup(IConfiguration configuration)
19 | {
20 | Configuration = configuration;
21 | }
22 |
23 | public IConfiguration Configuration { get; }
24 |
25 | // This method gets called by the runtime. Use this method to add services to the container.
26 | public void ConfigureServices(IServiceCollection services)
27 | {
28 | services.AddControllers()
29 | .AddNewtonsoftJson();
30 | }
31 |
32 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
33 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
34 | {
35 | if (env.IsDevelopment())
36 | {
37 | app.UseDeveloperExceptionPage();
38 | }
39 | else
40 | {
41 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
42 | app.UseHsts();
43 | }
44 |
45 | app.UseHttpsRedirection();
46 |
47 | app.UseRouting();
48 |
49 | app.UseAuthorization();
50 |
51 | app.UseEndpoints(endpoints =>
52 | {
53 | endpoints.MapControllers();
54 | });
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/NetApi/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Hosting;
7 | using Microsoft.AspNetCore.HttpsPolicy;
8 | using Microsoft.AspNetCore.Mvc;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using Microsoft.Extensions.Logging;
13 |
14 | namespace NetApi
15 | {
16 | public class Startup
17 | {
18 | public Startup(IConfiguration configuration)
19 | {
20 | Configuration = configuration;
21 | }
22 |
23 | public IConfiguration Configuration { get; }
24 |
25 | // This method gets called by the runtime. Use this method to add services to the container.
26 | public void ConfigureServices(IServiceCollection services)
27 | {
28 | services.AddControllers()
29 | .AddNewtonsoftJson();
30 | }
31 |
32 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
33 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
34 | {
35 | if (env.IsDevelopment())
36 | {
37 | app.UseDeveloperExceptionPage();
38 | }
39 | else
40 | {
41 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
42 | app.UseHsts();
43 | }
44 |
45 | app.UseHttpsRedirection();
46 |
47 | app.UseRouting();
48 |
49 | app.UseAuthorization();
50 |
51 | app.UseEndpoints(endpoints =>
52 | {
53 | endpoints.MapControllers();
54 | });
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/2-containers-1-domain/NetApi/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Hosting;
7 | using Microsoft.AspNetCore.HttpsPolicy;
8 | using Microsoft.AspNetCore.Mvc;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using Microsoft.Extensions.Logging;
13 |
14 | namespace NetApi
15 | {
16 | public class Startup
17 | {
18 | public Startup(IConfiguration configuration)
19 | {
20 | Configuration = configuration;
21 | }
22 |
23 | public IConfiguration Configuration { get; }
24 |
25 | // This method gets called by the runtime. Use this method to add services to the container.
26 | public void ConfigureServices(IServiceCollection services)
27 | {
28 | services.AddControllers()
29 | .AddNewtonsoftJson();
30 | }
31 |
32 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
33 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
34 | {
35 | if (env.IsDevelopment())
36 | {
37 | app.UseDeveloperExceptionPage();
38 | }
39 | else
40 | {
41 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
42 | app.UseHsts();
43 | }
44 |
45 | app.UseHttpsRedirection();
46 |
47 | app.UseRouting();
48 |
49 | app.UseAuthorization();
50 |
51 | app.UseEndpoints(endpoints =>
52 | {
53 | endpoints.MapControllers();
54 | });
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/1-container-1-domain/README.md:
--------------------------------------------------------------------------------
1 | 1 Container, 1 Domain
2 | =====================
3 |
4 | In this technique, both front-end and back-end run from the same container built from a single `Dockerfile`. We can't scale them separately, but we deploy changes in either simultaniously.
5 |
6 |
7 | New content since Chapter 0
8 | ---------------------------
9 |
10 | 1. `NetApi/Startup.cs` adds `DefaultFiles` and `StaticFiles` references so .NET can serve the JavaScript, CSS, and images.
11 |
12 | 2. `NetApi/Controllers/SpaController.cs` serves the `index.html` page for each route in the Vue app.
13 |
14 | 3. `vueapp/vue.config.js` is for development only, and hooks up Webpack development server. It looks for requests to `/api/any/path/here` and forwards it to the backend.
15 |
16 | 4. `vueapp/nginx.conf` is gone. We use .NET's Kestrel web server for that now.
17 |
18 | 5. `Dockerfile` at the root of the solution replaces the files in each project. This single file builds stages for each application.
19 |
20 |
21 | Use it: dev
22 | -----------
23 |
24 | 1. Run the backend outside the container:
25 |
26 | ```
27 | cd NetApi
28 | dotnet run
29 | ```
30 |
31 | 2. Run the frontend outside the container:
32 |
33 | ```
34 | cd vueapp
35 | npm install
36 | npm run serve
37 | ```
38 |
39 | 3. Open the browser to the frontend:
40 |
41 | `http://localhost:8080/`
42 |
43 |
44 | Use it: production
45 | ------------------
46 |
47 | 1. Build and run the single container:
48 |
49 | ```
50 | docker build -t spa-and-api:1c1d .
51 | docker run -p 5000:5000 -d spa-and-api:1c1d
52 | ```
53 |
54 | 2. Launch your browser to the app:
55 |
56 | `http://localhost:5000/`
57 |
58 |
59 | Results
60 | -------
61 |
62 | In dev, we leverage Webpack Dev Server to proxy through the front-end to the back-end. In Production, we deploy the SPA's static files into the back-end's static files directory (`public` or `wwwroot` or similar).
63 |
--------------------------------------------------------------------------------
/1-container-1-domain/NetApi/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Hosting;
7 | using Microsoft.AspNetCore.HttpsPolicy;
8 | using Microsoft.AspNetCore.Mvc;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using Microsoft.Extensions.Logging;
13 |
14 | namespace NetApi
15 | {
16 | public class Startup
17 | {
18 | public Startup(IConfiguration configuration)
19 | {
20 | Configuration = configuration;
21 | }
22 |
23 | public IConfiguration Configuration { get; }
24 |
25 | // This method gets called by the runtime. Use this method to add services to the container.
26 | public void ConfigureServices(IServiceCollection services)
27 | {
28 | services.AddControllers()
29 | .AddNewtonsoftJson();
30 | }
31 |
32 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
33 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
34 | {
35 | if (env.IsDevelopment())
36 | {
37 | app.UseDeveloperExceptionPage();
38 | }
39 | else
40 | {
41 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
42 | app.UseHsts();
43 | }
44 |
45 | app.UseHttpsRedirection();
46 |
47 | app.UseDefaultFiles();
48 | app.UseStaticFiles();
49 |
50 | app.UseRouting();
51 |
52 | app.UseAuthorization();
53 |
54 | app.UseEndpoints(endpoints =>
55 | {
56 | endpoints.MapControllers();
57 | });
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/Startup.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Builder;
2 | using Microsoft.AspNetCore.Hosting;
3 | using Microsoft.AspNetCore.HttpsPolicy;
4 | using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
5 | using Microsoft.Extensions.Configuration;
6 | using Microsoft.Extensions.DependencyInjection;
7 | using Microsoft.Extensions.Hosting;
8 |
9 | namespace WebApplication1
10 | {
11 | public class Startup
12 | {
13 | public Startup(IConfiguration configuration)
14 | {
15 | Configuration = configuration;
16 | }
17 |
18 | public IConfiguration Configuration { get; }
19 |
20 | // This method gets called by the runtime. Use this method to add services to the container.
21 | public void ConfigureServices(IServiceCollection services)
22 | {
23 | services.AddMvc(options => options.EnableEndpointRouting = false)
24 | .AddNewtonsoftJson();
25 |
26 | // In production, the React files will be served from this directory
27 | services.AddSpaStaticFiles(configuration =>
28 | {
29 | configuration.RootPath = "ClientApp/build";
30 | });
31 | }
32 |
33 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
34 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
35 | {
36 | if (env.IsDevelopment())
37 | {
38 | app.UseDeveloperExceptionPage();
39 | }
40 | else
41 | {
42 | app.UseExceptionHandler("/Error");
43 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
44 | app.UseHsts();
45 | }
46 |
47 | app.UseHttpsRedirection();
48 | app.UseStaticFiles();
49 | app.UseSpaStaticFiles();
50 |
51 | app.UseMvc(routes =>
52 | {
53 | routes.MapRoute(
54 | name: "default",
55 | template: "{controller}/{action=Index}/{id?}");
56 | });
57 |
58 | app.UseSpa(spa =>
59 | {
60 | spa.Options.SourcePath = "ClientApp";
61 |
62 | if (env.IsDevelopment())
63 | {
64 | spa.UseReactDevelopmentServer(npmScript: "start");
65 | }
66 | });
67 | }
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/2-containers-2-domains/NetApi/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Hosting;
7 | using Microsoft.AspNetCore.HttpsPolicy;
8 | using Microsoft.AspNetCore.Mvc;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using Microsoft.Extensions.Logging;
13 |
14 | namespace NetApi
15 | {
16 | public class Startup
17 | {
18 |
19 | public Startup(IConfiguration configuration)
20 | {
21 | Configuration = configuration;
22 | }
23 |
24 | public IConfiguration Configuration { get; }
25 |
26 | // This method gets called by the runtime. Use this method to add services to the container.
27 | public void ConfigureServices(IServiceCollection services)
28 | {
29 | // CORS configuration for ASP.NET Core:
30 | // https://docs.microsoft.com/en-us/aspnet/core/security/cors
31 | // must not have a trailing slash
32 | string CORS_DOMAIN = Configuration.GetValueHello, world!
10 |Welcome to your new single-page application, built with:
11 |-
12 |
- ASP.NET Core and C# for cross-platform server-side code 13 |
- React for client-side code 14 |
- Bootstrap for layout and styling 15 |
To help you get started, we have also set up:
17 |-
18 |
- Client-side navigation. For example, click Counter then Back to return here. 19 |
- Development server integration. In development mode, the development server from
create-react-appruns in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.
20 | - Efficient production builds. In production mode, development-time features are disabled, and your
dotnet publishconfiguration produces minified, efficiently bundled JavaScript files.
21 |
The ClientApp subdirectory is a standard React application based on the create-react-app template. If you open a command prompt in that directory, you can run npm commands such as npm test or npm install.
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/vueapp/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/1-container-1-domain/vueapp/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/2-containers-1-domain/vueapp/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/2-containers-2-domains/vueapp/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/ClientApp/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register () {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 | } else {
39 | // Is not local host. Just register service worker
40 | registerValidSW(swUrl);
41 | }
42 | });
43 | }
44 | }
45 |
46 | function registerValidSW (swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing;
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.');
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.');
65 | }
66 | }
67 | };
68 | };
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error);
72 | });
73 | }
74 |
75 | function checkValidServiceWorker (swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload();
88 | });
89 | });
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl);
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | );
99 | });
100 | }
101 |
102 | export function unregister () {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister();
106 | });
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/server-rendered-spa/WebApplication1/.gitignore:
--------------------------------------------------------------------------------
1 | ## Ignore Visual Studio temporary files, build results, and
2 | ## files generated by popular Visual Studio add-ons.
3 |
4 | # User-specific files
5 | *.suo
6 | *.user
7 | *.userosscache
8 | *.sln.docstates
9 |
10 | # User-specific files (MonoDevelop/Xamarin Studio)
11 | *.userprefs
12 |
13 | # Build results
14 | [Dd]ebug/
15 | [Dd]ebugPublic/
16 | [Rr]elease/
17 | [Rr]eleases/
18 | x64/
19 | x86/
20 | build/
21 | bld/
22 | bin/
23 | Bin/
24 | obj/
25 | Obj/
26 |
27 | # Visual Studio 2015 cache/options directory
28 | .vs/
29 | /wwwroot/dist/
30 |
31 | # MSTest test Results
32 | [Tt]est[Rr]esult*/
33 | [Bb]uild[Ll]og.*
34 |
35 | # NUNIT
36 | *.VisualState.xml
37 | TestResult.xml
38 |
39 | # Build Results of an ATL Project
40 | [Dd]ebugPS/
41 | [Rr]eleasePS/
42 | dlldata.c
43 |
44 | *_i.c
45 | *_p.c
46 | *_i.h
47 | *.ilk
48 | *.meta
49 | *.obj
50 | *.pch
51 | *.pdb
52 | *.pgc
53 | *.pgd
54 | *.rsp
55 | *.sbr
56 | *.tlb
57 | *.tli
58 | *.tlh
59 | *.tmp
60 | *.tmp_proj
61 | *.log
62 | *.vspscc
63 | *.vssscc
64 | .builds
65 | *.pidb
66 | *.svclog
67 | *.scc
68 |
69 | # Chutzpah Test files
70 | _Chutzpah*
71 |
72 | # Visual C++ cache files
73 | ipch/
74 | *.aps
75 | *.ncb
76 | *.opendb
77 | *.opensdf
78 | *.sdf
79 | *.cachefile
80 |
81 | # Visual Studio profiler
82 | *.psess
83 | *.vsp
84 | *.vspx
85 | *.sap
86 |
87 | # TFS 2012 Local Workspace
88 | $tf/
89 |
90 | # Guidance Automation Toolkit
91 | *.gpState
92 |
93 | # ReSharper is a .NET coding add-in
94 | _ReSharper*/
95 | *.[Rr]e[Ss]harper
96 | *.DotSettings.user
97 |
98 | # JustCode is a .NET coding add-in
99 | .JustCode
100 |
101 | # TeamCity is a build add-in
102 | _TeamCity*
103 |
104 | # DotCover is a Code Coverage Tool
105 | *.dotCover
106 |
107 | # NCrunch
108 | _NCrunch_*
109 | .*crunch*.local.xml
110 | nCrunchTemp_*
111 |
112 | # MightyMoose
113 | *.mm.*
114 | AutoTest.Net/
115 |
116 | # Web workbench (sass)
117 | .sass-cache/
118 |
119 | # Installshield output folder
120 | [Ee]xpress/
121 |
122 | # DocProject is a documentation generator add-in
123 | DocProject/buildhelp/
124 | DocProject/Help/*.HxT
125 | DocProject/Help/*.HxC
126 | DocProject/Help/*.hhc
127 | DocProject/Help/*.hhk
128 | DocProject/Help/*.hhp
129 | DocProject/Help/Html2
130 | DocProject/Help/html
131 |
132 | # Click-Once directory
133 | publish/
134 |
135 | # Publish Web Output
136 | *.[Pp]ublish.xml
137 | *.azurePubxml
138 | # TODO: Comment the next line if you want to checkin your web deploy settings
139 | # but database connection strings (with potential passwords) will be unencrypted
140 | *.pubxml
141 | *.publishproj
142 |
143 | # NuGet Packages
144 | *.nupkg
145 | # The packages folder can be ignored because of Package Restore
146 | **/packages/*
147 | # except build/, which is used as an MSBuild target.
148 | !**/packages/build/
149 | # Uncomment if necessary however generally it will be regenerated when needed
150 | #!**/packages/repositories.config
151 |
152 | # Microsoft Azure Build Output
153 | csx/
154 | *.build.csdef
155 |
156 | # Microsoft Azure Emulator
157 | ecf/
158 | rcf/
159 |
160 | # Microsoft Azure ApplicationInsights config file
161 | ApplicationInsights.config
162 |
163 | # Windows Store app package directory
164 | AppPackages/
165 | BundleArtifacts/
166 |
167 | # Visual Studio cache files
168 | # files ending in .cache can be ignored
169 | *.[Cc]ache
170 | # but keep track of directories ending in .cache
171 | !*.[Cc]ache/
172 |
173 | # Others
174 | ClientBin/
175 | ~$*
176 | *~
177 | *.dbmdl
178 | *.dbproj.schemaview
179 | *.pfx
180 | *.publishsettings
181 | orleans.codegen.cs
182 |
183 | /node_modules
184 |
185 | # RIA/Silverlight projects
186 | Generated_Code/
187 |
188 | # Backup & report files from converting an old project file
189 | # to a newer Visual Studio version. Backup files are not needed,
190 | # because we have git ;-)
191 | _UpgradeReport_Files/
192 | Backup*/
193 | UpgradeLog*.XML
194 | UpgradeLog*.htm
195 |
196 | # SQL Server files
197 | *.mdf
198 | *.ldf
199 |
200 | # Business Intelligence projects
201 | *.rdl.data
202 | *.bim.layout
203 | *.bim_*.settings
204 |
205 | # Microsoft Fakes
206 | FakesAssemblies/
207 |
208 | # GhostDoc plugin setting file
209 | *.GhostDoc.xml
210 |
211 | # Node.js Tools for Visual Studio
212 | .ntvs_analysis.dat
213 |
214 | # Visual Studio 6 build log
215 | *.plg
216 |
217 | # Visual Studio 6 workspace options file
218 | *.opt
219 |
220 | # Visual Studio LightSwitch build output
221 | **/*.HTMLClient/GeneratedArtifacts
222 | **/*.DesktopClient/GeneratedArtifacts
223 | **/*.DesktopClient/ModelManifest.xml
224 | **/*.Server/GeneratedArtifacts
225 | **/*.Server/ModelManifest.xml
226 | _Pvt_Extensions
227 |
228 | # Paket dependency manager
229 | .paket/paket.exe
230 |
231 | # FAKE - F# Make
232 | .fake/
233 |
--------------------------------------------------------------------------------
/0-CLIs/vueapp/public/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
150 |
--------------------------------------------------------------------------------
/0-Dockerfiles-for-each/vueapp/public/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
150 |
--------------------------------------------------------------------------------
/1-container-1-domain/vueapp/public/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
150 |
--------------------------------------------------------------------------------
/2-containers-1-domain/vueapp/public/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
150 |
--------------------------------------------------------------------------------
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |