Phx.new vs phoenix.new - responsive vs non-responsive welcome page issue

Rcv · May 29, 2018, 4:49pm

mix phoenix.new app create a responsive welcome page while
mix phx.new creates a non-responsive welcome page.
some solution

Elixir version 1.3.6
Phoenix version 1.3.2

Best regards

kokolegorille · May 29, 2018, 5:01pm

mix phoenix.new is for Phoenix 1.2 and You should not use it anymore.

NobbZ · May 29, 2018, 5:09pm

If your phx_new still has the phoenix.* tasks, it is probably the old from the 1.3-RCs, you should update it.

mix local.phx does update the phoenix project generators.

LostKobrakai · May 29, 2018, 5:28pm

That’s not true. Even the most up to date 1.3 version does still include all phoenix.* tasks. They were just deprecated. 1.4 will ship without them.

peerreynders · May 29, 2018, 5:28pm

Also if you look into the mix.exs as it is generated by Phoenix 1.3.2:

  def project do
    [
      app: :rumbl,
      version: "0.0.1",
      elixir: "~> 1.4",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,
      start_permanent: Mix.env == :prod,
      aliases: aliases(),
      deps: deps()
    ]
  end

"~> 1.4" is typically interpreted as [">= 1.4", "< 1.5"]
i.e. you should have at least Elixir 1.4 for Phoenix 1.3.2 - Elixir 1.3.6 may cause some problems.

Rcv · May 29, 2018, 5:43pm

I am very newbie in elixir an phoenix
I’m trying a very simple project for the tutorial in the phoenix page.

mix local.phx

mix phx.new hello
cd hello
mix ecto.create
mix phx.server

and the result is the same, the welcome page in localhost:4000 is not responsive

peerreynders · May 29, 2018, 5:46pm

cd hello
mix deps.get
mix ecto.create

Now without it you shouldn’t have been able to get any further anyway so you probably just left it out …

What is preventing you from upgrading to Elixir 1.6.5?

$ mix hex.info
Hex:    0.17.7
Elixir: 1.6.5
OTP:    20.3.6

Built with: Elixir 1.6.4 and OTP 19.3
$ mix archives
** (Mix) The task "archives" could not be found. Did you mean "archive"?
$ mix archive
* hex-0.17.7
* phx_new
Archives installed at: /Users/_/.mix/archives
$ mix local
mix hex              # Prints Hex help information
mix hex.audit        # Shows retired Hex deps for the current project
mix hex.build        # Builds a new package version locally
mix hex.config       # Reads, updates or deletes local Hex config
mix hex.docs         # Fetches or opens documentation of a package
mix hex.info         # Prints Hex information
mix hex.install      # false
mix hex.organization # Manages Hex.pm organizations
mix hex.outdated     # Shows outdated Hex deps for the current project
mix hex.owner        # Manages Hex package ownership
mix hex.publish      # Publishes a new package version
mix hex.repo         # Manages Hex repositories
mix hex.retire       # Retires a package version
mix hex.search       # Searches for package names
mix hex.user         # Manages your Hex user account
mix local.phoenix    # Updates Phoenix locally
mix local.phx        # Updates the Phoenix project generator locally
mix phoenix.new      # Creates a new Phoenix v1.3.2 application
mix phx.new          # Creates a new Phoenix v1.3.2 application
mix phx.new.ecto     # Creates a new Ecto project within an umbrella project
mix phx.new.web      # Creates a new Phoenix web project within an umbrella project
$

What do you get for:

mix archive
mix hex.info
mix local

???

NobbZ · May 29, 2018, 6:07pm

As phoenix does require ~> 1.4 I assumed he had a typo and his actual version were 1.6.3

No, it is not. It is >=1.4 and <2.0

If it were as you have explained, phoenix wouldn’t run on current elixir, as we have 1.6.5 released a couple of weeks ago.

NobbZ · May 29, 2018, 6:08pm

Yeah, sorry, I looked at master but thought I had already checked out a tag…

Rcv · May 29, 2018, 6:16pm

➜  ~ mix hex.info
Hex:    0.17.7
Elixir: 1.6.5
OTP:    20.3.4

Built with: Elixir 1.6.4 and OTP 19.3
➜  ~ mix archive
* hex-0.17.7
* phx_new
Archives installed at: /Users/rcv/.mix/archives
➜  ~ mix local
mix hex              # Prints Hex help information
mix hex.audit        # Shows retired Hex deps for the current project
mix hex.build        # Builds a new package version locally
mix hex.config       # Reads, updates or deletes local Hex config
mix hex.docs         # Fetches or opens documentation of a package
mix hex.info         # Prints Hex information
mix hex.install      # false
mix hex.organization # Manages Hex.pm organizations
mix hex.outdated     # Shows outdated Hex deps for the current project
mix hex.owner        # Manages Hex package ownership
mix hex.publish      # Publishes a new package version
mix hex.repo         # Manages Hex repositories
mix hex.retire       # Retires a package version
mix hex.search       # Searches for package names
mix hex.user         # Manages your Hex user account
mix local.phoenix    # Updates Phoenix locally
mix local.phx        # Updates the Phoenix project generator locally
mix phoenix.new      # Creates a new Phoenix v1.3.2 application
mix phx.new          # Creates a new Phoenix v1.3.2 application
mix phx.new.ecto     # Creates a new Ecto project within an umbrella project
mix phx.new.web      # Creates a new Phoenix web project within an umbrella project`Preformatted text`

peerreynders · May 29, 2018, 6:16pm

I believe you - I had a devil of a time to find a reference - so I went by what I could find in Ruby land:

Had we said ~> 2.2.0, that would have been equivalent to ['>= 2.2.0', '< 2.3.0'].

… and extrapolated from that, apparently incorrectly - I guess:

"~> 1.4" is [">= 1.4", "< 2.0"]
"~> 1.4.0" is [">= 1.4.0", "< 1.5.0"]

NobbZ · May 29, 2018, 6:19pm

Can you please link to the actual tutorial, and can you please tell us how your generated mix-file looks in the deps section?

Also, as a quick shot, I am missing the brunch compile step…

Rcv · May 29, 2018, 6:20pm

this is the problem

NobbZ · May 29, 2018, 6:22pm

Its in the docs of elixirs Version-module:

https://hexdocs.pm/elixir/Version.html#module-requirements

Rcv · May 29, 2018, 6:26pm

https://hexdocs.pm/phoenix/up_and_running.html#content

this is the simple tutorial

peerreynders · May 29, 2018, 6:29pm

$ mix phx.new hello
* creating hello/config/config.exs
* creating hello/config/dev.exs
* creating hello/config/prod.exs
* creating hello/config/prod.secret.exs
* creating hello/config/test.exs
* creating hello/lib/hello/application.ex
* creating hello/lib/hello.ex
* creating hello/lib/hello_web/channels/user_socket.ex
* creating hello/lib/hello_web/views/error_helpers.ex
* creating hello/lib/hello_web/views/error_view.ex
* creating hello/lib/hello_web/endpoint.ex
* creating hello/lib/hello_web/router.ex
* creating hello/lib/hello_web.ex
* creating hello/mix.exs
* creating hello/README.md
* creating hello/test/support/channel_case.ex
* creating hello/test/support/conn_case.ex
* creating hello/test/test_helper.exs
* creating hello/test/hello_web/views/error_view_test.exs
* creating hello/lib/hello_web/gettext.ex
* creating hello/priv/gettext/en/LC_MESSAGES/errors.po
* creating hello/priv/gettext/errors.pot
* creating hello/lib/hello/repo.ex
* creating hello/priv/repo/seeds.exs
* creating hello/test/support/data_case.ex
* creating hello/lib/hello_web/controllers/page_controller.ex
* creating hello/lib/hello_web/templates/layout/app.html.eex
* creating hello/lib/hello_web/templates/page/index.html.eex
* creating hello/lib/hello_web/views/layout_view.ex
* creating hello/lib/hello_web/views/page_view.ex
* creating hello/test/hello_web/controllers/page_controller_test.exs
* creating hello/test/hello_web/views/layout_view_test.exs
* creating hello/test/hello_web/views/page_view_test.exs
* creating hello/.gitignore
* creating hello/assets/brunch-config.js
* creating hello/assets/css/app.css
* creating hello/assets/css/phoenix.css
* creating hello/assets/js/app.js
* creating hello/assets/js/socket.js
* creating hello/assets/package.json
* creating hello/assets/static/robots.txt
* creating hello/assets/static/images/phoenix.png
* creating hello/assets/static/favicon.ico

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile
* running cd assets && npm install && node node_modules/brunch/bin/brunch build

We are all set! Go into your application by running:

    $ cd hello

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

$ cd hello
$ mix ecto.create
Compiling 13 files (.ex)
warning: Plug.Conn.WrapperError.reraise/3 is deprecated. Use reraise/1 or reraise/4 instead.
Found at 2 locations:
  lib/hello_web/router.ex:4
  lib/hello_web/router.ex:12

Generated hello app
The database for Hello.Repo has been created
$ mix phx.server
[info] Running HelloWeb.Endpoint with Cowboy using http://0.0.0.0:4000
14:24:54 - info: compiled 6 files into 2 files, copied 3 in 704 ms
[info] GET /users/new
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /users/new (HelloWeb.Router)
    (hello) lib/hello_web/router.ex:1: HelloWeb.Router.__match_route__/4
    (hello) lib/phoenix/router.ex:303: HelloWeb.Router.call/2
    (hello) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.plug_builder_call/2
    (hello) lib/plug/debugger.ex:102: HelloWeb.Endpoint."call (overridable 3)"/2
    (hello) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.call/2
    (plug) lib/plug/adapters/cowboy/handler.ex:16: Plug.Adapters.Cowboy.Handler.upgrade/4
    (cowboy) hello/deps/cowboy/src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

[info] GET /
[debug] Processing with HelloWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 23ms
^C
BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
a
$

The above is on macOS - was yours any different?

kokolegorille · May 29, 2018, 6:29pm

Do You mean css is not responsive?

Because if so, it’s not really Phoenix related, but bootstrap.

NobbZ · May 29, 2018, 6:32pm

It works for me:

peerreynders · May 29, 2018, 6:32pm

And as I recall that page was never designed to be “mobile-first/responsive”.

Rcv · May 29, 2018, 7:05pm

the same project created with phoenix.new result a css responsive page.

what is wrong in the same project in phx.new.

thank you