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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I haven’t used GraphQL, but..</p>
<aside class="quote no-group" data-username="DragosMocrii" data-post="11" data-topic="20245">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dragosmocrii/48/13125_2.png" class="avatar"> DragosMocrii:</div>
<blockquote>
<ul>
<li>The front-end app built with VueJS does not have to be integrated in the same project with the Phoenix back-end app</li>
<li>In fact, the front-end app can be worked on independently from the back-end (planning to mock all GraphQL responses anyway while working on the front-end first)</li>
<li>The Phoenix back-end app does not need to have any JS build tools, since it does not serve any static content. Its sole purpose is to serve the GraphQL queries. As suggested before, this can be achieved by creating the Phoenix app with the --no-webpack --no-html arguments.</li>
<li>The front-end can be deployed as a static site to AWS S3 to leverage distribution through Cloudfront</li>
<li>The front-end app (regardless from where it is served in Cloudfront) would send the GraphQL requests to the same central Phoenix app</li>
<li>Since the VueJS app would be a walled section (ie <a href="http://app.mysite.com" rel="noopener nofollow ugc">app.mysite.com</a>) requiring the user to log in, it’s not supposed to be SEO friendly anyway, so no concerns needed about that</li>
<li>The content site (<a href="http://mysite.com" rel="noopener nofollow ugc">mysite.com</a>) can be built independently with other tools for content management like Hugo, Wordpress, etc</li>
</ul>
</blockquote>
</aside>
<p>These seem ok.</p>
<aside class="quote no-group" data-username="DragosMocrii" data-post="11" data-topic="20245">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dragosmocrii/48/13125_2.png" class="avatar"> DragosMocrii:</div>
<blockquote>
<p>(This last one item is something I’m curious how to solve. Supposedly, we can use Cloudfront to make sure the front-end is served with no bottlenecks. Could something similar be used to serve the Phoenix back-end, but keep the same GraphQL endpoint URI? Or, am I being too paranoid about this, given that Phoenix can handle millions of requests at once, which means this should be of no concerns until it becomes an issue?)</p>
</blockquote>
</aside>
<p>I’m not exactly sure if primary reason to use Cloudfront is eliminating any kind of bottlenecks.<br>
I guess you are a bit paranoid, it should be fine. But remember that Phoenix can handle so many requests at once only if it has enough resources <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20">.</p>
<aside class="quote no-group" data-username="DragosMocrii" data-post="11" data-topic="20245">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dragosmocrii/48/13125_2.png" class="avatar"> DragosMocrii:</div>
<blockquote>
<p>Is this a valid way to use an Elixir/Phoenix app? I know Phoenix is touted for being exceptionally efficient at rendering templates, so if I’m only using it as a GraphQL server, am I losing any of Elixir’s/Phoenix’s advantages?</p>
</blockquote>
</aside>
<p>Totally valid. You don’t lose any advantages if you use it purely for API.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121823" 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-vue-js-cli-how-do-you-manage-the-build-and-development-pipelines/20245/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-121823" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121823"
                     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 #11"></div>
  </section>
</div>
    <div class="postbit" id="121889" data-post-id="121889">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thank you!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="121889" 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-vue-js-cli-how-do-you-manage-the-build-and-development-pipelines/20245/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-121889" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="121889"
                     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 #12"></div>
  </section>
</div>
    <div class="postbit" id="171789" data-post-id="171789">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="marcalchca" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  marcalchca
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi,</p>
<p>Any news since a year ago? Have you applied successfully the approach you described?</p>
<p>Below is the context/reason for my question:</p>
<p>I’m considering a career switch and I decided to use Elixir/Phoenix (OTP).<br>
I want to build for sure web + mobile apps (maybe target also smart watch and maybe IoT?).</p>
<p>I think of building PWAs to span all targets with mainly 1 code base (as closely to native mobile apps for the mobile part of my target).<br>
However, so far there’s no home-made front-end framework for Phoenix … except maybe LiveView but it doesn’t support offline scenario’s (so far - maybe BEAM in local? When? Or compile to WASM? Roadmap?).</p>
<p>So in order to stay with Elixir/Phoenix I feel forced to choose between:</p>
<ul>
<li>using LiveView and gaining enormous productivity for many use cases but failing for real mobile use cases</li>
<li>using LiveView and inventing a solution myself for the gap (not realistic, I guess?)</li>
<li>turning to another front-end framework or solution (but I want to AVOID JavaScript as much as possible)</li>
</ul>
<p>I considered ELM, but there’s too much controversy around it (small user base, support?, LT-continuity? …).<br>
So I’m looking at the alternatives - so many of them !!! (e.g. Xamarin (but forced to c#), Flutter?, React/Native (Javascript !), Corona?, AppCelerator? PhoneGap? …)</p>
<p>Vue seems to be the 2nd best choice (after LiveView if it were fully mature) to get up-and-running fast.<br>
There’s a lot of tooling around it and it has nativescript …</p>
<p>What’s your advice, assuming you have used Vue+Phoenix in the mean time?</p>
<p>(advice from anyone is much appreciated)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="171789" 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-vue-js-cli-how-do-you-manage-the-build-and-development-pipelines/20245/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-171789" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="171789"
                     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 #13"></div>
  </section>
</div>
    <div class="postbit" id="171820" data-post-id="171820">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josvme" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josvme
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I don’t know if this is going to be useful to you. But I will try anyway :D.</p>
<p>I have some experience using Vue and Phoenix. I chose Vue for the same reason that it will be easier to convert to a mobile app at some point. say using Nativescript. . I am also not a fan of Javascript, so I use Vue with Typescript, which works amazingly well.</p>
<p>Now coming to development, I am a fan of separating frontend from backend. This allows independent development of both and facilitates decoupling. Deploying Vue with Phoenix is easy. I just compile Vue to a single JS file and serve it using Nginx. So my index page shows Vue app. Vue calls into Phoenix using /api url. All calls to /api is redirected  by nginx to my Phoenix listening on say port 4000. When combined with Docker, the deployment is also very pleasant. In case you are interested you can also check out my <a href="https://josv.me/tutorials/vuephoenix/client_server_blog_12/" rel="noopener nofollow ugc">blog post</a> for more info. Have  a nice day <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" 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="171820" 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-vue-js-cli-how-do-you-manage-the-build-and-development-pipelines/20245/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-171820" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="171820"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="174756" data-post-id="174756">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="marcalchca" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  marcalchca
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks a lot.<br>
Sorry for my late reply, not about not being interested, I was drawn in work (despite lock down, lucky me).</p>
<p>I’ll certainly have a look at your blog post! Thanks for your post.<br>
Lately LiveView is getting better and better … I’m wondering how long it will take before the “offline” issue is tackeled, and then we probably don’t need anything else anymore :-).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="174756" 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-vue-js-cli-how-do-you-manage-the-build-and-development-pipelines/20245/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-174756" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="174756"
                     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>