Brunch not automatically build

Phoenix Forum Questions / Help
,
1

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”
}
}

2

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

1 Like
3

Hello Sir, actually sometimes it automatically update the page, but after a few changes it stop updating the web page.

use Mix.Config

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with brunch.io to recompile .js and .css sources.
config :app, AppWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
                    cd: Path.expand("../assets", __DIR__)]]

# ## SSL Support
#
# In order to use HTTPS in development, a self-signed
# certificate can be generated by running the following
# command from your terminal:
#
#     openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -subj "/C=US/ST=Denial/L=Springfield/O=Dis/CN=www.example.com" -keyout priv/server.key -out priv/server.pem
#
# The `http:` config above can be replaced with:
#
#     https: [port: 4000, keyfile: "priv/server.key", certfile: "priv/server.pem"],
#
# If desired, both `http:` and `https:` keys can be
# configured to run both http and https servers on
# different ports.

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

# Do not include metadata nor timestamps in development logs
config :logger, :console, format: "[$level] $message\n"

# Set a higher stacktrace during development. Avoid configuring such
# in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20

# Configure your database
config :app, App.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: "root",
  password: "",
  database: "app_dev",
  hostname: "localhost",
  pool_size: 10
4

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)$}
    ]
  ]
2 Likes
5

thanks peerreynders