-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
683 lines (528 loc) · 38 KB
/
index.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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meteor Development Infrastructure</title>
<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>
if (window.location.protocol == "https:")
window.location.href = "http:" + window.location.href.substring(window.location.protocol.length);
</script>
<!--
-->
<script src="./scripts/Live.js#html"></script>
<!-- Bootstrap
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<!-- Responsive Style -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<!--Icon Fonts-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- link rel="stylesheet" media="screen" href="assets/fonts/font-awesome/font-awesome.min.css" / -->
<!-- Extras -->
<link rel="stylesheet" type="text/css" href="assets/extras/animate.css">
<!-- link rel="stylesheet" type="text/css" href="assets/extras/lightbox.css" -->
<!-- jQuery Load
<script src="assets/js/jquery-min.js"></script -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<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 data-spy="scroll" data-offset="20" data-target="#navbar">
<!-- Nav Menu Section -->
<div class="logo-menu">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header col-md-2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" target="_blank" href="http://github.com/warehouseman"> Warehouseman</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav col-md-10 pull-right">
<li class="active"><a href="#hero-area"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#audience"><i class="fa fa-info"></i> Why?</a></li>
<li><a href="#portfolio"><i class="fa fa-puzzle-piece"></i> Elements</a></li>
<li><a href="#services"><i class="fa fa-cogs"></i> Goal</a></li>
<li><a href="#clients"><i class="fa fa-briefcase"></i> Fast</a></li>
<li><a href="#usage"><i class="fa fa-info"></i> Usage</a></li>
<li><a href="#contact"><i class="fa fa-envelope"></i> Contents</a></li>
<li><a href="#start"><i class="fa fa-briefcase"></i> Step #1</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Nav Menu Section End -->
<!-- Hero Area Section -->
<section id="hero-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Meteor CI</h1>
<h2 class="subtitle">Getting Started with Meteor Continuous Deployment</h2>
<div class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight delay-0-5">
<p style="font-size: 1.4em">
<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: <i>package development, testing, documenting, logging, code style linting</i> all on a platform of continuous integration, delivery and deployment.
</strong>
</p>
</div>
<img class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft" src="assets/img/ContinuousDeployment.svg" alt="">
</div>
<a target="_blank" href="./toc.html?part=A#1" target="_blank" class="btn btn-common btn-lg">
Jump to Part #1
</a>
<a href="https://www.youtube.com/playlist?list=PLq7op4J183lXpGr79hjfQVQHB-saVqLBL" target="_blank" class="btn btn-watch btn-lg">
Watch Videos
</a>
<a href="http://github.com/martinhbramwell/Meteor-CI-Tutorial" target="_blank" class="btn btn-common btn-lg">
View on GitHub
</a>
</div>
</div>
</section>
<!-- Hero Area Section End-->
<!-- Audience Section -->
<section id="audience">
<div class="container">
<div class="row">
<h1 class="title">Seriously?</h1>
<h2 class="subtitle">Learn Meteor? Ok! <br /> But ... <br /> DevOps at the same time?!?</h2>
<div class="col-md-8 col-sm-12">
<p>
<br />Learning new tools is exciting.<br />
Meeting deadlines with them is hard.<br />
Having to integrate, at the same time, the tools to automate the development workflow is a nightmare, yet ... retrofitting those tools to a developed project isn't much better.
</p>
<p>
If this is your situation, then these tutorials are for you.
</p>
<p>Starting your development from the tools in this tutorial, you will immediately comply with the first four criteria of the <a target="_blank" href="http://www.joelonsoftware.com/articles/fog0000000043.html">Joel Test</a>.</p>
<p>You'll be closer to meeting #5 & #10 as well. But it goes beyond that, to stuff that ought to be on the "Test" but isn't, like, </i>um</i> . . . generating documentation from code annotations?</p>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 JoelTestBox">
<p text-align: center;>The Joel Test</p>
<ol>
<li><strong>Do you use source control?</strong></li>
<li><strong>Can you make a build in one step?</strong></li>
<li><strong>Do you make daily builds?</strong></li>
<li><strong>Do you have a bug database?</strong></li>
<li><i>Do you fix bugs before writing new code?</i></li>
<li>Do you have an up-to-date schedule?</li>
<li>Do you have a spec?</li>
<li>Do programmers have quiet working conditions?</li>
<li>Do you use the best tools money can buy?</li>
<li><i>Do you have testers?</i></li>
<li>Do new candidates write code during their interview?</li>
<li>Do you do hallway usability testing?</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Audience Section End -->
<!-- Portfolio Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<h1 class="title">Components</h1>
<h2 class="subtitle">Can you get all these to work together?</h2>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".5s">
<a href="#"><img src="assets/img/nightwatch-logo.png" alt=""></a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".7s">
<img src="assets/img/swagger-logo.png">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/GitHub_Logo.svg">
</svg>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/Node.js_logo.svg">
</svg>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/circle-logo-horizontal.svg">
</svg>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/docker.svg">
</svg>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/eslint.svg">
</svg>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item wow fadeInLeft" data-wow-delay=".9s">
<svg width="10px" viewBox="0 0 20 10">
<img src="assets/img/meteor-logo.svg">
</svg>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section End -->
<!-- Service Section -->
<section id="services">
<div class="container text-center">
<div class="row">
<h1 class="title">Quality is free!</h1>
<h2 class="subtitle">But getting there can be daunting.</h2>
<p>The goal of this tutorial series is to help Meteor developers put together a complete <strong>continuous deployment</strong> work environment from which to build out :</p>
<div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="service-item">
<ul>
<li>Package-only Apps</li>
<li>Logging</li>
<li>Version Control</li>
<ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="service-item">
<ul>
<li>Generated Documentation</li>
<li>Unit Tests</li>
<li>End-to-End Tests</li>
<ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="service-item">
<ul>
<li>Code Style Verification</li>
<li>Deployment to Web</li>
<li>Deployment to Android</li>
<ul>
</div>
</div>
</div>
<p><br />The focus is on 'wiring', with very little discussion of what more one can do with each of the various elements once they're wired together -- there are plenty of tutorials about all of that, and I link to some good ones. 'Wiring' refers to the challenge of connecting a variety of different tools together into an integrated whole -- even if the whole doesn't actually do much to begin with.</p>
<br />
<p>Here's the complete "wiring diagram"... </p>
<br />
<div align="center" style="border:thin solid black">
<figure>
<img height="100%" max-height="720px" width="100%" src='./fragments/ContinuousDeliveryWorkFlow.png' alt='CI work flow' />
<figcaption>Continuous Delivery Work Flow</figcaption>
</figure>
</div>
<br />
<p>Another goal is to help developers begin building Meteor applications <strong>as though they were working in multiple teams on multiple projects</strong>! In particular, this means going beyond "normal" configuration of <i>ssh</i> and <i>git</i>, to handle multiple user aliases and GitHub deploy keys. The end result will be fractionally more difficult in your daily routine, but much more flexible and "future proof".</p>
</div>
</div>
</section>
<!-- Service Section End -->
<!-- Client Section -->
<section id="clients">
<div class="container">
<div class="row">
<h1 class="title">No Fluff Here</h1>
<h2 class="subtitle">You want to learn the most in the least time, yes?</h2>
<div class="col-md-4 col-sm-12 col-xs-12">
<img src="assets/img/ClockMan.png">
</div>
<div class="col-md-8 col-sm-12">
<p>I try to be very succinct, with every word dedicated to helping you get the most out of the tutorial in the least time.</p>
<p>In fact, <strong>to save you even more time</strong>, I generate code fragments, "on-the-fly", employing a naming scheme you choose, so you're getting more than a tutorial -- it's also a toolkit of boilerplate snippets. The end result is a complete work environment designed to elevate you quickly into a high-velocity developer with very low "maintenance drag".</p>
<p>Skim it to see if it's what you need, but to avoid problems later -- <strong>please do</strong> -- carefully follow all the instructions.</p>
<p>I hope to raise the bar on developer tutorials.</p>
<p>Please let me know if I <a target="_blank" href="https://forums.meteor.com/">have succeeded</a> . . . <a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/issues">or failed!</a></p>
</div>
</div>
</div>
</section>
<!-- Client Section End -->
<!-- Audience Section -->
<section id="usage">
<div class="container">
<div class="row">
<h1 class="title">Typical Usage Pattern</h1>
<h2 class="subtitle">Getting Directly to What You Need</h2>
<div class="col-md-12 col-sm-12">
<p>
I've found few tutorials that make it easy to jump directly to what I need, so I try to avoid that mistake here.
</p>
<p>
Most likely you'll want to flip through the slides to get an overview, then watch the videos, then spin up a fresh virtual machine and execute the scripts. Since the scripts are semi-automatic, you'll have very little typing to do, and so the whole thing shouldn't cost you more than a few hours.
</p>
<p>
In fact, grouped as it is, into spoon-sized doses, you can step through it a little bit at a time, when you have time.
</p>
<p>You will <b>NOT be able to complete this tutorial</b> without these things :</p>
<ul>
<li><b>A GitHub account with SSH keys set up:</b> If you have not signed up, <a target="_blank" href="http://github.com/join">create a GitHub account</a> <i>(Free!)</i> . If you do have a GitHub account you must also <a target="_blank" href="http://github.com/settings/ssh">provide GitHub with your SSH key</a>. Refer to their guide to <a target="_blank" href="http://help.github.com/articles/generating-ssh-keys">generating SSH keys</a> or troubleshoot <a target="_blank" href="http://help.github.com/ssh-issues/">common SSH Problems</a>.
</li>
<li><b>A Meteor account:</b> If you aren't yet signed up you will have to <a target="_blank" href="https://www.meteor.com/">create a Meteor account</a> <i>(Also free!)</i> . </li>
<li><b>A CircleCI account:</b> You are automatically signed up, <i>for free!</i>, to CircleCI when you have a GitHub account. When you go to <a target="_blank" href="https://circleci.com/">CircleCI</a> you just click the "Log in" button, and confirm to GitHub that you authorize CircleCI to access your repositories.<span id="details" /></li>
<li><b>Running on a virtual machine:</b> The scripts that make up the tutorial install a <b>lot</b> of utilities and programs. I have included a trap that tries to prohibit execution on a bare hardware machine. <b>NEVER</b> use these scripts on a machine you fear to lose! As an added incentive for you to NOT use the tutorial on real hardware, I created a <i>(Yup! Free!)</i> <a target="_blank" href="https://hub.docker.com/r/warehouseman/xubuntu-x2go-phusion/">Docker image of Xubuntu and X2Go</a>, and <a target="_blank" href="https://www.youtube.com/watch?v=UzA3ddE0XPA">a video</a> about how to start it up and use it for the tutorial. You just need to <a target="_blank" href="https://docs.docker.com/engine/installation/">get Docker installed and running</a>, which is easy <i>(and, well ... free!)</i>
</ul>
<h3>Other stuff</h3>
<ul>
<li>Please note that the slides change with the keyboard or scroll wheel, but not mouse clicks. This is because there are "Hover Notes" and hyperlinks to deeper details <i>that are problematic if the slides are also enabled for control by touchscreen taps or mouse click</i>.</li>
<li>Except where indicated, the bash scripts make every attempt to be 'idempotent' -- you can run them repeatedly without adverse consequences. Nevertheless, you may want to be liberal with virtual machine snapshots of your work.</li>
<li>I have not been consistent with manual vs. automated. If the icon in the right margin says "No manual input required here." then it is automatic, otherwise there <b>may be</b> a combination of manual and automatic. Start and stop the video to see when you really do need to edit something and when a file is pulled in to do the work for you. In general, you're going to need to type when it's just a line or two, or when small edits are spread over several slides. If in doubt, look at the source code for the slide by clicking the link at the bottom.</li>
<li>The tutorial is designed for a small (10GB) Xubuntu 14.04 virtual machine (Docker and Qemu/KVM have been used, others should be fine, but haven't been tried). It hasn't been tested in any other environment since the idea is to provide clear proven instructions that can be adapted easily to other circumstances. Once you see how it works in one environment, adapting to a different one should be trivial.</li>
<li><b>LEGAL:</b> <i>THIS IS A FREE NON-COMMERCIAL TUTORIAL WITH NO GUARANTEE OF ANY KIND</i>. Use at your own risk! Run the tutorial on a disposable, preferably <i>virtual</i>, machine. Do NOT run the tutorial on a machine with any sensitive or irreplaceable information.
</ul>
</div>
</div>
</div>
</section>
<!-- Audience Section End -->
<!-- Contact Section -->
<section id="contact">
<div class="container text-center">
<div class="row">
<h1 class="title">Contents</h1>
<h2 class="subtitle">Here are the Twelve Parts</h2>
<div class="col-md-12 col-sm-12">
<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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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>
</div>
</div>
</div>
</section>
<!-- Contact Section End-->
<!-- Step #1 Section -->
<section id="start">
<div class="container text-center">
<div class="row">
<h1 class="title">First steps</h1>
<h2 class="subtitle">Here's How to Get Started</h2>
<div class="col-md-12 col-sm-12">
<p>To begin, you will need to obtain the tutorial.</p>
<p>Open up a terminal window, then copy'n paste these commands into it:</p>
<p class="console">
export BRANCH="master" # modularize
<br />export URI=<wbr>"http://github.com/<wbr>martinhbramwell"
<br />export TUT=<wbr>"Meteor-CI-Tutorial"
<br />export FILE=<wbr>"archive/<wbr>${BRANCH}.zip"
<br />
<br />echo "Downloading : \n${URI}/<wbr>${TUT}/<wbr>${FILE}"
<br />echo " as : ${TUT}.zip"
<br />
<br />cd ${HOME}
<br />wget -O ${TUT}.zip ${URI}/<wbr>${TUT}/<wbr>${FILE}
<br />unzip ${TUT}.zip
<br />mv ${TUT}-<wbr>${BRANCH} ${TUT}
<br />cd ${TUT}
<br />
<br /># Ready to run the first script :
<br /># ./Tutorial01_<wbr>PrepareTheMachine.sh
<br />
<br />
</p>
<p>The result should look like <a target="_blank" href="./fragments/dldrslt.html">this</a>.</p>
<p id="links">Then you can run the first script with: </p>
<p class="console">
./Tutorial01_<wbr>PrepareTheMachine.sh
<br />
<br />
</p>
<div style="text-align: left;">
<p>After some preparatory steps, you will see a plain text version of the first slide of the "executable slideshow" in your terminal.</p>
<p>My idea, however, is it that you should follow the terminal action while viewing the slides in a browser in any one of the following ways:</p>
<ul>
<li>Open your browser to <a target="_blank" href="http://martinhbramwell.github.io/Meteor-CI-Tutorial/toc.html?part=A#1">the GitHub copy of the slideshow</a>.</li>
<li>If you already know Meteor, you can just stuff a copy of this directory in the 'public' directory of a Meteor app and view the table of contents at http:// your host:3000/toc.html.</li>
<li>If you think you have Python in your machine, you can open a second terminal window and, into it, copy'n paste the following; </li>
</ul>
</div>
<p class="console">
echo Your Python version is : $(python -c "import sys;<wbr>t='{v[0]}.{v[1]}'<wbr>.format<wbr>(v=list(sys<wbr>.version_<wbr>info[:2]<wbr>));sys<wbr>.stdout.<wbr>write(t)";).
<br />export TUT=<wbr>"Meteor-CI-Tutorial"
<br />cd ${HOME}/${TUT}
<br />python -m <wbr>SimpleHTTPServer<wbr> 8080 &
<br />echo -e "\n\n Please open your browser to http://localhost:8080/toc.html?part=A#1 \n\n";
<br />fg
<br />
<br />
</p>
<h2>Source Links</h2>
<p>
<ul>
<li>Tutorial source code - <a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial">http://github.com/­martinhbramwell/­Meteor-CI-Tutorial/</a></li>
<li>Tutorial video play list - <a target="_blank" href="https://www.youtube.com/playlist?list=PLq7op4J183lXpGr79hjfQVQHB-saVqLBL">https://www.­youtube.com­/playlist?list=­PLq7op4J183lXpGr79hj­fQVQHB-saVqLBL</a></li>
<li>Tutorial slide shows - <a target="_blank" href="http://martinhbramwell.github.io/Meteor-CI-Tutorial/toc.html">http://­martinhbramwell­.github­.io/­Meteor-­CI-Tutorial/­toc.html</a></li>
<li>Tutorial's individual scripts
<ul>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial01_PrepareTheMachine.sh">Tutorial01_­Prepare­The­Machine­.sh</a>
<ul>
<li>Tutorial01­_Prepare­TheMachine/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial01_PrepareTheMachine/PrepareTheMachine_functions.sh">Prepare­TheMachine­_functions­.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial02_VersionControlInTheCloud.sh">Tutorial02_­Version­Control­InThe­Cloud.sh</a>
<ul>
<li>Tutorial02_­Version­Control­InThe­Cloud/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial02_VersionControlInTheCloud/VersionControlInTheCloud_functions.sh">Version­Control­InThe­Cloud­_functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial03_UnitTestAPackage.sh">Tutorial03_­Unit­TestA­Package.sh</a>
<ul>
<li>Tutorial03_­Unit­TestA­Package/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial03_UnitTestAPackage/UnitTestAPackage_functions.sh">Unit­TestA­Package­_functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial04_CodingStyleAndLinting.sh">Tutorial04_­Coding­Style­And­Linting.sh</a>
<ul>
<li>Tutorial04­_Coding­Style­And­Linting/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial04_CodingStyleAndLinting/CodingStyleAndLinting_functions.sh">Coding­Style­And­Linting­_functions­.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial05_AutomaticDocumentationInTheCloud.sh">Tutorial05_­Automatic­Documentation­InTheCloud­.sh</a>
<ul>
<li>Tutorial05_­Automatic­Documentation­InTheC­loud/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial05_AutomaticDocumentationInTheCloud/AutomaticDocumentationInTheCloud_functions.sh">Automatic­Documentation­InTheCloud_­functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial06_CloudContinuousIntegration.sh">Tutorial06­_Cloud­Continuous­Integration.sh</a>
<ul>
<li>Tutorial06_­Cloud­Continuous­Integration/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial06_CloudContinuousIntegration/CloudContinuousIntegration_functions.sh">Cloud­Continuous­Integration_­functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial07_ProductionLogging.sh">Tutorial07_­ProductionLogging.sh</a>
<ul>
<li>Tutorial07_­ProductionLogging/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial07_ProductionLogging/ProductionLogging_functions.sh">ProductionLogging­_functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial08_RealWorldPackage.sh">Tutorial08_­RealWorldPackage.sh</a>
<ul>
<li>Tutorial08_­RealWorldPackage/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial08_RealWorldPackage/RealWorldPackage_functions.sh">RealWorldPackage­_functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial09_PackageSelfTest.sh">Tutorial09_­PackageSelfTest.sh</a>
<ul>
<li>Tutorial09_­PackageSelfTest/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial09_PackageSelfTest/PackageSelfTest_functions.sh">PackageSelfTest­_functions.sh</a></li>
</ul>
</li>
<li><a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial10_AutomatedDeployment.sh">Tutorial10_­Automated­Deployment.sh</a>
<ul>
<li>Tutorial10_­Automated­Deployment/­<a target="_blank" href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/Tutorial10_AutomatedDeployment/AutomatedDeployment_functions.sh">Automated­Deployment­_functions.sh</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
</div>
</div>
</div>
</section>
<!-- Step #1 Section End-->
<div id="copyright">
<div class="container">
<div class="col-md-10">
<p style="text-align:left;">
Ⓒ Copyright 2016, Martin Bramwell, Warehouseman <span style="float:right;">Last edits : 2016/02/09</span>
</p>
<p>
This tutorial series is released under the <a href="http://github.com/martinhbramwell/Meteor-CI-Tutorial/blob/master/LICENSE">MIT license</a>. Please respect its conditions.
</p>
<p>
HTML5 Template, <a href="https://graygrids.com/item/corporal-one-page-responsive-bootstrap-theme/">Ⓒ "Corporal" 2014 (All right reserved),</a> designed & developed by <a href="http://graygrids.com">GrayGrids</a>
</p>
</div>
<div class="col-md-2">
<span class="to-top pull-right"><a href="#hero-area"><i class="fa fa-angle-up fa-2x"></i></a></span>
</div>
</div>
</div>
<!-- Copyright Section End-->
<!-- Bootstrap JS >
<script src="assets/js/bootstrap.min.js"></script -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Smooth Scroll -->
<!-- Smooth Scroll -->
<script src="assets/js/smooth-scroll.js"></script>
<!-- script src="assets/js/lightbox.min.js"></script -->
<!-- All JS plugin Triggers >
<script src="assets/js/main.js"></script -->
</body>
</html>