Phoenix Framework Pt. 2

Aug 4, 2024

In this article, I am going to briefly explain to you the purpose of a few files and folders present in this hello Phoenix project. This will be brief. Because, as you start to become familiar with Phoenix projects, it will become second nature to you.

We have a _build folder. When you run the application, Elixir compiles the project and saves the artifacts within this folder. You can ignore what is within this folder because Git also ignored this folder in the .gitignore file!

We have an assets folder. You can put static assets such as JavaScript or CSS within this folder that further require compilation such as TailwindCSS. But, if you want to save the static assets that don’t require the compilation such as plain CSS files or images, you can put it within the priv/static folder.

We have a config folder. This folder contains the configurations of the project. config.exs is the starting point and then we have files after each of the environments. We already know the config/dev.exs file as modified for the database configuration for the dev or development environment.

We have a deps folder. This folder contains the dependencies of this project. Again, we do not have to worry about this file as this file is ignored in .gitignore.

We have a lib folder. This folder contains the application code. We are going to spend most of the time in this folder.

We have a priv folder. This folder contains files which are directly not needed in production but the application depends on. For example, migration scripts. We need migration scripts for database modification but production does not directly include the code of it.

Finally, all the test cases are written within the test folder. And mix.exs and mix.lock file contains the dependencies of the project.

I think this brief overview is enough to get started and I will cover in details where it requires.

---

Let’s do a quick modification in scaffold code to print the hello, world text instead of the default landing page. What you are seeing at http://localhost:4000 is coming from lib/hello_web/controllers/page_html/home.html.heex. Open this file and replace the whole HTML with the following.

<h1>hello, world</h1>

You do not have to reload the page in the browser thanks to the Phoenix framework as it will auto reload for you! There you have the hello, world application in the Phoenix framework.

Tags: phoenix