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

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

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

2 Likes

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.

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.

1 Like

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.

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

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

???

2 Likes

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.

1 Like

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

➜  ~ 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`

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"]

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…

this is the problem

Its in the docs of elixirs Version-module:

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

1 Like

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

this is the simple tutorial

$ 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?

Do You mean css is not responsive?

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

It works for me:

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

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

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

thank you