SemanSemantic-UItic-UI/server/documents/project/development.html.eco

  ---
layout      : 'default'
css         : 'guide'

title       : 'Set-up'
description : 'A guide to developing locally'
type        : 'Semantic Project'
---
<script src="/javascript/intro.js"></script>

<%- @partial('header') %>
<div class="main container">
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Installing Dependencies</a>
      <a class="item">Fixing Bugs</a>
    </div>
  </div>

  <h2 class="ui dividing header">Installing Dependencies</h2>

  <p>It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.</p>

  <h3 class="ui header">1. Install Node</h3>
  <p>Semantic docs are written in DocPad which requires NodeJS. </p>

  <div class="ui warning message">Make sure npm does not require sudo to operate, this might cause permissions issues.</div>

  <ul class="ui list">
    <li><a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">Node JS via Package Manager</a></li>
    <li><a href="https://gist.github.com/isaacs/579814">Installing Node JS without sudo</a></li>
  </ul>

  <h3 class="ui header">2. Fork Semantic</h3>

  <iframe src="http://ghbtns.com/github-btn.html?user=jlukic&repo=semantic=ui&type=fork&count=true&size=large"
  allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>

  <h3 class="ui header">3. Install Dependencies</h3>
  <p>Running update inside the local directory will grab all packages in <code>package.json</code> in the root of the project.</p>

  <div class="code" data-title="Installing dependencies" data-type="terminal">
    npm update
  </div>


  <h3 class="ui header">4. Start Your Server</h3>

  <div class="code" data-title="Starting server locally" data-type="terminal">
    docpad run
  </div>

  <p>Docpad should now run an instance of semantic-ui.com locally you can access at <code>http://localhost:9778</code></p>

  <h2 class="ui dividing header">Fixing Bugs</h2>

  <h3 class="ui header">Watch Script</h3>

  <p>If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in <code>/src/{type}/{elementname}/</code> while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.</p>

  <p>To see exactly what this is doing you can check out our <a href="https://github.com/jlukic/Semantic-UI/blob/master/Gruntfile.js">commented gruntfile</a></p>

  <div class="code" data-title="Watching Changes" data-type="terminal">
    grunt
  </div>

  <p>The watch task is the default grunt task for Semantic, so you can start it quite simply.</p>

  <h3 class="ui header">Running Tests</h3>
  <p>Tests will automatically run with <code>grunt watch</code> if you have started karma</p>

  <div class="code" data-title="Execute tests while developing" data-type="terminal">
    karma start
    grunt watch
  </div>

  <p>You can also run the test suite manually</p>
  <div class="code" data-title="Execute tests while developing" data-type="terminal">
    npm test
    // or
    grunt build
    // or
    karma run
  </div>

  <h3 class="ui header">Packaging Elements</h3>
  <p>For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.</p>

  <div class="code" data-title="Building Release Files" data-type="terminal">
    grunt build
  </div>


  <h3 class="ui header"></h3>

  <div class="ui divider"></div>
  <a class="ui large right labeled teal icon button" href="/introduction.html">
    Next: Library Introduction
    <i class="right arrow icon"></i>
  </a>
</div>