saint

saint

Brunch not automatically build

Hello,
I am using React on the Front-end, every time i made the changes it does not automatically build. I always type build brunch on the assets folder.

this is my brunch.config.js

exports.config = {
// See Brunch - ultra-fast HTML5 build tool for docs.
files: {
javascripts: {
joinTo: “js/app.js”

  // To use a separate vendor.js bundle, specify two files path
  // http://brunch.io/docs/config#-files-
  // joinTo: {
  //   "js/app.js": /^js/,
  //   "js/vendor.js": /^(?!js)/
  // }
  //
  // To change the order of concatenation of files, explicitly mention here
  // order: {
  //   before: [
  //     "vendor/js/jquery-2.1.1.js",
  //     "vendor/js/bootstrap.min.js"
  //   ]
  // }
},
stylesheets: {
  joinTo: "css/app.css"
},
templates: {
  joinTo: "js/app.js"
}

},

conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to “/assets/static”. Files in this directory
// will be copied to paths.public, which is “priv/static” by default.
assets: /^(static)/
},

// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [“static”, “css”, “js”, “vendor”],
// Where to compile files to
public: “../priv/static”
},

// Configure your plugins
plugins: {
babel: {
presets: [“es2015”, “react”],
// Do not use ES6 compiler in vendor code
ignore: [/web/static/vendor/]
}
},

modules: {
autoRequire: {
“js/app.js”: [“js/app”]
}
},

npm: {
enabled: true,
whitelist: [“phoenix”, “phoenix_html”, “react”, “react-dom”]
}
};

Package.json

{
“repository”: {},
“license”: “MIT”,
“scripts”: {
“deploy”: “brunch build --production”,
“watch”: “brunch watch --stdin”
},
“dependencies”: {
“axios”: “^0.17.0”,
“babel-preset-react”: “^6.24.1”,
“phoenix”: “file:../deps/phoenix”,
“phoenix_html”: “file:../deps/phoenix_html”,
“react”: “^16.0.0”,
“react-dom”: “^16.0.0”,
“react-router-dom”: “^4.2.2”
},
“devDependencies”: {
“babel-brunch”: “6.1.1”,
“brunch”: “2.10.9”,
“clean-css-brunch”: “2.10.0”,
“uglify-js-brunch”: “2.10.0”
}
}

Marked As Solved

peerreynders

peerreynders

Is it possible that is only what you think is happening? In brunch-config.js:

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],

This is watching for modifications to the files under assets/static, assets/css, assets/js, assets/vendor. So nothing will happen if you make modifications to files that are not under those folders.

http://brunch.io/docs/config#-paths-

Now app.js is in assets/js but:

  files: {
    javascripts: {
      joinTo: 'js/app.js'

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }

This is still the default configuration - it specifies the file the JS bundle is based on but it hasn’t been customized to “join other files to it” as is being alluded to in the comments. So Brunch can only go by the imports and requires inside app.js to determine when the bundle needs to be rebuilt (as far as I understand it) - so app.js is only going to be rebuilt (and reloaded) when those known dependencies are modified.

http://brunch.io/docs/config#-files-
http://brunch.io/docs/config#pattern-matching

Now what triggers the live reload is that Brunch updates priv/static/js/app.js in response to the JS bundle being rebuilt. So if are updating JS files under assets that don’t trigger a bundle rebuild, no reload will happen.

Reloads only happen when files matching the configured patterns are updated:

# Watch static and templates for browser reloading.
config :jslib, JslibWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{lib/my_app/views/.*(ex)$},
      ~r{lib/my_app/templates/.*(eex)$}
    ]
  ]

Also Liked

idi527

idi527

Does it work if you type npm run watch? Can you show your config/dev.exs?

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement