<p class="mb-0">Looking to start your project quickly? Just unzip the <code>phoenix-v1.0.0.zip</code>. We have precompiled and packaged everything in the <code>public</code> directory for you. Start editing the <code>public/pages/starter.html</code> with a text or code editor, save it, and open the file in your favourite browser to see the changes.</p>

<p>Unzip the <code>phoenix-v1.0.0.zip</code> to any folder and open a command line or terminal at that location.
  theme's dev tools require <a href="https://nodejs.org/en/" target="_blank">Node</a> and <a href="https://git-scm.com/" target="_blank">Git</a> . If you do not have them in your machine, please install their latest stable version from their corresponding website. As you have <span class="fw-black text-black">Node and Git installed and accessible from your terminal or command line</span>, install the rest of the theme’s dependencies with: </p><pre><code class="lang-html">npm i
</code></pre>
<p class="mt-4">Now to start webpack development server run:</p><pre><code class="lang-html">npm start
</code></pre>
<p class="mt-4">Webpack will compile the SCSS, transpile the typescript/javascript and will open a browser window to <code>public/index.html</code></p>
<p>All of the files from <code>src </code>folder are monitored for changes, which will tell the browser to reload automatically after any changes are made:</p>
<p class="mt-4">Now you can edit any <code>pug</code> file from <code>src/pug</code>, change SCSS variable with <code>scss/_user-variables.scss</code>, or write your own SCSS code in <code>scss/_user.scss</code> and add or update <code>javaScript</code> from <code>src/js</code> directory. All files will be compiled and will be served from public folder.</p>
<div class="alert alert-soft-warning">In development mode webpack will not write the compiled file to disk. It will be served from browser memory. </div>
<p class="mt-4">By default dev server will compile pug files from <code>./src/pug </code>folder. If you don't use pug, in <code>./webpack/webpack-utils.js </code>file change <code>pugBased </code>variable to <code>false </code></p><pre><code class="lang-html">const pugBased = false; //change this variable to false
//...
</code></pre>
<p class="mt-4">Hit <code>Ctrl+C</code> or just close the command line window to stop the server.</p>
<p>Happy editing!</p>