Skip to content

Commit f3beb6c

Browse files
jholt456MarkPieszak
jholt456
authored and
MarkPieszak
committed
feat: Upgraded to babel 7, babel loader 8, fortawesome 1.2, webpack 4
* Upgraded to babel 7, babel loader 8, fortawesome 1.2, webpack 4 * Migrate to aspnetcore 2.2 * line endings
1 parent b87d089 commit f3beb6c

File tree

9 files changed

+324
-289
lines changed

9 files changed

+324
-289
lines changed

‎content/.babelrc

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
{
2-
"presets": ["es2015", "stage-2"],
2+
"presets": [
3+
"@babel/preset-env"
4+
],
35
"plugins": [
4-
"transform-runtime",
5-
"transform-async-to-generator"
6+
"@babel/plugin-transform-runtime",
7+
"@babel/plugin-transform-async-to-generator",
8+
"@babel/plugin-syntax-dynamic-import",
9+
"@babel/plugin-syntax-import-meta",
10+
"@babel/plugin-proposal-class-properties",
11+
"@babel/plugin-proposal-json-strings",
12+
[
13+
"@babel/plugin-proposal-decorators",
14+
{
15+
"legacy": true
16+
}
17+
],
18+
"@babel/plugin-proposal-function-sent",
19+
"@babel/plugin-proposal-export-namespace-from",
20+
"@babel/plugin-proposal-numeric-separator",
21+
"@babel/plugin-proposal-throw-expressions"
622
],
723
"comments": false
824
}

‎content/ClientApp/components/fetch-data.vue

Lines changed: 100 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,100 @@
1-
<template>
2-
<div>
3-
<h1>Weather forecast</h1>
4-
5-
<p>This component demonstrates fetching data from the server.</p>
6-
7-
<div v-if="!forecasts" class="text-center">
8-
<p><em>Loading...</em></p>
9-
<h1><icon icon="spinner" pulse/></h1>
10-
</div>
11-
12-
<template v-if="forecasts">
13-
<table class="table">
14-
<thead class="bg-dark text-white">
15-
<tr>
16-
<th>Date</th>
17-
<th>Temp. (C)</th>
18-
<th>Temp. (F)</th>
19-
<th>Summary</th>
20-
</tr>
21-
</thead>
22-
<tbody>
23-
<tr :class="index % 2 == 0 ? 'bg-white' : 'bg-light'" v-for="(forecast, index) in forecasts" :key="index">
24-
<td>{{ forecast.dateFormatted }}</td>
25-
<td>{{ forecast.temperatureC }}</td>
26-
<td>{{ forecast.temperatureF }}</td>
27-
<td>{{ forecast.summary }}</td>
28-
</tr>
29-
</tbody>
30-
</table>
31-
<nav aria-label="...">
32-
<ul class="pagination justify-content-center">
33-
<li :class="'page-item' + (currentPage == 1 ? ' disabled' : '')">
34-
<a class="page-link" href="#" tabindex="-1" @click="loadPage(currentPage - 1)">Previous</a>
35-
</li>
36-
<li :class="'page-item' + (n == currentPage ? ' active' : '')" v-for="(n, index) in totalPages" :key="index">
37-
<a class="page-link" href="#" @click="loadPage(n)">{{n}}</a>
38-
</li>
39-
<li :class="'page-item' + (currentPage < totalPages ? '' : ' disabled')">
40-
<a class="page-link" href="#" @click="loadPage(currentPage + 1)">Next</a>
41-
</li>
42-
</ul>
43-
</nav>
44-
</template>
45-
</div>
46-
</template>
47-
48-
<script>
49-
export default {
50-
computed: {
51-
totalPages: function () {
52-
return Math.ceil(this.total / this.pageSize)
53-
}
54-
},
55-
56-
data () {
57-
return {
58-
forecasts: null,
59-
total: 0,
60-
pageSize: 5,
61-
currentPage: 1
62-
}
63-
},
64-
65-
methods: {
66-
async loadPage (page) {
67-
// ES2017 async/await syntax via babel-plugin-transform-async-to-generator
68-
// TypeScript can also transpile async/await down to ES5
69-
this.currentPage = page
70-
71-
try {
72-
var from = (page - 1) * (this.pageSize)
73-
var to = from + this.pageSize
74-
let response = await this.$http.get(`/api/weather/forecasts?from=${from}&to=${to}`)
75-
console.log(response.data.forecasts)
76-
this.forecasts = response.data.forecasts
77-
this.total = response.data.total
78-
} catch (err) {
79-
window.alert(err)
80-
console.log(err)
81-
}
82-
// Old promise-based approach
83-
// this.$http
84-
// .get('/api/SampleData/WeatherForecasts')
85-
// .then(response => {
86-
// console.log(response.data)
87-
// this.forecasts = response.data
88-
// })
89-
// .catch((error) => console.log(error))*/
90-
}
91-
},
92-
93-
async created () {
94-
this.loadPage(1)
95-
}
96-
}
97-
</script>
98-
99-
<style>
100-
</style>
1+
<template>
2+
<div>
3+
<h1>Weather forecast</h1>
4+
5+
<p>This component demonstrates fetching data from the server.</p>
6+
7+
<div v-if="!forecasts" class="text-center">
8+
<p><em>Loading...</em></p>
9+
<h1><icon icon="spinner" pulse/></h1>
10+
</div>
11+
12+
<template v-if="forecasts">
13+
<table class="table">
14+
<thead class="bg-dark text-white">
15+
<tr>
16+
<th>Date</th>
17+
<th>Temp. (C)</th>
18+
<th>Temp. (F)</th>
19+
<th>Summary</th>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr :class="index % 2 == 0 ? 'bg-white' : 'bg-light'" v-for="(forecast, index) in forecasts" :key="index">
24+
<td>{{ forecast.dateFormatted }}</td>
25+
<td>{{ forecast.temperatureC }}</td>
26+
<td>{{ forecast.temperatureF }}</td>
27+
<td>{{ forecast.summary }}</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
<nav aria-label="...">
32+
<ul class="pagination justify-content-center">
33+
<li :class="'page-item' + (currentPage == 1 ? ' disabled' : '')">
34+
<a class="page-link" href="#" tabindex="-1" @click="loadPage(currentPage - 1)">Previous</a>
35+
</li>
36+
<li :class="'page-item' + (n == currentPage ? ' active' : '')" v-for="(n, index) in totalPages" :key="index">
37+
<a class="page-link" href="#" @click="loadPage(n)">{{n}}</a>
38+
</li>
39+
<li :class="'page-item' + (currentPage < totalPages ? '' : ' disabled')">
40+
<a class="page-link" href="#" @click="loadPage(currentPage + 1)">Next</a>
41+
</li>
42+
</ul>
43+
</nav>
44+
</template>
45+
</div>
46+
</template>
47+
48+
<script>
49+
export default {
50+
computed: {
51+
totalPages: function () {
52+
return Math.ceil(this.total / this.pageSize)
53+
}
54+
},
55+
56+
data () {
57+
return {
58+
forecasts: null,
59+
total: 0,
60+
pageSize: 5,
61+
currentPage: 1
62+
}
63+
},
64+
65+
methods: {
66+
async loadPage (page) {
67+
// ES2017 async/await syntax via babel-plugin-transform-async-to-generator
68+
// TypeScript can also transpile async/await down to ES5
69+
this.currentPage = page
70+
71+
try {
72+
var from = (page - 1) * (this.pageSize)
73+
var to = from + this.pageSize
74+
let response = await this.$http.get(`/api/weather/forecasts?from=${from}&to=${to}`)
75+
console.log(response.data.forecasts)
76+
this.forecasts = response.data.forecasts
77+
this.total = response.data.total
78+
} catch (err) {
79+
window.alert(err)
80+
console.log(err)
81+
}
82+
// Old promise-based approach
83+
// this.$http
84+
// .get('/api/SampleData/WeatherForecasts')
85+
// .then(response => {
86+
// console.log(response.data)
87+
// this.forecasts = response.data
88+
// })
89+
// .catch((error) => console.log(error))*/
90+
}
91+
},
92+
93+
async created () {
94+
this.loadPage(1)
95+
}
96+
}
97+
</script>
98+
99+
<style>
100+
</style>

‎content/ClientApp/icons.js

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import fontawesome from '@fortawesome/fontawesome'
2-
// Official documentation available at: https://github.com/FortAwesome/vue-fontawesome
3-
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
4-
5-
// If not present, it won't be visible within the application. Considering that you
6-
// don't want all the icons for no reason. This is a good way to avoid importing too many
7-
// unnecessary things.
8-
fontawesome.library.add(
9-
require('@fortawesome/fontawesome-free-solid/faEnvelope'),
10-
require('@fortawesome/fontawesome-free-solid/faGraduationCap'),
11-
require('@fortawesome/fontawesome-free-solid/faHome'),
12-
require('@fortawesome/fontawesome-free-solid/faList'),
13-
require('@fortawesome/fontawesome-free-solid/faSpinner'),
14-
// Brands
15-
require('@fortawesome/fontawesome-free-brands/faFontAwesome'),
16-
require('@fortawesome/fontawesome-free-brands/faMicrosoft'),
17-
require('@fortawesome/fontawesome-free-brands/faVuejs')
18-
)
19-
20-
export {
21-
FontAwesomeIcon
22-
}
1+
import { library } from '@fortawesome/fontawesome-svg-core'
2+
// Official documentation available at: https://github.com/FortAwesome/vue-fontawesome
3+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
4+
5+
// If not present, it won't be visible within the application. Considering that you
6+
// don't want all the icons for no reason. This is a good way to avoid importing too many
7+
// unnecessary things.
8+
library.add(
9+
require('@fortawesome/free-solid-svg-icons').faEnvelope,
10+
require('@fortawesome/free-solid-svg-icons').faGraduationCap,
11+
require('@fortawesome/free-solid-svg-icons').faHome,
12+
require('@fortawesome/free-solid-svg-icons').faList,
13+
require('@fortawesome/free-solid-svg-icons').faSpinner,
14+
// Brands
15+
require('@fortawesome/free-brands-svg-icons').faFontAwesome,
16+
require('@fortawesome/free-brands-svg-icons').faMicrosoft,
17+
require('@fortawesome/free-brands-svg-icons').faVuejs
18+
)
19+
20+
export {
21+
FontAwesomeIcon
22+
}

‎content/Dockerfile

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Stage 1 - Restoring & Compiling
2-
FROM microsoft/dotnet:2.1-sdk-alpine3.7 as builder
2+
FROM microsoft/dotnet:2.2-sdk-alpine3.8 as builder
33
WORKDIR /source
44
RUN apk add --update nodejs nodejs-npm
55
COPY *.csproj .
@@ -10,7 +10,7 @@ COPY . .
1010
RUN dotnet publish -c Release -o /app/
1111

1212
# Stage 2 - Creating Image for compiled app
13-
FROM microsoft/dotnet:2.1.1-aspnetcore-runtime-alpine3.7 as baseimage
13+
FROM microsoft/dotnet:2.2-aspnetcore-runtime-alpine3.8 as baseimage
1414
RUN apk add --update nodejs nodejs-npm
1515
WORKDIR /app
1616
COPY --from=builder /app .

‎content/Startup.cs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ public void ConfigureServices(IServiceCollection services)
2121
{
2222
// Add framework services.
2323
services.AddMvc()
24-
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
24+
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
2525

2626
// Simple example with dependency injection for a data provider.
2727
services.AddSingleton<Providers.IWeatherProvider, Providers.WeatherProviderFake>();
@@ -43,8 +43,12 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
4343
else
4444
{
4545
app.UseExceptionHandler("/Home/Error");
46+
47+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
48+
app.UseHsts();
4649
}
4750

51+
app.UseHttpsRedirection();
4852
app.UseStaticFiles();
4953

5054
app.UseMvc(routes =>

‎content/Vue2Spa.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
22
<PropertyGroup>
3-
<TargetFramework>netcoreapp2.1</TargetFramework>
3+
<TargetFramework>netcoreapp2.2</TargetFramework>
44
</PropertyGroup>
55
<ItemGroup>
66
<PackageReference Include="Microsoft.AspNetCore.App" />

0 commit comments

Comments
 (0)