<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="232050" data-post-id="232050">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="f0rest8" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f0rest8/120/38551_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  f0rest8
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This was a really great guide thank you! I also had to cross-reference the asset management guide:</p>
<p><a href="https://github.com/phoenixframework/phoenix/blob/master/guides/asset_management.md" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/phoenixframework/phoenix/blob/master/guides/asset_management.md</a></p>
<p>That I found after this forum post on <a href="https://forum.elixirforum.com/t/how-do-i-use-a-custom-font-with-phoenix-1-6-and-esbuild/43791/17" rel="nofollow">external flags for esbuild</a>. You’ll notice that the asset_management guide is updated to reflect <code>external:</code> rather than <code>external=</code>. I also cross-referenced with PragProg’s free guide on <a href="https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix" rel="noopener nofollow ugc">Tailwind with esbuild</a>, particularly they add slightly to the deploy script in the <code>assets/package.json</code>:</p>
<pre data-code-wrap="json"><code class="lang-json">"scripts": {
  "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
},
</code></pre>
<p>Finally, I had to make slight adjustments because Metamorphic has an umbrella app structure. So, my base project <code>mix.exs</code> has this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">"assets.deploy": [
  "cmd --cd ../metamorphic_web/assets npm run deploy",
  "esbuild default --minify",
  "phx.digest"
]
</code></pre>
<p>And my esbuild config expands the path as such:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">cd: Path.expand("../apps/metamorphic_web/assets", __DIR__)
</code></pre>
<p>That did the trick for me along with making sure my asset handling with <code>priv/static</code> was updated for deployment following the upgrade from a 1.5 app to 1.6.</p>
<p>So, if anyone else is working in an umbrella app, then hopefully this helps you out too. And, again, thank you for the wonderful guide. <img src="https://forum.elixirforum.com/images/emoji/apple/heart.png?v=15" title=":heart:" class="emoji" alt=":heart:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="232050" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-1-6-0-liveview-esbuild-tailwind-jit-alpinejs-a-brief-tutorial/41669/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-232050" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="232050"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #33"></div>
  </section>
</div>
    <div class="postbit" id="232126" data-post-id="232126">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="trkoch" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/trkoch/120/23423_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  trkoch
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="praveenperera" data-post="32" data-topic="41669">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/praveenperera/48/16422_2.png" class="avatar"> praveenperera:</div>
<blockquote>
<p>For google the errors you’ll see are</p>
</blockquote>
</aside>
<p>Thank you so much! Your plan to let Google know worked out pretty well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="232126" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-1-6-0-liveview-esbuild-tailwind-jit-alpinejs-a-brief-tutorial/41669/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-232126" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="232126"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #34"></div>
  </section>
</div>
    <div class="postbit" id="232518" data-post-id="232518">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Seb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Seb/120/10346_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Seb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>When esbuild tries to compile app.js, it fails on</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&gt; js/app.js:20:16: error: Expected ";" but found "from"
    20 │ import "Alpine" from "alpinejs";
</code></pre>
<p>if using just import "Alpine; then</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"> &gt; js/app.js:20:7: error: Could not resolve "Alpine" (mark it as external to exclude it from the bundle)
    20│ import "Alpine";
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="232518" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-1-6-0-liveview-esbuild-tailwind-jit-alpinejs-a-brief-tutorial/41669/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-232518" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="232518"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #35"></div>
  </section>
</div>
    <div class="postbit" id="232553" data-post-id="232553">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sergio" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sergio/120/26966_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sergio
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I just deleted my folder and recloned the project as is; <code>mix setup</code> and <code>mix phx.server</code> has the project running fine. Check what you’re doing differently and make sure you <code>npm install</code> in your assets folder <a class="mention" href="/u/seb" rel="nofollow">@Seb</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="232553" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-1-6-0-liveview-esbuild-tailwind-jit-alpinejs-a-brief-tutorial/41669/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-232553" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="232553"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #36"></div>
  </section>
</div>
    <div class="postbit" id="274564" data-post-id="274564">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="lszyba1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lszyba1/120/26170_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  lszyba1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>For this one specific error. I wanted to comment, that this error means that you did not install it. And what it usually means is that you don’t have npm as one of the dependencies to do npm install --prefix /assets.</p>
<p>More on a solution here:</p><aside class="onebox allowlistedgeneric" data-onebox-src="http://write.w5hnews.com/u/cwSNkeLNXf#fly-deploy-elixir-pheonix-app-with-npm">
  <header class="source">
      <img src="http://write.w5hnews.com/u/favicon.ico" class="site-icon" alt="" width="" height="">

      <a href="http://write.w5hnews.com/u/cwSNkeLNXf#fly-deploy-elixir-pheonix-app-with-npm" target="_blank" rel="noopener nofollow ugc">write.w5hnews.com</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="http://write.w5hnews.com/u/cwSNkeLNXf#fly-deploy-elixir-pheonix-app-with-npm" target="_blank" rel="noopener nofollow ugc">@MrInterestFull

— Open to Work - How can you leverage my experience?</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>It took some time to realize what the error actually meant.<br>
Hope this helps future searchers that find this page on google.<br>
Thanks<br>
Lucas</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="274564" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-1-6-0-liveview-esbuild-tailwind-jit-alpinejs-a-brief-tutorial/41669/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-274564" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="274564"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>