Customise a new Phoenix app (Part 1 - Outdated Packages)
Tags: elixir, phoenix, tailwindcss
Published: 2019-06-15 08:37:29

At the end of the [Phoenix Up and Running Guide]( https://hexdocs.pm/phoenix/up_and_running.html) it logically suggests 
`The next step is customising our application just a bit…` and whisks you away to learn about [Adding Pages](https://hexdocs.pm/phoenix/adding_pages.html). I'd like to recommend a few extra steps of customisation to get familiar with before building out a new application.

### Outdated packages
Even with a shiny new Phoenix project generated from the latest archive your `hex` and `npm` dependencies are likely to contain old or insecure versions. Perform these checks immediately after install and make them part of your maintenance routine.

**Find and update outdated Hex dependencies**

* Run [mix hex.outdated](https://hexdocs.pm/hex/Mix.Tasks.Hex.Outdated.html) to output a table.

| Dependency | Current| Latest   | Update possible |
| ---------- | ------ | -------- | --------------- |
| ecto_sql   | 3.1.5  |  3.1.5   |                 |


* If your `Update possible` column is clear or contains only `Yes` then run [mix deps.update --all](https://hexdocs.pm/mix/master/Mix.Tasks.Deps.Update.html) to update all dependencies and compile them. 

* If any dependencies have a `No` in the `Update possible` column then an automated update is not possible. This package has likely broken its API contract with a `major` version bump. You'll need to check package release notes for the upgrade process. 

NOTES: 

* From the docs: `Upgrading a dependency often requires the projects it depends on to upgrade too.` In this situation you can [update a single dependency and not touch its children] (https://hexdocs.pm/mix/master/Mix.Tasks.Deps.Update.html#module-mix-deps-unlock-mix-deps-get).  

* As an extra precaution run [mix hex.audit](https://hexdocs.pm/hex/Mix.Tasks.Hex.Audit.html) to show all Hex dependencies that have been marked as retired.

**Find and update outdated NPM packages**

* Run [npm outdated](https://docs.npmjs.com/cli/outdated.html) from your `assets` directory to output a table.

| Package    | Current | Wanted | Latest | Location |
| ---------- | ------- | ------ | ------ | -------- |
| css-loader | 2.1.1   | 2.1.1  | 3.0.0  |          | 


* For consistency, and after being bitten a few times over the years, I recommend directly editing the version numbers in your `package.json` file to the `Latest`. For major version bumps check the release notes before upgrading.

* Run `npm install` to add the new packages in `/node_modules`, generate an updated `package.lock.json` and output a security report summary from [npm audit](https://docs.npmjs.com/cli/audit.html).

```
audited 14403 packages in 6.166s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
```

* If you have any vulnerabilities then run `npm audit` to get more details on each one. I'm cautious to automate this process and prefer to upgrade the packages manually in `package.json`. In your case and especially if this is a new project try `npm audit fix` to update packages without breaking changes or `npm audit fix --force` to install breaking changes.


NOTES: The output from `npm outdated` may not list all potential updates. A workaround for VSCode users is to hover over each package in `package.json` to get a tooltip about that package with the latest version (other editors may require extensions).
![](https://thepracticaldev.s3.amazonaws.com/i/1zmowv3t4c2g6rgrghy8.png)


_Look out for **Customise a new Phoenix app (Part 2 - Style)** coming soon. I'm bringing some style to your new app by replacing the default CSS framework [Milligram](https://milligram.io/) with [Tailwindcss](https://tailwindcss.com/) and sharing some tips on avoiding spaghetti CSS._



> Do you have any customisations you like to perform after a new Phoenix install?