Localhost Setup Quickstart - Vanilla Success
<main> <article class="userContent"> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/BO1A4RB7NWGQ/microsoftteams-image-288-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BO1A4RB7NWGQ/microsoftteams-image-288-29.png" alt="MicrosoftTeams-image (8).png" height="108" width="1356" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Vanilla has only 1 supported localhost installation configuration, <a href="https://github.com/vanilla/vanilla-docker" rel="nofollow noreferrer ugc">Vanilla Docker</a>.</p><h2 data-id="vanilla-docker">Vanilla Docker</h2><p>Vanilla Docker is a self-container docker-compose setup providing:</p><ul><li>PHP</li><li>MySQL</li><li>Nginx</li><li>Memcached</li><li>Sphinx</li><li>XDebug</li><li>Local SSO & Embedding Stubs</li></ul><h2 data-id="prerequisites">Prerequisites</h2><ul><li><a href="https://brew.sh/" rel="nofollow noreferrer ugc">Brew installed</a>.</li><li><a href="https://docs.docker.com/install/" rel="nofollow noreferrer ugc">Docker installed.</a></li><li><a href="https://nodejs.org/en/download/" rel="nofollow noreferrer ugc">Node 12.x installed.</a></li><li><a href="https://yarnpkg.com/lang/en/docs/install/#mac-stable" rel="nofollow noreferrer ugc">Yarn 1.15+ installed.</a></li><li>Composer version 1 installed.</li></ul><h4 data-id="composer-installation">Composer installation</h4><pre class="code codeBlock" spellcheck="false" tabindex="0">brew install composer composer self-update --1 </pre><h2 data-id="setting-up-vanilla-docker">Setting up Vanilla Docker</h2><h3 data-id="clone-relevant-repositories">Clone relevant repositories</h3><p>Create a directory where you will clone all of your vanilla repositories and make sure this directory is shared in the docker desktop settings.</p><div class="embedExternal embedImage display-small float-right"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/B42C040DDK6I/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/B42C040DDK6I/image.png" alt="image.png" height="1036" width="2410" loading="lazy" data-display-size="small" data-float="right"></img></a> </div> </div> <p>Your user directory is generally shared so this is a good place to put it.</p><p><br></p><p>In this guide we will use the directory <code class="code codeInline" spellcheck="false" tabindex="0">~/vnla</code>.</p><ul><li>Clone the <a href="https://github.com/vanilla/vanilla-docker" rel="nofollow noreferrer ugc">https://github.com/vanilla/vanilla-docker</a> repository into this directory.</li><li>Clone the <a href="https://github.com/vanilla/vanilla" rel="nofollow noreferrer ugc">https://github.com/vanilla/vanilla</a> repository into this directory. <strong><em>It MUST be in the path ~/vnla/vanilla.</em></strong><ul><li><em>Vanilla employees should clone the </em><a href="https://github.com/vanilla/vanilla-cloud" rel="nofollow noreferrer ugc">https://github.com/vanilla/vanilla-cloud</a> repository instead, but ensure that the the directory it is cloned into is called vanilla.</li><li><strong><em>Vanilla employees should run the following script after cloning</em></strong>. <code class="code codeInline" spellcheck="false" tabindex="0">./cloud/scripts/symlink-addons</code>.</li></ul></li></ul><h4 data-id="important-notes">Important notes</h4><p>In this scenario the <strong><em>entire</em></strong><em> </em><strong><em>contents of the ~/vnla </em></strong>directory will be synchronized into the docker containers. Having an excessive amount of contents here can slow things down so it is recommended that you only put things needed to run vanilla into this directory.</p><h2 data-id="run-the-macos-setup-script">Run the macOS setup script</h2><p>Run the following setup script.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla-docker sudo ./mac-setup.sh </pre><h2 data-id="symlink-the-docker-config">Symlink the docker config</h2><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla/conf ln -s ../../vanilla-docker/bootstrap.before.php </pre><h2 data-id="installing-dependencies-building">Installing Dependencies & Building</h2><p>The next step is to install composer dependencies & node_modules, then build the frontend.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla composer install </pre><p><strong><em>The first time you run this, it may take a while. </em></strong>Subsequent runs should be faster.</p><h3 data-id="developer-build">Developer Build</h3><p>If you are constantly updating the javascript or CSS or addons or themes, it's recommended to use the developer build. This keeps the build in memory and has fast rebuilds of changes.</p><p><strong>Limitations</strong></p><ul><li>This build only works if you have installed your site. This should result in <code class="code codeInline" spellcheck="false" tabindex="0">conf/config.php</code> file being generated.</li><li>If you enable or disable an addon your will have to restart your build.</li><li>If you create a new entry in an addon (Eg. <code class="code codeInline" spellcheck="false" tabindex="0">src/scripts/entries</code> ) you will have to restart your build.</li></ul><pre class="code codeBlock" spellcheck="false" tabindex="0"># Add This to you config.php # $Configuration['HotReload']['Enabled'] = true; # The run this yarn build:dev </pre><h2 data-id="startingstopping-docker">Starting/Stopping Docker</h2><p>This is how you will start the docker containers.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla-docker docker compose up --build -d </pre><p>To shut down the containers in the future run this:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla-docker docker compose down </pre><h2 data-id="go-to-your-site.">Go to your site.</h2><ul><li>Navigate to <a href="https://dev.vanilla.localhost" rel="nofollow noreferrer ugc">https://dev.vanilla.localhost</a>.</li><li>Use the following credentials.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/7UPVJG8AZOYE/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7UPVJG8AZOYE/image.png" alt="image.png" height="1196" width="2158" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>Finish filling out the form.</li><li>Submit the form.</li><li>See your new site.</li></ul><h2 data-id="install-cloud-addons">Install Cloud Addons</h2><p><strong><em>For vanilla employees only.</em></strong></p><p>Run the following:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">cd ~/vnla/vanilla # Symlink cloud addons ./cloud/scripts/symlink-addons # Install dependencies and rebuild frontend composer install </pre><p><br></p> </article> </main>