nimblehq / elixir-templates Goto Github PK

Currently, we don't know how to use the template base on the current Usage content.

## Usage

Clone the repository

`git clone [email protected]:nimblehq/elixir-templates.git`

It's better if we could improve it to make it clear like what should we do after cloning the repo, do we need to run any script after that, ...

Thank you 🚀

Why

As Mox is a popular tool to Mock/Stub in testing in Elixir community

• https://hexdocs.pm/mox/Mox.html
• http://blog.plataformatec.com.br/2015/10/mocks-and-explicit-contracts/

Feature request

• Adding Mox to the template
• Some configuration...

Why

To refactor EEX files easily

Who Benefits?

Phoenix template users

Why

As part of issue #85,
Stylelint by default orders CSS properties alphabetically. It would look much better if we ordered it by some logical grouping.
There are configs that help with this:

• SMACSS - We're using this format on Zipmex
• Idiomatic CSS

How SMACSS is ordered
How Idiomatic CSS is ordered

Who Benefits?

Developers and anyone reading our CSS 🎨

Why

To following Nimble's convention https://nimblehq.co/compass/development/code-conventions/css/#stylesheets-structure

Who Benefits?

Nimbler

Following the https://dashbit.co/blog/automatic-and-manual-ecto-migrations it nice to have the manual_migration pre-setting

1/ Adding migrate_manual to the https://github.com/nimblehq/elixir-templates/blob/develop/priv/templates/nimble.phx.gen.template/lib/otp_app/release_tasks.ex.eex

  def migrate_manual do
    load_app()

    for repo <- repos() do
      run_migrations(repo, "priv/repo/manual_migrations")
    end
  end

2/ Adjust aliases in mix.ex file

defp aliases() do
  [
    "ecto.migrate_all": ["ecto.migrate --migrations-path=priv/repo/migrations --migrations-path=priv/repo/manual_migrations"],
    "ecto.setup": ["ecto.create", "ecto.migrate_all", "run priv/repo/seeds.exs"],
    test: ["ecto.create --quiet", "ecto.migrate_all --quiet", "test"],
    ...
  ]
end

Why

To follow Nimble's standard

Who Benefits?

Developer

Feature request

As the current template is generated by Phoenix 1.4.16. Since v1.5, new Phoenix applications are generated with the Telemetry, so we should add that to our template too.

https://hexdocs.pm/phoenix/telemetry.html#the-telemetry-supervisor

Feature request

• Shell script - https://github.com/infinitered/phoenix_base/blob/master/bin/rename_project
• https://github.com/cookiecutter/cookiecutter

Issue

I checked the module NimbleTemplate.Template and I think some functions do not belong to this module. We can extract these functions into the helper module and group them in the Helpers directory.

Solution

Introduce the helpers directory and we can place all helper functions there.

Who Benefits?

Developers

What's Next?

• Create refactoring NimbleTemplate.Template PR

Why

To enhance the Web variant of the template, we can extract the work done by @rosle in MindValley to set up CSS and JS linters:

The following can be added to mix.exs:

lint: [
  "format --check-formatted",
  "credo",
  "cmd ./assets/node_modules/.bin/eslint --color ./assets",
  "cmd ./assets/node_modules/.bin/stylelint --color ./assets/css"
],
"lint.fix": [
  "format",
  "cmd ./assets/node_modules/.bin/eslint --color --fix ./assets",
  "cmd ./assets/node_modules/.bin/stylelint --color --fix ./assets/css"
]

With the following NPM dependencies:

Who Benefits?

Developers 💯

Why

Making sure the localization are up-to-date on each Pull request

Who Benefits?

Developer

Why

To init the Boostrap on the new project

Acceptance Criteria

Create a Boostrap addon, this is the Optional addon, so the user can decide to have it or not.

This addon will do the following tasks

1/ Add "bootstrap": "^5.0.0", into the assets/package.json
2/ Create a assets/css/vendor/_boostrap.scss file

// Configuration
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';

// Re-enable these if needed.
// Do not forget to check the order of import components before re-enable.

// Layout & components
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
// @import 'bootstrap/scss/images';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
// @import 'bootstrap/scss/tables';
// @import 'bootstrap/scss/forms';
// @import 'bootstrap/scss/buttons';
// @import 'bootstrap/scss/transitions';
// @import 'bootstrap/scss/dropdown';
// @import 'bootstrap/scss/button-group';
// @import 'bootstrap/scss/nav';
// @import 'bootstrap/scss/navbar';
// @import 'bootstrap/scss/card';
// @import 'bootstrap/scss/accordion';
// @import 'bootstrap/scss/breadcrumb';
// @import 'bootstrap/scss/pagination';
// @import 'bootstrap/scss/badge';
// @import 'bootstrap/scss/alert';
// @import 'bootstrap/scss/progress';
// @import 'bootstrap/scss/list-group';
// @import 'bootstrap/scss/close';
// @import 'bootstrap/scss/toasts';
// @import 'bootstrap/scss/modal';
// @import 'bootstrap/scss/tooltip';
// @import 'bootstrap/scss/popover';
// @import 'bootstrap/scss/carousel';
// @import 'bootstrap/scss/spinners';
// @import 'bootstrap/scss/offcanvas';

// Helpers
// @import 'bootstrap/scss/helpers';

// Utilities
// @import 'bootstrap/scss/utilities/api';

3/ Add @import 'vendor/boostrap'; into the assets/css/app.scss

4/ Add

// Bootstrap
import "bootstrap/dist/js/bootstrap";

into the assets/js/app.js file, after the core-js

Why

For API project, we don't need the cache_static_manifest configuration

07:45:39.037 [info] Migrations already up
07:45:40.539 [info] Running TrustedDeviceWeb.Endpoint with cowboy 2.9.0 at :::4000 (http)
07:45:40.539 [error] Could not find static manifest at "/opt/app/lib/trusted_device-0.1.0/priv/static/cache_manifest.json". Run "mix phx.digest" after building your static files or remove the configuration from "config/prod.exs".
07:45:40.539 [info] Access TrustedDeviceWeb.Endpoint at http://example.com

Solution

Who Benefits?

New projects..

Why

Who Benefits?

Developer

Currently, the template is supporting the Phoenix project (API and web variants), how about supporting the Mix project (for creating another Elixir lib) 🤔

mix nimble.phx.gen.template --mix

We could consider changing the task name to nimble.gen.template so that doesn't contain the phx to make it clear

mix nimble.gen.template --mix

Feature request

Adding Credo to the Template codebase itself.

Why

As Phoenix 1.6 replaces all node, npm, webpack by esbuild

phoenixframework/phoenix#4377

Why

To not display the log info when the test is passed, in most cases when the test is passed, we don't need these logs.

https://elixirschool.com/blog/til-capture-log-in-exunit-tests/

Feature request

As discussion with Olivier on this comment

Feature request

• https://github.com/HashNuke/hound
• https://github.com/elixir-wallaby/wallaby

Why

• text-ellipsis
• rem

Who Benefits?

Developer

Add/update credo rules based on best practices and our preferences. Though the credo comes with the default config, some of the rules are better updated/tuned properly to increase productivity and consistency.

Proposal

strict: true

Set strict mode to true so that we can enforce the style guide.

Credo.Check.Design.AliasUsage

Config:

{Credo.Check.Design.AliasUsage,
  [
    priority: :low,
    if_nested_deeper_than: 2,
    if_called_more_often_than: 1
    excluded_namespaces: ~w[Ecto]
  ]
}

Why

To following Nimble's Elixir convention

Solution

Adding the line_length: 100 to the template codebase and the new application.

https://github.com/bitwalker/libcluster

Why

For the API project, we need to set up some Plug, Param Validation, or Error View, we could inherit these configurations from our existing API projects.

Plan

• Request Params Validation.
• ErrorView return follow JSON API standard format.
• Add fallback controller. (add action_fallback MODULE.Api.V1.FallbackController into web entry point)
• Check empty request body params Plug.
• Add jsonapi dependency to mix.exs.
• Add alias MODULE.ParamsValidator into web entry point.

Who Benefits?

The new API project's developer 🤞

May I know the reason that we keep the assets folder in the root folder instead of putting it in the nimble_web folder, as I know, the mix phx.new xxx --umbrella command generates the `assets folder inside the xxx_web folder. Or it just for the case that we will have multiple web apps (like the public one and the admin one)

Why

It's part of Nimble's process

Who Benefits?

Developer

Why

So we don't need to setup Tesla manually https://hexdocs.pm/tesla/readme.html

Who Benefits?

Elixir developer

As the repositories list, we can see it as the template repository, however I think it could confuse the developers because Template Repository is for a different purpose, according to the docs, the Template Repository for "generate new repositories with the same directory structure, branches, and files."

Reference: https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-template-repository

I would suggest we uncheck the Template Repository from the repository settings:
https://github.com/nimblehq/elixir-templates/settings

Why

https://dashbit.co/blog/tests-with-warnings-as-errors

Expected

• Add Code.put_compiler_option(:warnings_as_errors, true) into test/test_helper.exs
• Add mix deps.unlock --check-unused into codebase

Why

To following https://nimblehq.co/compass/development/code-conventions/elixir, something we could try to add to the template like

1/ Function https://nimblehq.co/compass/development/code-conventions/elixir/#functions
2/ Module https://nimblehq.co/compass/development/code-conventions/elixir/#modules

Solution

2/

rrrene/credo-proposals#22

rrrene/credo#747

May I know the reason that we keep the assets folder in the root folder instead of putting it in the nimble_web folder, as I know, the mix phx.new xxx --umbrella command generates the `assets folder inside the xxx_web folder. Or it just for the case that we will have multiple web apps (like the public one and the admin one)

Depend on phoenixframework/phoenix#4100 status, incase that PR is merged into the Phoenix framework then we can close this issue 🤗

Currently, the template doesn't support to apply only specific addon yet, someone might use the template to add a few add-ons instead of the whole template.

For example:

mix nimble.phx.gen.template addon=credo # applying only credo addon to an existing project
mix nimble.phx.gen.template addon=wallaby # applying only wallaby addon to an existing project

https://www.npmjs.com/package/core-js

To make sure we always increasing the version either major or minor on each release.

Should we add the bin/envsetup.sh file similar the https://github.com/nimblehq/rails-templates/blob/develop/bin/envsetup.s, so the developer can easily bootstrap the development env

Why

Once we generate the project, we need some READ ME like how to set up, install the dependency, running test,...

Feature request

Create a PROJECT_README.md file for example, that contains some content like

• Setup docker
• Setup chromedriver,...
• How to run test,...

And in the #14 we could remove the README.md (template readme) and rename the PROJECT_README.md to just README.md so the new project will have some initial useful README content

Description

• Add alias
  • Add/configure required dependencies

defp aliases do
    [
      lint: ["format --check-formatted", "credo"],
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate", "test"],
      coverage: ["sobelow --config", "coveralls.html --raise"]
    ]
end

• Github's actions
  • Run lint and test in actions for all PRs
• Use ExMachina for factories
• Add dialyzer

Why

Who Benefits?

Feature request

• Add dockerfile

• Add docker-compose for dev/production

• Check how the container deployment work

• Create release.exs and remove prod.secret.exs

Why

In order to allow Wallaby working

Who Benefits?

Developer