"Experience random updates in the priv/static/js/app.js file whenever changes are made to Vue files in the Phoenix/Elixir/V

Question

"Experience random updates in the priv/static/js/app.js file whenever changes are made to Vue files in the Phoenix/Elixir/V

I have a vue.js/Phoenix application and I am currently facing a challenge with configuring the frontend assets properly. I have noticed that my priv/static/js/app.js file keeps updating whenever I make changes in other files, and I am unable to understand why this is happening. Despite my efforts to research this behavior, I have been unable to find any relevant information.

app.html.eex

<body>
  <%= render @view_module, @view_template, assigns %>
  <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

My main query pertains to the structuring of a vue.js application. The automatic update of the static/js/app.js file when changes are made in asset/src is perplexing to me. I am seeking resources or insights on what might be causing this behavior, or where I can find further information to deepen my understanding.

javascript vue.js elixir phoenix-framework

Answer 1

Answer №1

Aside from Pawel's point, it's possible that this behavior is deliberately set up. There is a watcher specified in the config/dev.exs file:

watchers: [
  node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
  cd: Path.expand("../assets", __DIR__)]]

This is used in development mode to enable "hot reload": the application doesn't need to be reloaded when changes are made to assets, as app.js will be rebuilt and reloaded automatically.

Additionally, there is an assets/brunch-config.js file where users can define how app.js is generated. By default, it compiles everything in the assets folder into a single javascript file, but this behavior can be easily modified (such as excluding certain files from app.js and creating custom rules to access these excluded files).

Answer 2

Aside from Pawel's point, it's possible that this behavior is deliberately set up. There is a watcher specified in the config/dev.exs file:

watchers: [
  node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
  cd: Path.expand("../assets", __DIR__)]]

This is used in development mode to enable "hot reload": the application doesn't need to be reloaded when changes are made to assets, as app.js will be rebuilt and reloaded automatically.

Additionally, there is an assets/brunch-config.js file where users can define how app.js is generated. By default, it compiles everything in the assets folder into a single javascript file, but this behavior can be easily modified (such as excluding certain files from app.js and creating custom rules to access these excluded files).

Answer 3

Answer №2

Despite what you may think, Phoenix (with Brunch) actually encourages this type of behavior.

The concept is to develop your JavaScript functionality in assets/js/app.js, and then Brunch () as a build tool will compile and output the content to priv/static/js/app.js.

Essentially, with the default setup provided by Phoenix, you can write ES6 in your code in assets/js/app.js, but it will be transformed into a form that browsers can interpret and placed in priv/. The contents of priv/static are publicly accessible, and can be included using:

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

To summarize.

The code in priv/static should not be manually altered; it is generated automatically based on changes made in your source control in assets/.

If you need further guidance, you may find some useful information in an older blog post about Phoenix assets here.

Best of luck!

Answer 4

Despite what you may think, Phoenix (with Brunch) actually encourages this type of behavior.

The concept is to develop your JavaScript functionality in assets/js/app.js, and then Brunch () as a build tool will compile and output the content to priv/static/js/app.js.

Essentially, with the default setup provided by Phoenix, you can write ES6 in your code in assets/js/app.js, but it will be transformed into a form that browsers can interpret and placed in priv/. The contents of priv/static are publicly accessible, and can be included using:

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

To summarize.

The code in priv/static should not be manually altered; it is generated automatically based on changes made in your source control in assets/.

If you need further guidance, you may find some useful information in an older blog post about Phoenix assets here.

Best of luck!

Answer 5

Answer №3

My experience with using webpack alongside Vue has been quite positive so far. I find that it employs a similar, customizable watcher feature as the one mentioned by mudasobwa. With webpack, touching a file that is part of the bundle triggers a recompilation of only the necessary files (although this can still be quite a few depending on the dependency graph), whereas brunch may recompile everything.

Additionally, I make use of Yarn to manage npm dependencies, and I typically include vuex unless the project is very basic. Though it's not directly related to file organization, vuex greatly assists in structuring Vue applications that are more complex. When it comes to file structure, I usually have:

/assets

js
- entry point files used for webpack output into separate bundles/apps
- folders for organization, such as /components-views, /store, /shared-utilities
css
- .scss files divided into "global" styles and individual styles required in each entry point. I utilize a general scss stylesheet for all pages and specific css bundles for each page where needed.

As for templates, I've implemented a somewhat convoluted system to automate the loading of bundles in the template's html document head. However, it's also possible to manually load each bundle where required.

Answer 6

My experience with using webpack alongside Vue has been quite positive so far. I find that it employs a similar, customizable watcher feature as the one mentioned by mudasobwa. With webpack, touching a file that is part of the bundle triggers a recompilation of only the necessary files (although this can still be quite a few depending on the dependency graph), whereas brunch may recompile everything.

Additionally, I make use of Yarn to manage npm dependencies, and I typically include vuex unless the project is very basic. Though it's not directly related to file organization, vuex greatly assists in structuring Vue applications that are more complex. When it comes to file structure, I usually have:

/assets

js
- entry point files used for webpack output into separate bundles/apps
- folders for organization, such as /components-views, /store, /shared-utilities
css
- .scss files divided into "global" styles and individual styles required in each entry point. I utilize a general scss stylesheet for all pages and specific css bundles for each page where needed.

As for templates, I've implemented a somewhat convoluted system to automate the loading of bundles in the template's html document head. However, it's also possible to manually load each bundle where required.

"Experience random updates in the priv/static/js/app.js file whenever changes are made to Vue files in the Phoenix/Elixir/V

app.html.eex

Answer №1

Answer №2

Answer №3

Similar questions

Cannot utilize remote.require() in TypeScript due to compatibility issues

Ways to switch Bootstrap 5 accordion element using JavaScript

Image swaps with timer for button

Retrieving information using an ajax request in JavaScript

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Session Redirect Error in Express.js

How do I ensure that in Vue.js, the select element always has the first option selected even when other options are dynamically shown or hidden?

Tips on utilizing browser.getCurrentUrl() within a Protractor examination

What sets the Event and EventHandler apart from each other in terms of functionality?

Incorporating a variety of classes by utilizing loops

Update a specific row in a table by displaying a form modal using Vue.js

I have noticed in my procedures that the calculations are not performed until the second digit is entered into the input values

Why am I unable to access all elements within the map function?

Looking for guidance on implementing throttle with the .hover() function in jQuery?

Begin the React counter with a starting value of two

Issue with Vue JS Components: Button function not working on second click with @click

Ways to set up various Content-Security-Policies and headers in your application?

How come TinyMCE is showing HTML code instead of formatted text?

Guide to retrieving table data using jQuery in a Vue.js function

Utilizing Various Styles within a single Google Sheets Cell