Last active
June 7, 2019 15:27
-
-
Save yellow5/a8ca58a416f55e9279a7b5aed7c0e8e7 to your computer and use it in GitHub Desktop.
Shell commands to create + config phoenix + webpack example project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cdykes@Camerons-MBP:~/projects/my_stuff$ asdf current | |
| elixir 1.8.2-otp-21 (set by ASDF_ELIXIR_VERSION environment variable) | |
| erlang 21.3.7 (set by ASDF_ERLANG_VERSION environment variable) | |
| nodejs 10.16.0 (set by ASDF_NODEJS_VERSION environment variable) | |
| ruby 2.6.3 (set by /Users/cdykes/.tool-versions) | |
| cdykes@Camerons-MBP:~/projects/my_stuff$ asdf exec mix phx.new phx_webpack_example | |
| * creating phx_webpack_example/config/config.exs | |
| * creating phx_webpack_example/config/dev.exs | |
| * creating phx_webpack_example/config/prod.exs | |
| * creating phx_webpack_example/config/prod.secret.exs | |
| * creating phx_webpack_example/config/test.exs | |
| * creating phx_webpack_example/lib/phx_webpack_example/application.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/channels/user_socket.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/views/error_helpers.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/views/error_view.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/endpoint.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/router.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web.ex | |
| * creating phx_webpack_example/mix.exs | |
| * creating phx_webpack_example/README.md | |
| * creating phx_webpack_example/.formatter.exs | |
| * creating phx_webpack_example/.gitignore | |
| * creating phx_webpack_example/test/support/channel_case.ex | |
| * creating phx_webpack_example/test/support/conn_case.ex | |
| * creating phx_webpack_example/test/test_helper.exs | |
| * creating phx_webpack_example/test/phx_webpack_example_web/views/error_view_test.exs | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/gettext.ex | |
| * creating phx_webpack_example/priv/gettext/en/LC_MESSAGES/errors.po | |
| * creating phx_webpack_example/priv/gettext/errors.pot | |
| * creating phx_webpack_example/lib/phx_webpack_example/repo.ex | |
| * creating phx_webpack_example/priv/repo/migrations/.formatter.exs | |
| * creating phx_webpack_example/priv/repo/seeds.exs | |
| * creating phx_webpack_example/test/support/data_case.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/controllers/page_controller.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/templates/layout/app.html.eex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/templates/page/index.html.eex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/views/layout_view.ex | |
| * creating phx_webpack_example/lib/phx_webpack_example_web/views/page_view.ex | |
| * creating phx_webpack_example/test/phx_webpack_example_web/controllers/page_controller_test.exs | |
| * creating phx_webpack_example/test/phx_webpack_example_web/views/layout_view_test.exs | |
| * creating phx_webpack_example/test/phx_webpack_example_web/views/page_view_test.exs | |
| * creating phx_webpack_example/assets/webpack.config.js | |
| * creating phx_webpack_example/assets/.babelrc | |
| * creating phx_webpack_example/assets/js/app.js | |
| * creating phx_webpack_example/assets/js/socket.js | |
| * creating phx_webpack_example/assets/package.json | |
| * creating phx_webpack_example/assets/css/app.css | |
| * creating phx_webpack_example/assets/static/favicon.ico | |
| * creating phx_webpack_example/assets/css/phoenix.css | |
| * creating phx_webpack_example/assets/static/images/phoenix.png | |
| * creating phx_webpack_example/assets/static/robots.txt | |
| Fetch and install dependencies? [Yn] y | |
| * running mix deps.get | |
| * running mix deps.compile | |
| * running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development | |
| We are almost there! The following steps are missing: | |
| $ cd phx_webpack_example | |
| Then configure your database in config/dev.exs and run: | |
| $ mix ecto.create | |
| Start your Phoenix app with: | |
| $ mix phx.server | |
| You can also run your app inside IEx (Interactive Elixir) as: | |
| $ iex -S mix phx.server |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at 6cc450e))$ git log -n 1 | |
| commit 6cc450e269706edc27f818fa5a830b6aadeb5ade (HEAD) | |
| Author: Cameron Dykes <[email protected]> | |
| Date: Fri Jun 7 10:04:16 2019 -0500 | |
| Update webpack config to expose app.js exports in PhxWebpackExample | |
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at 6cc450e))$ asdf exec mix phx.server | |
| [info] Running PhxWebpackExampleWeb.Endpoint with cowboy 2.6.3 at 0.0.0.0:4000 (http) | |
| [info] Access PhxWebpackExampleWeb.Endpoint at http://localhost:4000 | |
| Webpack is watching the files… | |
| Hash: 802696c1b0ec493b122d | |
| Version: webpack 4.4.0 | |
| Time: 450ms | |
| Built at: 6/7/2019 10:09:53 AM | |
| Asset Size Chunks Chunk Names | |
| ../css/app.css 10.6 KiB ./js/app.js [emitted] ./js/app.js | |
| app.js 7.56 KiB ./js/app.js [emitted] ./js/app.js | |
| ../favicon.ico 1.23 KiB [emitted] | |
| ../robots.txt 202 bytes [emitted] | |
| ../images/phoenix.png 13.6 KiB [emitted] | |
| [../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built] | |
| [./css/app.css] 39 bytes {./js/app.js} [built] | |
| [./js/app.js] 593 bytes {./js/app.js} [built] | |
| [0] multi ./js/app.js 28 bytes {./js/app.js} [built] | |
| + 2 hidden modules | |
| Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css: | |
| [./node_modules/css-loader/dist/cjs.js!./css/app.css] 284 bytes {mini-css-extract-plugin} [built] | |
| [./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.9 KiB {mini-css-extract-plugin} [built] | |
| + 1 hidden module | |
| [info] Replied phoenix:live_reload :ok | |
| [info] GET / | |
| [debug] Processing with PhxWebpackExampleWeb.PageController.index/2 | |
| Parameters: %{} | |
| Pipelines: [:browser] | |
| [info] Sent 200 in 26ms | |
| [info] Replied phoenix:live_reload :ok |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at ea6fe93))$ git log -n 1 | |
| commit ea6fe93151387e0afcb628da78444c400afc9d4a (HEAD) | |
| Author: Cameron Dykes <[email protected]> | |
| Date: Fri Jun 7 10:06:17 2019 -0500 | |
| Add javascript-character-count.min.js to vendor/js | |
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at ea6fe93))$ asdf exec mix phx.server | |
| [info] Running PhxWebpackExampleWeb.Endpoint with cowboy 2.6.3 at 0.0.0.0:4000 (http) | |
| [info] Access PhxWebpackExampleWeb.Endpoint at http://localhost:4000 | |
| Webpack is watching the files… | |
| Hash: 789c0f78cf7222bbfee2 | |
| Version: webpack 4.4.0 | |
| Time: 518ms | |
| Built at: 6/7/2019 10:12:30 AM | |
| Asset Size Chunks Chunk Names | |
| ../css/app.css 10.6 KiB ./js/app.js [emitted] ./js/app.js | |
| app.js 11.8 KiB ./js/app.js [emitted] ./js/app.js | |
| ../favicon.ico 1.23 KiB [emitted] | |
| ../robots.txt 202 bytes [emitted] | |
| ../images/phoenix.png 13.6 KiB [emitted] | |
| [../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built] | |
| [./css/app.css] 39 bytes {./js/app.js} [built] | |
| [./js/app.js] 593 bytes {./js/app.js} [built] | |
| [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {./js/app.js} [built] | |
| [./vendor/js/javascript-character-count.min.js] 2.01 KiB {./js/app.js} [built] | |
| [0] multi ./js/app.js ./vendor/js/javascript-character-count.min.js 40 bytes {./js/app.js} [built] | |
| + 2 hidden modules | |
| Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css: | |
| [./node_modules/css-loader/dist/cjs.js!./css/app.css] 284 bytes {mini-css-extract-plugin} [built] | |
| [./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.9 KiB {mini-css-extract-plugin} [built] | |
| + 1 hidden module | |
| [info] Replied phoenix:live_reload :ok | |
| [info] GET / | |
| [debug] Processing with PhxWebpackExampleWeb.PageController.index/2 | |
| Parameters: %{} | |
| Pipelines: [:browser] | |
| [info] Sent 200 in 27ms | |
| [info] Replied phoenix:live_reload :ok |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at c6cbf1c))$ git log -n 1 | |
| commit c6cbf1cf625b0d190718dcfcb065b9381a9c7ac3 (HEAD, master) | |
| Author: Cameron Dykes <[email protected]> | |
| Date: Fri Jun 7 10:08:49 2019 -0500 | |
| Update webpack to load app.js after vendor js | |
| cdykes@Camerons-MBP:~/projects/my_stuff/phx_webpack_example((HEAD detached at c6cbf1c))$ asdf exec mix phx.server | |
| [info] Running PhxWebpackExampleWeb.Endpoint with cowboy 2.6.3 at 0.0.0.0:4000 (http) | |
| [info] Access PhxWebpackExampleWeb.Endpoint at http://localhost:4000 | |
| Webpack is watching the files… | |
| Hash: 619817c849c487568778 | |
| Version: webpack 4.4.0 | |
| Time: 566ms | |
| Built at: 6/7/2019 10:14:26 AM | |
| Asset Size Chunks Chunk Names | |
| ../css/app.css 10.6 KiB ./js/app.js [emitted] ./js/app.js | |
| app.js 11.8 KiB ./js/app.js [emitted] ./js/app.js | |
| ../favicon.ico 1.23 KiB [emitted] | |
| ../robots.txt 202 bytes [emitted] | |
| ../images/phoenix.png 13.6 KiB [emitted] | |
| [../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built] | |
| [./css/app.css] 39 bytes {./js/app.js} [built] | |
| [./js/app.js] 593 bytes {./js/app.js} [built] | |
| [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {./js/app.js} [built] | |
| [./vendor/js/javascript-character-count.min.js] 2.01 KiB {./js/app.js} [built] | |
| [0] multi ./vendor/js/javascript-character-count.min.js ./js/app.js 40 bytes {./js/app.js} [built] | |
| + 2 hidden modules | |
| Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css: | |
| [./node_modules/css-loader/dist/cjs.js!./css/app.css] 284 bytes {mini-css-extract-plugin} [built] | |
| [./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.9 KiB {mini-css-extract-plugin} [built] | |
| + 1 hidden module | |
| [info] Replied phoenix:live_reload :ok | |
| [info] GET / | |
| [debug] Processing with PhxWebpackExampleWeb.PageController.index/2 | |
| Parameters: %{} | |
| Pipelines: [:browser] | |
| [info] Sent 200 in 26ms | |
| [info] Replied phoenix:live_reload :ok |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screenshot of phx_webpack_example_web_1 with exported App:
Screenshot of phx_webpack_example_web_2 with minified JS present in assets/vendor/js:
Screenshot of phx_webpack_example_web_3 with app.js moved to end of entry point array: