Remove Webpack from a phoenix project

Phoenix Forum Questions / Help
,
1

I have a phoenix project that I started with webpack. But now we are planning to do separate frontend from this project? How can I remove webpack and all assets related data from the project?

2

:wave:

You can generate two phoenix projects, one with webpack mix phx.new app && mv app with_webpack and one without webpack mix phx.new app --no-webpack && mv app without_webpack, and then diff them diff -bur with_webpack without_webpack.

--- with_webpack/.gitignore	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/.gitignore	2020-06-23 20:34:17.000000000 +0300
@@ -22,12 +22,6 @@
 # Ignore package tarball (built via "mix hex.build").
 app-*.tar

-# If NPM crashes, it generates a log, let's ignore it too.
-npm-debug.log
-
-# The directory NPM downloads your dependencies sources to.
-/assets/node_modules/
-
 # Since we are building assets from assets/,
 # we ignore priv/static. You may want to comment
 # this depending on your deployment strategy.
diff -bur with_webpack/README.md without_webpack/README.md
--- with_webpack/README.md	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/README.md	2020-06-23 20:34:17.000000000 +0300
@@ -4,7 +4,6 @@

   * Install dependencies with `mix deps.get`
   * Create and migrate your database with `mix ecto.setup`
-  * Install Node.js dependencies with `npm install` inside the `assets` directory
   * Start Phoenix endpoint with `mix phx.server`

 Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
Only in with_webpack/: assets
diff -bur with_webpack/config/config.exs without_webpack/config/config.exs
--- with_webpack/config/config.exs	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/config/config.exs	2020-06-23 20:34:17.000000000 +0300
@@ -13,10 +13,10 @@
 # Configures the endpoint
 config :app, AppWeb.Endpoint,
   url: [host: "localhost"],
-  secret_key_base: "DU0rHOFuhG23vIgWOK6uuxwKJ0R74pzNnGMB4kuFUxKdUeJP+AJ+IOuPD/KKwX7u",
+  secret_key_base: "uYpDOWgQtJJkMXw4vax/nWXf/gNACE+q3wpbZIiFnHohSe85458IqiJy9ZYhG3Um",
   render_errors: [view: AppWeb.ErrorView, accepts: ~w(html json), layout: false],
   pubsub_server: App.PubSub,
-  live_view: [signing_salt: "LP0FfMWL"]
+  live_view: [signing_salt: "ovuZVIMx"]

 # Configures Elixir's Logger
 config :logger, :console,
diff -bur with_webpack/config/dev.exs without_webpack/config/dev.exs
--- with_webpack/config/dev.exs	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/config/dev.exs	2020-06-23 20:34:17.000000000 +0300
@@ -20,15 +20,7 @@
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: [
-    node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch-stdin",
-      cd: Path.expand("../assets", __DIR__)
-    ]
-  ]
+  watchers: []

 # ## SSL Support
 #
diff -bur with_webpack/lib/app_web/endpoint.ex without_webpack/lib/app_web/endpoint.ex
--- with_webpack/lib/app_web/endpoint.ex	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/lib/app_web/endpoint.ex	2020-06-23 20:34:17.000000000 +0300
@@ -7,7 +7,7 @@
   @session_options [
     store: :cookie,
     key: "_app_key",
-    signing_salt: "w64WMbbk"
+    signing_salt: "cDRyPyaQ"
   ]

   socket "/socket", AppWeb.UserSocket,
diff -bur with_webpack/mix.exs without_webpack/mix.exs
--- with_webpack/mix.exs	2020-06-23 20:33:56.000000000 +0300
+++ without_webpack/mix.exs	2020-06-23 20:34:17.000000000 +0300
@@ -56,7 +56,7 @@
   # See the documentation for `Mix` for more info on aliases.
   defp aliases do
     [
-      setup: ["deps.get", "ecto.setup", "cmd npm install --prefix assets"],
+      setup: ["deps.get", "ecto.setup"],
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]
Only in without_webpack/priv: static

So the changes seem to be:

  • delete assets/
  • update watchers in dev.exs to []
  • update setup alias in mix.exs to not include npm command
  • update README.md to not include npm install step

You might also want to clean the priv/static folder from any compiled static assets.

18 Likes