-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathgetting-started-with-blazor.html
139 lines (136 loc) · 7.65 KB
/
getting-started-with-blazor.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en-US" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://adrientorris.github.io/aspnetcore/blazor/getting-started-with-blazor" rel="canonical" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Getting started with Blazor</title>
<link rel="shortcut icon" href="/wwwroot/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="language" content="en" />
<meta name="keywords" content="Blazor,ASP.NET Core,.NET Core" />
<meta name="description" content="How to create a Blazor project" />
<meta name="author" content="Adrien Torris" />
<meta name="robots" content="index,follow" />
<meta name="generator" content="SiteUp! 0.1" />
<link href="/wwwroot/css/style.css" rel="stylesheet" />
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<div id="main_ctn" class="post_ctn">
<header>
<div id="header-content">
<h2>Blog</h2>
<ul id="social_links">
<li id="twitter_link">
<a href="https://twitter.com/AdrienTorris" target="_Blank" rel="nofollow" title="Adrien Torris sur Twitter">
<i class="fab fa-twitter fa-2x"></i>
</a>
</li>
<li id="github_link" title="Adrien Torris sur GitHub">
<a href="https://github.com/AdrienTorris" target="_Blank" rel="nofollow">
<i class="fab fa-github fa-2x"></i>
</a>
</li>
<li id="so_link">
<a href="https://stackoverflow.com/users/story/4428633" target="_Blank" rel="nofollow" title="Adrien Torris sur StackOverflow">
<i class="fab fa-stack-overflow fa-2x"></i>
</a>
</li>
<li id="linkedin_link">
<a href="https://www.linkedin.com/in/adrientorris/" target="_Blank" rel="nofollow" title="Adrien Torris sur LinkedIn">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</li>
<li id="gplus_link">
<a href="https://plus.google.com/u/0/+AdrienTorris" target="_Blank" rel="nofollow" title="Adrien Torris sur Google Plus">
<i class="fab fa-google-plus-g fa-2x"></i>
</a>
</li>
</ul>
</div>
</header>
<div id="arianne_wrapper">
<ul>
<li><a href="https://adrientorris.github.io/index.html" title="Technical blog of Adrien Torris (Blazor, .NET Core, ASP.NET Core, ...)">Home</a></li>
<li>ASP.NET Core</li>
<li class="active"><a href="https://adrientorris.github.io/aspnetcore/blazor/getting-started-with-blazor" title="Getting started with Blazor">Getting started with Blazor</a></li>
</ul>
</div>
<div id="dupcontent_ctn">
<p>This post has moved.</p>
<p>The good url is : <a href="https://adrientorris.github.io/aspnetcore/blazor/getting-started-with-blazor" title="Getting started with Blazor">Getting started with Blazor</a>.
</p></div>
<div id="post_ctn">
<h1>Getting started with Blazor</h1>
<p>First, you need to have the 2.1 preview of the .NET Core framework installed for Blazor to work. If you don't, yon can download it here : <a href="https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1" title=".NET Core SDK 2.1.300-preview1 download link" target="_blank" rel="nofollow">.NET Core SDK 2.1.300-preview1</a>.</p>
<p>1) Install the Blazor's template.</p>
<pre><code class="json">
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::0.0.5-* --nuget-source https://dotnet.myget.org/F/blazor-dev/api/v3/index.json
</code></pre>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-dotnet-cli-cmd-01.png" title="" /></div>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-dotnet-cli-cmd-03.png" title="" /></div>
<p>2) Create a new Blazor app.</p>
<pre><code class="json">
dotnet new blazor -o BlazorApp1
</code></pre>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-dotnet-cli-cmd-02.png" title="" /></div>
<p><i>There is a little bug with the templating by the DotNet command line interface currently, so maybe you will see Blazor templates only once after installing them. If you encounter the problem, a simple and quick workaround is explained here : <a href="https://adrientorris.github.io/aspnet-core/blazor/workaround-dotnet-cli-blazor-templates-not-available" title="Workaround to use the Blazor templates with the .NET CLI if you don't see them after their install">Workaround to use the Blazor templates with the .NET CLI if you don't see them after their install</a>.</i></p>
<p>3) Run the Blazor app.</p>
<pre><code class="json">
cd BlazorApp1
dotnet run
</code></pre>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-dotnet-cli-cmd-04.png" title="" /></div>
<p>And your app is running. Have fun ! :)</p>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-app-localhost-port-5000.png" title="" /></div>
<p></p>
<div class="pic_wrapper"><img src="/wwwroot/images/aspnet-core/blazor/getting-started-blazor-app-localhost-port-5000-run.png" title="" /></div>
<div id="crdny">March 05, 2018</div>
<div id="tags_wrapper">
<ul>
<li>Blazor</li>
<li>ASP.NET Core</li>
<li>.NET Core 2.1 Preview</li>
</ul>
</div>
<div id="refs_wrapper">
<ul>
<li><a href="https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1" title=".NET Core SDK 2.1.300-preview1" target="_Blank" rel="nofollow">.NET Core SDK 2.1.300-preview1</a></li>
<li><a href="https://github.com/aspnet/blazor" title="Blazor's GitHub repository" target="_Blank" rel="nofollow">Blazor's GitHub repository</a></li>
<li><a href="https://dotnet.myget.org/gallery/blazor-dev" title="Daily builds of the 'dev' branch of https://github.com/aspnet/Blazor" target="_Blank" rel="nofollow">Daily builds of Blazor</a></li>
<!--<li><a href="" title="" target="_Blank" rel="nofollow"></a></li>-->
</ul>
</div>
</div>
<div id="relatedpostlist_ctn">
<h2>Related posts</h2>
<ul>
<li>
<a href="https://adrientorris.github.io/aspnetcore/blazor/introduction-to-blazor" title="Introduction to Blazor">Introduction to Blazor</a>
</li>
<li><a href="https://adrientorris.github.io/aspnetcore/blazor/workaround-dotnet-cli-blazor-templates-not-available" title="Workaround to use the Blazor templates with the .NET CLI if you don't see them after their install">Workaround to use the Blazor templates with the .NET CLI</a></li>
</ul>
</div>
<footer>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="/wwwroot/js/Infra.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/wwwroot/lib/highlight/styles/vs.css" />
<script type="text/javascript" src="/wwwroot/lib/highlight/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85948839-1', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F924P8Y6HC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-F924P8Y6HC');
</script></body></html>