{{+bindTo:partials.standard_nacl_article}}

<section id="building-a-nacl-app">
<span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>Building a NaCl App</h1>
<h2 id="in-the-browser">In the browser!</h2>
<p>Follow along with Brad Nelson&#8217;s Google I/O 2014 talk.
Explore our new in-browser development environment and debugger.</p>
<p>Learn how easy it is to edit, build, and debug NaCl application
all in your desktop web browser or on a Chromebook.
Work either on-line or off-line!</p>
<iframe class="video" width="500" height="281"
src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><div><b><font color="#880000" style="font-size: 120%">
NOTE: The NaCl Development Environment has changed since this video was made.
The instructions below no longer match the video.
</font></b></div><h3 id="our-web-based-tools">Our Web-based Tools</h3>
<p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>.
At this point, they are a learning tool and demonstration of NaCl&#8217;s
flexibility, but are not the recommended tools for a production application.
In the future, that may change, but for the moment,
to develop a substantial application for Native Client /
Portable Native Client,
we recommend you use the
<a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p>
<b><font color="#880000">
NOTE: The NaCl Development Environment is not yet stable.
Ideally, user data is preserved, but currently it can be lost during updates
or sporadically. We're working to resolve this.
</font></b><h3 id="installation">Installation</h3>
<p>The setup process currently requires several steps.
We&#8217;re working to reduce the number of steps in future releases.
As the process gets easier, we&#8217;ll update this page.</p>
<p>To install the development environment:</p>
<blockquote>
<div><ul class="small-gap">
<li>Install the <a class="reference external" href="https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa">NaCl Development Environment</a>.</li>
<li><p class="first">Navigate to: chrome://flags and:</p>
<ul class="small-gap">
<li>Enable <strong>Native Client</strong>.</li>
<li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li>
</ul>
</li>
<li>First run is slow (as it downloads and installs packages). Launch and allow
initial install to complete before first use.</li>
</ul>
</div></blockquote>
<h4 id="editing">Editing</h4>
<p>To follow along in this codelab, you&#8217;ll need to use a text editor to modify
various files in our development environment.
There are currently two editor options, nano or vim.
We have an Emacs port, but it is not yet available in the Dev Environment
(coming soon).
If you&#8217;re unsure what to pick, nano is simpler to start with and has on-screen
help.</p>
<ul class="small-gap">
<li><p class="first">You can open <strong>nano</strong> like this:</p>
<pre class="prettyprint">
$ nano &lt;filename&gt;
</pre>
<p>Here&#8217;s an online <a class="reference external" href="http://mintaka.sdsu.edu/reu/nano.html">nano tutorial</a>.</p>
</li>
<li><p class="first">You can open <strong>vim</strong> like this:</p>
<pre class="prettyprint">
$ vim &lt;filename&gt;
</pre>
<p>Here&#8217;s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p>
</li>
</ul>
<h3 id="git-setup">Git Setup</h3>
<p>This tutorial also uses a revision control program called
<a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>.
In order to commit to a git repository,
you need to set up your identity.</p>
<p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite>
for use:</p>
<pre class="prettyprint">
git config --global user.name &quot;John Doe&quot;
git config --global user.email johndoe&#64;example.com
</pre>
<h3 id="tour-follow-the-video">Tour (follow the video)</h3>
<p>Create a working directory and go into it:</p>
<pre class="prettyprint">
$ mkdir work
$ cd work
</pre>
<p>Download a zip file containing our sample:</p>
<pre class="prettyprint">
$ curl https://nacltools.storage.googleapis.com/io2014/voronoi.zip -O
$ ls -l
</pre>
<p>Unzip the sample:</p>
<pre class="prettyprint">
$ unzip voronoi.zip
</pre>
<p>Go into the sample and take a look at the files inside:</p>
<pre class="prettyprint">
$ cd voronoi
$ ls
</pre>
<p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE
(or Native Client Executable).</p>
<img alt="/native-client/images/voronoi1.png" src="/native-client/images/voronoi1.png" />
<p>Let&#8217;s use git (a revision control program) to track our changes.</p>
<p>First, create a new repository:</p>
<pre class="prettyprint">
$ git init
</pre>
<p>Add everything here:</p>
<pre class="prettyprint">
$ git add .
</pre>
<p>Then commit our starting state:</p>
<pre class="prettyprint">
$ git commit -m &quot;imported voronoi demo&quot;
</pre>
<p>Now, run <strong>make voronoi</strong> to compile and run our program (NOTE: Changed since
video, we&#8217;ve got Makefiles!):</p>
<pre class="prettyprint">
$ make voronoi
</pre>
<h3 id="thanks">Thanks</h3>
<p>Thanks for checking out our environment.
Things are rapidly changing and in the coming months you can expect to see
further improvements and filling out of our platform and library support.</p>
<p>Follow the status of the NaCl Dev Environment at <a class="reference internal" href="/native-client/nacldev.html"><em>this page</em></a>.</p>
</section>

{{/partials.standard_nacl_article}}