-
Notifications
You must be signed in to change notification settings - Fork 4
/
toc.html
223 lines (173 loc) · 12.9 KB
/
toc.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>Meteor Development Infrastructure</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="assets/icons/apple-touch-icon-57x57.png?v=1.0">
<link rel="apple-touch-icon" sizes="60x60" href="assets/icons/apple-touch-icon-60x60.png?v=1.0">
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/apple-touch-icon-72x72.png?v=1.0">
<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/apple-touch-icon-76x76.png?v=1.0">
<link rel="apple-touch-icon" sizes="114x114" href="assets/icons/apple-touch-icon-114x114.png?v=1.0">
<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/apple-touch-icon-120x120.png?v=1.0">
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/apple-touch-icon-144x144.png?v=1.0">
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon-152x152.png?v=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon-180x180.png?v=1.0">
<link rel="icon" type="image/png" href="assets/icons/favicon-32x32.png?v=1.0" sizes="32x32">
<link rel="icon" type="image/png" href="assets/icons/favicon-194x194.png?v=1.0" sizes="194x194">
<link rel="icon" type="image/png" href="assets/icons/favicon-96x96.png?v=1.0" sizes="96x96">
<link rel="icon" type="image/png" href="assets/icons/android-chrome-192x192.png?v=1.0" sizes="192x192">
<link rel="icon" type="image/png" href="assets/icons/favicon-16x16.png?v=1.0" sizes="16x16">
<link rel="manifest" href="assets/icons/manifest.json?v=1.0">
<link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg?v=1.0" color="#5bbad5">
<link rel="shortcut icon" href="assets/icons/favicon.ico?v=1.0">
<meta name="apple-mobile-web-app-title" content="Warehouseman">
<meta name="application-name" content="Warehouseman">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="assets/icons/mstile-144x144.png?v=1.0">
<meta name="msapplication-config" content="assets/icons/browserconfig.xml?v=1.0">
<meta name="theme-color" content="#3f6060">
<script src="./scripts/Live.js#html"></script>
<script src="./scripts/tutorial_sections.js"></script>
<script>
var getLocation = function(href) {
var lnk = document.createElement("a");
lnk.href = href;
return lnk;
};
</script>
<!-- script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script -->
<script src="//gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script type="text/javascript" language="JavaScript">
if (window.location.protocol == "https:")
window.location.href = "http:" + window.location.href.substring(window.location.protocol.length);
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
displayStyle = document.getElementById(d).style.display;
if( displayStyle == "" || displayStyle == "none" )
{
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
</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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40526951-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div ID="SlideShows" style="display:none;">
</div>
<div ID="Introduction" style="display:none; margin-left:55px; margin-right:55px;">
<!--
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-7072964173126749"
data-ad-slot="1681627511">
</ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
-->
<!-- br />If you find this tutorial series helpful you can <b>help it get better</b>: disable AdBlock for this URL and check out what our sponsors provide.
<hr / -->
<p style="text-align:left;">
Ⓒ Copyright 2016, Martin Bramwell, Warehouseman
<span style="float:right;">Last edits : 2016/01/29</span>
</p>
<h1>Getting Started with Meteor Continuous Deployment</h1>
<p><strong>These explanatory <a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial">scripts</a>, <a target="_blank" href="https://www.youtube.com/playlist?list=PLq7op4J183lXpGr79hjfQVQHB-saVqLBL">videos</a> and <a target="_blank" href="http://martinhbramwell.github.io/Meteor-CI-Tutorial/">slideshows</a>, will start your Meteor development infrastructure immediately with: package development, testing, documenting, logging, code style linting and continuous integration and deployment</strong></p>
<h1>Table of Contents</h1>
<h2>Spin up a virtual machine [<a target="_blank" href="https://www.youtube.com/watch?v=UzA3ddE0XPA">Video</a>]</h2>
<p>This is not strictly part of the tutorial, but I created a Docker image that should make this step very easy for you.</p>
<h2>Prepare the Machine [<a target="_blank" href="https://www.youtube.com/watch?v=oMBYTwElMvk">Video</a>] [<a href="./toc.html?part=A">Slide Show</a>] </h2>
<p>We start off with a fresh Ubuntu 14.04 LTS virtual machine and install all the platform dependencies. These are global installs requiring 'sudo'. Subsequent sections should not require 'sudo'. The script shown can run to completion without intervention, or stop at intermediate steps to view explanations.</p>
<h2>Version Control In The Cloud [<a target="_blank" href="https://www.youtube.com/watch?v=meCdBhjnMEg">Video</a>] [<a href="./toc.html?part=B">Slide Show</a>] </h2>
<p>Towards the goal of "packages-only-apps", we are mainly interested in version control of each distinct package, but we still need a 'do-nothing' app in which to instantiate the packages.</p>
<p>So, we'll prepare a Meteor project and store it in GitHub.</p>
<h2>Create and Unit Test a Package [<a target="_blank" href="https://www.youtube.com/watch?v=BBpOz4GXqAw">Video</a>] [<a href="./toc.html?part=C">Slide Show</a>] </h2>
<p>This section shows the steps needed to begin testing a Meteor package.</p>
<p>We'll prepare a package, secure it in GitHub and run preliminary tests with TinyTest in the browser and on the command line.</p>
<h2>Code Quality - Coding Style and Linting [<a target="_blank" href="https://www.youtube.com/watch?v=C3D3B_jTsY4">Video</a>] [<a href="./toc.html?part=D">Slide Show</a>] </h2>
<p>If you want reusable components, especially if you are working with one or several teams, it's very important to ensure consistent styles and documentation standards from all contributors to all your projects. In this and the next section we'll set up an environment where standards conformance is easy.</p>
<p>The first element is linting with esLint, run in the editor for instant feedback as well as on the command line so conformance can be published and monitored as part of continuous deployment.</p>
<h2>Code Quality - Automatic Documentation in the Cloud [<a target="_blank" href="https://www.youtube.com/watch?v=sjqtVs1GMac">Video</a>] [<a href="./toc.html?part=E">Slide Show</a>] </h2>
<p>The second part about code quality exploits two powerful tools: jsDoc and "GitHub Pages".</p>
<p>We'll put together a mechanism for easily documenting code files and then publishing them as a browsable manual, automatically, and hosted, free of charge, on GitHub.</p>
<h2>Cloud Continuous Integration [<a target="_blank" href="https://www.youtube.com/watch?v=RCaXAuyvMcw">Video</a>] [<a href="./toc.html?part=F">Slide Show</a>] </h2>
<p>This section expands on your workstation toolbox to include working with continuous deployment in the cloud. It covers everything involved in setting up linting, automated documentation, unit testing, version control, end-to-end testing and continuous delivery <b>in-the-cloud</b>. So, while a working system is integrated and delivered continuously, it is not yet continuously <i>deployed</i>.</p>
<h2>Code Quality - Production Logging [<a target="_blank" href="https://www.youtube.com/watch?v=NM12S_fQto0">Video</a>] [<a href="./toc.html?part=G">Slide Show</a>] </h2>
<p>A vital piece of application architecture is scaleable logging: run-time logs that track critical server-side activity at appropriate levels of detail. We "require" Bunyan, a toolkit for NodeJS that focuses on very flexible logging with JSON output, that can be readily archived and subsequently "mined", for example, for usage patterns.</p>
<h2>A Real World Package [<a target="_blank" href="https://www.youtube.com/watch?v=Td_4lqKYohw">Video</a>] [<a href="./toc.html?part=H">Slide Show</a>] </h2>
<p>Here we create a complete working, tested, documented Meteor package from a pre-exising NodeJS module. This step also introduces the "impedance mis-match" between the synchronous layer that Meteor builds on top of the asynchronous substrate of NodeJS.</p>
<h2>Package Self Test and Publication [<a target="_blank" href="https://www.youtube.com/watch?v=Xvlx-48mH8U">Video</a>] [<a href="./toc.html?part=I">Slide Show</a>] </h2>
<p>To close the loop on all the preceding development stage parts we now bring the online documentation up-to-date and automate end-to-end testing of our package in-the-cloud; such that interested users can quickly get started using it.</p>
<h2>Automated Deployment [<a target="_blank" href="https://www.youtube.com/watch?v=Ks0mT5zpV3g">Video</a>] [<a target="_blank" href="./toc.html?part=J">Slide Show</a>] </h2>
<p>We build our project as an Android app, place it into our project as a download link, then deploy it to Meteor's servers. We use our understanding of that to complete our CI script so we can do it all automatically in CircleCI, every time we push a commit to GitHub.</p>
<h2>Avoid the horrible Android emulator [<a target="_blank" href="https://youtu.be/xB3wWvK5YT0">Video</a>]</h2>
<p>You cannot run the Android emulator in the Docker machine we created earlier. It's very slow anyway. In this video I show how to install Android KitKat x86 in a Qemu/KVM virtual machine and then connect to it from Meteor in order to "run android-device". You get most of the advantages of the emulator and most of the advantages of connected physical devices, with the downside of neither.</p>
<h1>Meta-information</h1>
<ul>
<li><a target="_blank" href="./index.html#start">"Getting Started" Instructions</a></li>
<li><a target="_blank" href="./index.html#usage">General Instructions and Prerequisites</a></li>
<li><a target="_blank" href="./index.html#details">Miscellaneous Explanations</a></li>
<li><a target="_blank" href="./index.html#links">Links to Source Materials</a></li>
</ul>
<h3>Copyright Information</h3>
<p>
Please use only in accordance with <a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/LICENSE">The License</a>.
</p>
<br />
<br />
<br />
<br />
<br />
<!-- hr />
This tutorial has been made possible, in part, by :<br / -->
<!--
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-7072964173126749"
data-ad-slot="1681627511">
</ins>
-->
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<script>
var part = getLocation(window.location.href).search.replace('?part=', '').replace('/', '');
var blockId = part in sections ? 'SlideShows' : 'Introduction';
// console.debug('Block = ' + blockId);
var slideShowID = sections[part];
// console.debug('slideShowID = ' + slideShowID);
var block = document.getElementById(blockId);
block.style.display = "block";
if ( blockId === 'SlideShows' ) {
var slideshow = remark.create({
sourceUrl: './' + slideShowID + '/concatenatedSlides.MD',
navigation: {
scroll: true,
touch: true,
click: false,
},
slideNumberFormat: function (current, total) {
return ' Slide ' + current + ' of ' + total;
},
});
};
</script>
</body>
</html>