fuelux/_includes/getting-started-template.html

<!-- Template
================================================== -->
<div class="fu-docs-section">
  <h1 id="templates" class="page-header">Templates</h1>

  <h3>No AMD/UMD Template</h3>
  <p>This template utlizes CDNs, but no AMD.</p>
{% highlight html %}
{% include getting-started-globals-template.html %}
{% endhighlight %}

  <h3>AMD/UMD Template</h3>
  <p>This template utlizes CDNs and AMD modules (with a manager such as <a href="https://requirejs.org">require.js</a>) and bundling for production:</p>

{% highlight html %}
{% include getting-started-amd-template.html %}
{% endhighlight %}

  <h3>AMD/UMD Template, no CDN</h3>
  <p>This template does not utilize CDNs. It does utilize AMD modules (with a manager such as <a href="https://requirejs.org">require.js</a>) and bundling for production. Your setup will probably be different (This is a sample taken from <a href="https://github.com/cormacmccarthy/fuelux-boilerplate-static-node-server">fuelux-boilerplate project</a>):</p>

{% highlight html %}
{% include getting-started-amd-template-no-cdn.html %}
{% endhighlight %}
<!-- BEGIN FROM GITHUB README.md -->

<h3>
<a name="user-content-umdamd-support" class="anchor" href="#umdamd-support"><span class="octicon octicon-link"></span></a>UMD/AMD Support</h3>

<p>If you use AMD (such as <a href="https://requirejs.org">RequireJS</a>), we recommend only loading the controls you need (e.g.- <code>fuelux/checkbox</code>).</p>

<ol>
  <li>
    Reference the Fuel UX directory in your paths configuration, wherever it is located:

    <div class="highlight highlight-javascript"><pre><span class="nx">require</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span>
        <span class="nx">paths</span><span class="o">:</span> <span class="p">{</span>
            <span class="s1">'fuelux'</span><span class="o">:</span> <span class="s1">'{{site.cdn.js}}'</span>
            <span class="c1">//...</span>
        <span class="p">}</span>
    <span class="p">});</span>
    </pre></div>
  </li>
  <li>List individual fuelux controls needed as dependencies within your application modules:

<div class="highlight highlight-javascript"><pre><span class="nx">define</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">require</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">spinbox</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'fuelux/spinbox'</span><span class="p">);</span>
    <span class="c1">//...</span>
<span class="p">});</span>
</pre></div>

<p>In instances where you require every module from fuel ux, you can use <code>fuelux/all</code> instead of listing each module individually.</p>

<p>Fuel UX also supports placing components in their own <code>&lt;script&gt;</code> tags. Be sure to <a href="/javascript.html">check component dependencies in the controls documentation</a> and put modules in the correct order if you load them in this method. Errors will appear in the console if you have not loaded dependencies correctly.</p>

<p>The following components have dependencies:</p>
<ul>
  <li><a href="javascript.html#repeater-dependencies">Repeater</a></li>
  <li><a href="javascript.html#scheduler-dependencies">Scheduler</a></li>
</ul>

</div>

<h3><a name="user-content-commonjs-support" class="anchor" href="#commonjs-support"><span class="octicon octicon-link"></span></a>CommonJS Support</h3>

<p>If you use a CommonJS build system (such as <a href="https://webpack.github.io/">Webpack</a> or <a href="https://browserify.org/">Browserify</a>), we recommend only loading the controls you need. You can also load all the controls by including the npm package.</p>

<h4>Working with Browserify</h4>

<p>This should work out of the box with Browserify.</p>

<h4>Working with webpack</h4>

<ol>
  <li>Install <code>imports-loader</code> for webpack
{% highlight js %}
npm install --save-dev imports-loader
{% endhighlight %}
  </li>
  <li>Add rule to webpack configuration
{% highlight js %}
{
  test: /fuelux\/js\/.*\.js$/,
  use: ['imports-loader?define=>false']
}
{% endhighlight %}
  </li>
  <li>Include individual modules or fuelux lib where needed
{% highlight js %}
// include where you need to
require('fuelux/js/checkbox')
// or
require('fuelux')
{% endhighlight %}
  </li>
</ol>

<div class="fu-docs-section">
<!-- Cross link to new migration page -->
<div class="fu-callout fu-callout-info">
  <h4 id="migration">Migrating from v2.x to v3.x</h4>
  <p>Interested in migrating from an older version of Fuel UX to v3.x? Check out <a href="migration.html">our migration guide</a>.</p>
</div>
</div>