Create one new app with elixir phoenix 1.3

0-elixir-phoenix-1.3.md

Elixir with Phoenix 1.3

this is my script to create one new app with elixir phoenix 1.3 i'm use bootstrap 4, jquery and sweetalert2 to popup messages change or adjustments this script for your needs.

Create one new app phoenix 1.3.

$ mix phx.new new_app --no-ecto
$ cd new_app

Install sass, font-awesome and bootstrap package's

Now entry into directory assets and install all dependencies.

$ cd assets
$ npm install --save-dev sass-brunch copycat-brunch
$ npm install --save jquery bootstrap font-awesome tether popper.js sweetalert2

PS: "tether and popper.js" is dependencies to bootstrap 4.

Update brunch-config.js (look the brunch-config.js attached)

• add sass config and copycat into plugin section in brunch-config.js:

plugins: {
  ...
  copycat: {
    "fonts": ["node_modules/font-awesome/fonts"]
  },
  sass: {
    options: {
      includePaths: [
        'node_modules/bootstrap/scss',
        'node_modules/font-awesome/scss'
      ],
      precision: 8
    }
  }
}

• now update npm config.

npm: {
  enabled: true,
  globals: {
    $: 'jquery',
    jQuery: 'jquery',
    Tether: 'tether',
    Popper: 'popper.js',
    bootstrap: 'bootstrap',
    swal: 'sweetalert2'
  }
}

Rename and update the app.css.

• Rename file app.css to app.scss

$ mv css/app.css css/app.scss

• And update with import the bootstrap and font-awesome

@import 'font-awesome';
@import 'bootstrap';

Add phoenix_slime to template engine

• Edit the mix.exs.

cd ..
vi mix.exs

• add {:phoenix_slime, "~> 0.9.0"} to deps section.

defp deps do
    [
      {:phoenix, "~> 1.3.0"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"},
      {:phoenix_slime, "~> 0.9.0"}
    ]
end

• Add the following to your Phoenix config/config.exs

config :phoenix, :template_engines,
    slim: PhoenixSlime.Engine,
    slime: PhoenixSlime.Engine
    
config :phoenix_slime, :use_slim_extension, true

• to livereload change config/dev.exs include the slim and slime extensions in the list of watched files.

# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
      ~r{web/views/.*(ex)$},
      ~r{web/templates/.*(eex|slim|slime)$}
    ]
  ]

PS: this script is setting to my needs change to your person needs.

brunch-config.js

// this is one complete sample the branch-config.js when i use.

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/]
    },
    copycat: {
      "fonts": ["node_modules/font-awesome/fonts"]
    },
    sass: {
      options: {
        includePaths: [
          'node_modules/bootstrap/scss',
          "node_modules/font-awesome/scss"
        ],
        precision: 8
      }
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      Popper: 'popper.js',
      bootstrap: 'bootstrap',
      swal: 'sweetalert2'
    }
  }
};