<p class="mb-0">Phoenix uses <code>Webpack </code>to compile and build pug, scss and script files. Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. To learn more about <code> Webpack  </code>visit their <a href="https://webpack.js.org/concepts/" target="_blank">official documentation.</a></p>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="bg-300 text-center font-sans-serif">
      <tr>
        <th class="text-nowrap">Command</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-nowrap"><code>npm run start</code></td>
        <td>Will create a development server at <code>localhost:3000</code></td>
      </tr>
      <tr>
        <td class="text-nowrap"><code>npm run build</code></td>
        <td>Will build all asset files from <code>./src </code>directory to public directory</td>
      </tr>
      <tr>
        <td class="text-nowrap"><code>npm run build:production</code></td>
        <td>Will build all asset files from <code>./src </code>directory to<code>./build </code>directory in a compressed version to deploy in server.</td>
      </tr>
      <tr>
        <td class="text-nowrap"><code>npm run compile:scripts</code></td>
        <td>Will build script files from <code>./src/scripts </code>directory to <code>./public/assets/js </code>directory.</td>
      </tr>
      <tr>
        <td class="text-nowrap"><code>npm run compile:scss</code></td>
        <td>Will build scss files from <code>./src/scss </code>directory to <code>./public/assets/css </code>directory.</td>
      </tr>
      <tr>
        <td class="text-nowrap"><code>npm run compile:pug</code></td>
        <td>Will build pug files from <code>./src/pug </code>directory to <code>./public</code>directory.</td>
      </tr>
    </tbody>
  </table>
</div>

<p class="mb-0">To make a new page in Phoenix you have to do the following things:</p>
<ol>
  <li>First include <code>assets/css/phoenix.min.css, assets/css/user.min.css </code>and <code>assets/js/phoenix.min.js </code>files in your html file.</li>
  <li>Many basic elements are available as a bundle with CSS & JS, along with some advanced elements. This will provide you the advantage upon CSS or JS.</li>
  <li>Charts, maps, or any custom js or css are necessary to include in your html.</li>
</ol>