Skip to content

Commit 6c753e9

Browse files
dickydicky
dicky
authored and
dicky
committed
Documentation update.
1 parent 363ed12 commit 6c753e9

4 files changed

Lines changed: 347 additions & 19 deletions

File tree

‎Demo/Vue/HelloWorld.WebPack/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"build": "webpack"
66
},
77
"dependencies": {
8-
"@aspnet/signalr": "~1.0.4",
8+
"dotnetify": "~3.2.0",
99
"vue": "~2.5.17"
1010
},
1111
"devDependencies": {

‎Demo/Vue/HelloWorld.WebPack/src/HelloWorld.vue‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
21
<template>
3-
<div>
4-
<p>{{Greetings}}</p>
5-
<p>Server time is: {{ServerTime}}</p>
6-
</div>
2+
<div>
3+
<p>{{Greetings}}</p>
4+
<p>Server time is: {{ServerTime}}</p>
5+
</div>
76
</template>
87

98
<script>
10-
import dotnetify from '../wwwroot/dist/dotnetify-vue';
9+
import dotnetify from 'dotnetify/vue';
1110
1211
export default {
13-
name: 'HelloWorld',
14-
created: function () {
15-
this.vm = dotnetify.vue.connect("HelloWorld", this);
16-
},
17-
destroyed: function () {
18-
this.vm.$destroy();
19-
},
20-
data: function () {
21-
return { Greetings: '', ServerTime: '' }
22-
}
12+
name: 'HelloWorld',
13+
created: function () {
14+
this.vm = dotnetify.vue.connect("HelloWorld", this);
15+
},
16+
destroyed: function () {
17+
this.vm.$destroy();
18+
},
19+
data: function () {
20+
return { Greetings: '', ServerTime: '' }
21+
}
2322
}
2423
</script>

‎DevApp.ViewModels/Docs/Vue/FromScratchScriptTag.md‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,122 @@
11
## From Scratch with .NET Core CLI and Script Tag
22

3-
__Coming Soon!__
3+
The following steps will create a simple real-time Hello World ASP.NET Core app using the .NET Core CLI, and use only script tags to include libraries from CDN locations.
4+
5+
Prerequisites:
6+
7+
- .NET Core 2.1 SDK.
8+
<br/>
9+
10+
##### Create Project
11+
12+
From the command line, run the following:
13+
```js
14+
dotnet new web -o HelloWorld
15+
cd HelloWorld
16+
dotnet add package DotNetify.SignalR
17+
```
18+
<br/>
19+
20+
##### Configure Startup
21+
22+
Open _Startup.cs_ file and replace the content with the following:
23+
```csharp
24+
using System.IO;
25+
using System.Collections.Generic;
26+
using Microsoft.AspNetCore.Builder;
27+
using Microsoft.AspNetCore.Hosting;
28+
using Microsoft.AspNetCore.Http;
29+
using Microsoft.Extensions.DependencyInjection;
30+
using DotNetify;
31+
32+
namespace HelloWorld
33+
{
34+
public class Startup
35+
{
36+
public void ConfigureServices(IServiceCollection services)
37+
{
38+
services.AddMemoryCache();
39+
services.AddSignalR();
40+
services.AddDotNetify();
41+
}
42+
43+
public void Configure(IApplicationBuilder app)
44+
{
45+
app.UseWebSockets();
46+
app.UseSignalR(routes => routes.MapDotNetifyHub());
47+
app.UseDotNetify();
48+
49+
app.UseStaticFiles();
50+
app.Run(async (context) =>
51+
{
52+
using (var reader = new StreamReader(File.OpenRead("wwwroot/index.html")))
53+
await context.Response.WriteAsync(reader.ReadToEnd());
54+
});
55+
}
56+
}
57+
}
58+
```
59+
<br/>
60+
61+
62+
##### Add Index Page
63+
64+
Add a new file _wwwroot/index.html_ with the following content:
65+
```html
66+
<html>
67+
<head>
68+
<title>DotNetify</title>
69+
<meta charset="utf-8">
70+
<meta name="viewport" content="initial-scale=1, width=device-width" />
71+
</head>
72+
<body>
73+
<div id="App"></div>
74+
75+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
76+
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1/dist/browser/signalr.min.js"></script>
77+
<script src="https://unpkg.com/dotnetify@3/dist/dotnetify-vue.min.js"></script>
78+
79+
<script>
80+
new Vue({
81+
el: '#App',
82+
created: function() { dotnetify.vue.connect("HelloWorld", this) },
83+
data: { Greetings: '', ServerTime: '' }
84+
})
85+
</script>
86+
</body>
87+
</html>
88+
```
89+
<br/>
90+
91+
Add a new file _HelloWorld.cs_ with the following content:
92+
```csharp
93+
using System;
94+
using DotNetify;
95+
using System.Threading;
96+
97+
namespace HelloWorld
98+
{
99+
public class HelloWorld : BaseVM
100+
{
101+
private Timer _timer;
102+
public string Greetings => "Hello World!";
103+
public DateTime ServerTime => DateTime.Now;
104+
105+
public HelloWorld()
106+
{
107+
_timer = new Timer(state =>
108+
{
109+
Changed(nameof(ServerTime));
110+
PushUpdates();
111+
}, null, 0, 1000);
112+
}
113+
114+
public override void Dispose() => _timer.Dispose();
115+
}
116+
}
117+
```
118+
<br/>
119+
120+
##### Build and Run
121+
122+
Run `dotnet run`. Hello World!

‎DevApp.ViewModels/Docs/Vue/FromScratchWebPack.md‎

Lines changed: 211 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,213 @@
11
## From Scratch with Visual Studio and WebPack
22

3-
__Coming Soon!__
3+
The following steps will create a simple real-time Hello World ASP.NET Core app from Visual Studio. It will use WebPack with hot-reload feature to build the client-side code.
4+
5+
Prerequisites:
6+
7+
- Visual Studio 2017
8+
- Node.js
9+
10+
##### Create Project
11+
12+
Create an empty ASP.NET Core Web Application (.NET Core 2.1) project and name it _HelloWorld_. Then use the NuGet Package Manager Console to install the dotNetify package:
13+
```csharp
14+
install-package DotNetify.SignalR
15+
```
16+
<br/>
17+
18+
##### Configure Startup
19+
20+
Open _Startup.cs_ file and replace the content with the following:
21+
```csharp
22+
using System.IO;
23+
using System.Collections.Generic;
24+
using Microsoft.AspNetCore.Builder;
25+
using Microsoft.AspNetCore.Hosting;
26+
using Microsoft.AspNetCore.Http;
27+
using Microsoft.AspNetCore.SpaServices.Webpack;
28+
using Microsoft.Extensions.DependencyInjection;
29+
using DotNetify;
30+
31+
namespace HelloWorld
32+
{
33+
public class Startup
34+
{
35+
public void ConfigureServices(IServiceCollection services)
36+
{
37+
services.AddMemoryCache();
38+
services.AddSignalR();
39+
services.AddDotNetify();
40+
}
41+
42+
public void Configure(IApplicationBuilder app)
43+
{
44+
app.UseWebSockets();
45+
app.UseSignalR(routes => routes.MapDotNetifyHub());
46+
app.UseDotNetify();
47+
48+
// Optional: utilize webpack hot reload feature.
49+
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
50+
{
51+
HotModuleReplacement = true,
52+
HotModuleReplacementClientOptions = new Dictionary<string, string> { { "reload", "true" } },
53+
});
54+
55+
app.UseStaticFiles();
56+
app.Run(async (context) =>
57+
{
58+
using (var reader = new StreamReader(File.OpenRead("wwwroot/index.html")))
59+
await context.Response.WriteAsync(reader.ReadToEnd());
60+
});
61+
}
62+
}
63+
}
64+
```
65+
<br/>
66+
67+
##### Configure NPM
68+
69+
Add NPM configuration file _package.json_ with the following content:
70+
```json
71+
{
72+
"name": "helloworld",
73+
"scripts": {
74+
"build": "webpack"
75+
},
76+
"dependencies": {
77+
"dotnetify": "~3.2.0",
78+
"vue": "~2.5.17"
79+
},
80+
"devDependencies": {
81+
"aspnet-webpack": "^3.0.0",
82+
"vue-loader": "~15.4.2",
83+
"vue-template-compiler": "~2.5.17",
84+
"webpack": "^4.18.0",
85+
"webpack-cli": "^3.1.0",
86+
"webpack-dev-middleware": "^3.3.0",
87+
"webpack-hot-middleware": "^2.23.1"
88+
}
89+
}
90+
```
91+
92+
The packages will be automatically downloaded by Visual Studio when the file is saved.
93+
<br/>
94+
95+
##### Configure WebPack
96+
97+
Add _webpack.config.js_ with the following content:
98+
```js
99+
'use strict';
100+
101+
const { VueLoaderPlugin } = require('vue-loader');
102+
103+
module.exports = {
104+
mode: 'development',
105+
entry: { main: './src/index.js' },
106+
output: {
107+
path: __dirname + '/wwwroot/dist',
108+
publicPath: '/dist/'
109+
},
110+
resolve: {
111+
modules: [ 'src', 'node_modules' ],
112+
alias: { vue$: 'vue/dist/vue.esm.js' }
113+
},
114+
module: {
115+
rules: [ { test: /\.vue$/, use: 'vue-loader' } ]
116+
},
117+
plugins: [ new VueLoaderPlugin() ]
118+
```
119+
<br/>
120+
121+
##### Add Index Page
122+
123+
Add a new file _wwwroot/index.html_ with the following content:
124+
```html
125+
<html>
126+
<head>
127+
<title>DotNetify</title>
128+
<meta charset="utf-8">
129+
<meta name="viewport" content="initial-scale=1, width=device-width" />
130+
</head>
131+
<body>
132+
<div id="App"></div>
133+
<script src="dist/main.js" charset="UTF-8"></script>
134+
</body>
135+
</html>
136+
```
137+
<br/>
138+
139+
##### Add Hello World
140+
141+
Create a new folder _src_, and add a new file _src/index.js_ with the following content:
142+
```jsx
143+
import Vue from 'vue';
144+
import HelloWorld from './HelloWorld.vue';
145+
146+
document.getElementById('App').innerHTML = '<hello-world />';
147+
new Vue({
148+
el: '#App',
149+
components: {
150+
'hello-world': HelloWorld
151+
}
152+
});
153+
```
154+
155+
Add a new file _src/HelloWorld.vue_ with the following content:
156+
```html
157+
<template>
158+
<div>
159+
<p>{{Greetings}}</p>
160+
<p>Server time is: {{ServerTime}}</p>
161+
</div>
162+
</template>
163+
164+
<script>
165+
import dotnetify from 'dotnetify/vue';
166+
167+
export default {
168+
name: 'HelloWorld',
169+
created: function () {
170+
this.vm = dotnetify.vue.connect("HelloWorld", this);
171+
},
172+
destroyed: function () {
173+
this.vm.$destroy();
174+
},
175+
data: function () {
176+
return { Greetings: '', ServerTime: '' }
177+
}
178+
}
179+
</script>
180+
```
181+
182+
Add a new file _HelloWorld.cs_ with the following content:
183+
```csharp
184+
using System;
185+
using DotNetify;
186+
using System.Threading;
187+
188+
namespace HelloWorld
189+
{
190+
public class HelloWorld : BaseVM
191+
{
192+
private Timer _timer;
193+
public string Greetings => "Hello World!";
194+
public DateTime ServerTime => DateTime.Now;
195+
196+
public HelloWorld()
197+
{
198+
_timer = new Timer(state =>
199+
{
200+
Changed(nameof(ServerTime));
201+
PushUpdates();
202+
}, null, 0, 1000);
203+
}
204+
205+
public override void Dispose() => _timer.Dispose();
206+
}
207+
}
208+
```
209+
<br/>
210+
211+
##### Build and Run
212+
213+
Run the application. Hello World!

0 commit comments

Comments
 (0)