So you are learning Rails. You are following a tutorial and have to type: rails new my_app and voilà! You have your first Rails app ready to start working on it. But… wait! What are those files and folders that you just created!? As amazing and magical Rails can be, it can also be challenging to understand where to start working. Even if you are following a tutorial you get all these questions unanswered about why you are doing changes into all those files. In this article, I will explain in plain English: How your Rails application is structuredWhat are the key elements your app containsHow those elements are linked to each otherImportant commands to run in your terminal After reading this article, you will feel more confident when building your first apps and actually follow what you are doing. Disclaimer: This post is meant for beginners and some concepts will be simplified to ease comprehension. If you want to get deeper into them, I will still provide links to specialized sources. The MVC One of the first concepts you will need to understand is the Model View Controller structure. Once you get the hang of it, you are on the other side of the rails (get my smart wordplay?). You could think of the MVC as a tiny corporation living inside your web app. It handles the flow of information through different departments: Model, View, and Controller to offer a great customer experience. As you can see, the MVC takes care of each part of the process when you visit a site in your browser. Thanks to the MVC you can subscribe to a website, sign in into your account, log out, and a lot more. Let’s review the process that occurs inside a web app, step by step and with the analogy of the company: You want to create a Facebook account. You open the site in your browser.You have to Sign Up first, so you fill the information and click on the Sign up button.The Router receives the instruction. He is the guy in charge of taking all incoming calls to the company (the website) and redirecting them to the controller person that will help you.That person works for the Controller office. When she answers the phone, she hears from the Router that you want to go to create a new account.The Controller woman looks into her phonebook and dials the phone number of the View employee in charge of rendering that page.The View employee receives the instruction from the Controller woman to show you the webpage through the browser. You are ready to go.You type your user name and password and hit enter.The process starts again: Router calls the Controller office but this time to a new employee, the one in charge of the Log in office.This Controller man will not call the View person immediately: he has to check that you are allowed to log in, first.So the Controller man calls the genius girl from the Model office. She’s the one in charge of handling all the information in the company, with the help of the old lady from the Database department.The genius girl checks your credentials and runs some validations to make sure you are authorized.Once she is certain of your identity, she will call back the guy from the Controller office to let him know you are ok to go.Then, the Controller calls another person from the View office to instruct them to render a new page, your profile page, in the browser. And presto! This is what happens inside a website that is based on the MVC structure (using Rails or other technology). And it all happens in seconds! The MVC in your Rails application You might be thinking “What a wonderful company this MVC is! But how is this related to my app?” Well, the app is the company. And you are about to become the CEO, so you better put attention to what you’re doing! Like you noticed when you were starting your first app, there are a lot of different folders and files built into your project. Those files represent the MVC of your app, and you will have to play with them to make the whole system work as you want it to. I will give you some links at the end that will show you the how in case you want to move forward building applications with Rails. So what are we looking in this Rails application’s directory? As you can see in the image above, your app has a lot of folders and files in the main directory. The one you will work with the most is the app folder. The app folder We should start by taking a look inside the app folder. It contains all the files related to the MVC we’ve been talking about this whole time. Take a look at the comments on each folder inside. It doesn’t seem that difficult to understand now, right? As you can see, everything is very well structured, you just have to know how to read it. Each of the MVC folders will have many files once your application starts growing, and they will store different controllers, models or views related to different parts of your website. Let’s take a dive inside the app folder: we’ll focus on the MVC directories: ModelsControllersViews The models’ folder One of the first elements you will create when building an app is the Model. And one app can have multiple models! It depends on how you want to store the information. Remember the Model takes care of the data inside your website. For example: if you are building a blog, you would like to store the information related to the users, the posts, and the comments of those posts. Also, you would want that information to be accessible and organized so that it never gets mixed. That’s what the Model is for, and you will need to have one User, Post, and Comment Model, since they are very different things, with their own specifications. Inside each model file, you will include (in the beginning): The validations to decide what you want to store in the DB and how (for example, to avoid a user name to be empty).The associations between the different models of your app (to check which user posted an article, or how many comments one post has). Important command: rails generate model Name *The model name has to be singular The controllers’ folder After creating your Model, you need to build the controllers that will manage the communication inside your app (remember MVC workflow and how everything passes through the controllers). Each model has an associated controller file. For example, in your blog app, you would have a users_controller.rb file that controls the User Model. This file includes all the methods (actions) related to that model (see CRUD). Some conventions and tips related to the controller file are: The controller name is the same as the model it controls but in plural.Each controller method has its corresponding route in the routes.rb file. That makes the app work properly (remember the router calls the controller). More on this when we get to the config folder.Almost all the methods inside a controller render a View. The name of the method and the view file must match so Rails can display the page when the user makes an action.The method user_params is used to securely pass the parameters associated with a user (name, email, password) and should be private. Important command: rails generate controller name The views’ folder The last element of the MVC that you will create is the View. If you know the basics of Front-end, this part is where you will include the HTML files that will structure the page. When working with you apps’s view there’s a Rails way to organize the files inside the views’ folder, inside other folders (folderception): The layouts’ folder includes all HTML files related to the general structure of your website. You would like to put the navbar file here, for example.Model-related files have to be stored inside a folder named after it (e.g. the User Model’s views go inside the users folder). Mind the pluralization.There’s a shared folder that contains views used in different pages of your website (partials). A very cool feature Rails has, is the ability to separate an HTML file into pieces called partials. This is very useful when you want to use the same template in different views of your site and keep things DRY. These files start with a ‘_’. Another interesting part about creating your app with Rails is that the HTML files you create are dynamic. Those files will include embedded ruby (the file has a .html.erb extension) that allows you to incorporate variables inside your HTML design (e.g. when you want to display a user’s name). And that’s the basis for the MVC architecture of your Rails application. But none of this would matter if you can’t connect it properly. That’s why you need to set the routes. You can create the views’ files when generating the controller with: rails generate controller name view_name view2_name The routes file Inside the config folder, you can find multiple files to adjust the behavior of your Rails application and add additional code to be run at the application start time. In the beginning, the only file you will be working with here is the routes.rb. Think of this as the phone guide of the company. Your app will check this file to call the right Controller and display the correct View. The routes you will create on your app are based on the RESTful principles that use these HTTP requests: get, put, post and delete. Inside the routes file, you will create the correct liaisons to each part of your app. Check the image above. In lines 10 and 11 you are declaring that when a user gets to the /signup page, they will be routed to the new method of the User Model and when they click on the signup button, they will be posting information using the create method inside the User Model. Take a look at the last line of the image. That is the easiest way to declare all the routes you will need in your application using rails: resources :model. This line creates all RESTful routes to your model. Tip: remember to set up the routes right after you create a Controller or you will get a lot of errors when trying to open a page (because we don’t know who to call to display a view). After this wide overview of your Rails app, you should feel more comfortable when working with your files. Do you feel less overwhelmed when looking at your application directory? I hope this article was useful to understand a bit more about how Rails works. Need more help? Feel free to add a comment to the post and I will gladly answer your questions! Remember to follow me on my social media: GithubLinkedIn Resources you would like to check: The Odin’s Project, a free online course to become a Full-Stack developer.Michael Hartl’s Ruby on Rails Tutorial an amazing tutorial to build an app.The Rails Guides is an excellent reference for technical support. So you are learning Rails. You are following a tutorial and have to type: rails new my_app and voilà! You have your first Rails app ready to start working on it. rails new my_app rails new my_app But… wait! What are those files and folders that you just created!? As amazing and magical Rails can be, it can also be challenging to understand where to start working. Even if you are following a tutorial you get all these questions unanswered about why you are doing changes into all those files. why In this article, I will explain in plain English: In this article, I will explain in plain English: in plain English: How your Rails application is structured What are the key elements your app contains How those elements are linked to each other Important commands to run in your terminal How your Rails application is structured What are the key elements your app contains How those elements are linked to each other Important commands to run in your terminal After reading this article, you will feel more confident when building your first apps and actually follow what you are doing. actually Disclaimer: This post is meant for beginners and some concepts will be simplified to ease comprehension. If you want to get deeper into them, I will still provide links to specialized sources. Disclaimer: The MVC One of the first concepts you will need to understand is the Model View Controller structure. Once you get the hang of it, you are on the other side of the rails ( get my smart wordplay? ). Model View Controller get my smart wordplay? You could think of the MVC as a tiny corporation living inside your web app. It handles the flow of information through different departments: Model, View, and Controller to offer a great customer experience. As you can see, the MVC takes care of each part of the process when you visit a site in your browser. Thanks to the MVC you can subscribe to a website, sign in into your account, log out, and a lot more. Let’s review the process that occurs inside a web app, step by step and with the analogy of the company: You want to create a Facebook account. You open the site in your browser. You have to Sign Up first, so you fill the information and click on the Sign up button. The Router receives the instruction. He is the guy in charge of taking all incoming calls to the company (the website) and redirecting them to the controller person that will help you. That person works for the Controller office. When she answers the phone, she hears from the Router that you want to go to create a new account. The Controller woman looks into her phonebook and dials the phone number of the View employee in charge of rendering that page. The View employee receives the instruction from the Controller woman to show you the webpage through the browser. You are ready to go. You type your user name and password and hit enter. The process starts again: Router calls the Controller office but this time to a new employee, the one in charge of the Log in office. This Controller man will not call the View person immediately: he has to check that you are allowed to log in, first. So the Controller man calls the genius girl from the Model office. She’s the one in charge of handling all the information in the company, with the help of the old lady from the Database department. The genius girl checks your credentials and runs some validations to make sure you are authorized. Once she is certain of your identity, she will call back the guy from the Controller office to let him know you are ok to go. Then, the Controller calls another person from the View office to instruct them to render a new page, your profile page, in the browser. You want to create a Facebook account. You open the site in your browser. You have to Sign Up first, so you fill the information and click on the Sign up button. The Router receives the instruction. He is the guy in charge of taking all incoming calls to the company (the website) and redirecting them to the controller person that will help you. Router Router That person works for the Controller office. When she answers the phone, she hears from the Router that you want to go to create a new account. Controller Controller The Controller woman looks into her phonebook and dials the phone number of the View employee in charge of rendering that page. View View The View employee receives the instruction from the Controller woman to show you the webpage through the browser. You are ready to go. You type your user name and password and hit enter. The process starts again: Router calls the Controller office but this time to a new employee, the one in charge of the Log in office. This Controller man will not call the View person immediately: he has to check that you are allowed to log in, first. So the Controller man calls the genius girl from the Model office. She’s the one in charge of handling all the information in the company, with the help of the old lady from the Database department. Model Model Database The genius girl checks your credentials and runs some validations to make sure you are authorized. Once she is certain of your identity, she will call back the guy from the Controller office to let him know you are ok to go. Then, the Controller calls another person from the View office to instruct them to render a new page, your profile page, in the browser. And presto! This is what happens inside a website that is based on the MVC structure (using Rails or other technology). And it all happens in seconds! The MVC in your Rails application You might be thinking “ What a wonderful company this MVC is! But how is this related to my app?” What a wonderful company this MVC is! But how is this related to my app?” Well, the app is the company. And you are about to become the CEO, so you better put attention to what you’re doing! is is Like you noticed when you were starting your first app, there are a lot of different folders and files built into your project. Those files represent the MVC of your app, and you will have to play with them to make the whole system work as you want it to. different folders I will give you some links at the end that will show you the how in case you want to move forward building applications with Rails. how So what are we looking in this Rails application’s directory? what As you can see in the image above, your app has a lot of folders and files in the main directory. The one you will work with the most is the app folder. The app folder We should start by taking a look inside the app folder. It contains all the files related to the MVC we’ve been talking about this whole time. Take a look at the comments on each folder inside. It doesn’t seem that difficult to understand now, right? As you can see, everything is very well structured, you just have to know how to read it. Each of the MVC folders will have many files once your application starts growing, and they will store different controllers, models or views related to different parts of your website. Let’s take a dive inside the app folder: we’ll focus on the MVC directories: Models Controllers Views Models Controllers Views The models’ folder One of the first elements you will create when building an app is the Model . And one app can have multiple models! It depends on how you want to store the information. Model how Remember the Model takes care of the data inside your website. For example: if you are building a blog, you would like to store the information related to the users, the posts, and the comments of those posts. Also, you would want that information to be accessible and organized so that it never gets mixed. That’s what the Model is for, and you will need to have one User, Post, and Comment Model, since they are very different things, with their own specifications. Inside each model file, you will include (in the beginning): The validations to decide what you want to store in the DB and how (for example, to avoid a user name to be empty). The associations between the different models of your app (to check which user posted an article, or how many comments one post has). The validations to decide what you want to store in the DB and how (for example, to avoid a user name to be empty). validations validations The associations between the different models of your app (to check which user posted an article, or how many comments one post has). associations associations Important command: rails generate model Name rails generate model Name rails generate model Name * The model name has to be singular * The controllers’ folder After creating your Model, you need to build the controllers that will manage the communication inside your app (remember MVC workflow and how everything passes through the controllers). controllers Each model has an associated controller file. For example, in your blog app, you would have a users_controller.rb file that controls the User Model. This file includes all the methods (actions) related to that model (see CRUD ). users_controller.rb CRUD Some conventions and tips related to the controller file are: The controller name is the same as the model it controls but in plural. Each controller method has its corresponding route in the routes.rb file. That makes the app work properly (remember the router calls the controller). More on this when we get to the config folder. Almost all the methods inside a controller render a View. The name of the method and the view file must match so Rails can display the page when the user makes an action. The method user_params is used to securely pass the parameters associated with a user (name, email, password) and should be private. The controller name is the same as the model it controls but in plural. Each controller method has its corresponding route in the routes.rb file. That makes the app work properly (remember the router calls the controller). More on this when we get to the config folder. routes.rb calls Almost all the methods inside a controller render a View. The name of the method and the view file must match so Rails can display the page when the user makes an action. The method user_params is used to securely pass the parameters associated with a user (name, email, password) and should be private. user_params Important command: rails generate controller name rails generate controller name rails generate controller name The views’ folder The last element of the MVC that you will create is the View. If you know the basics of Front-end, this part is where you will include the HTML files that will structure the page. When working with you apps’s view there’s a Rails way to organize the files inside the views’ folder, inside other folders ( folderception ): Rails way folderception folderception The layouts’ folder includes all HTML files related to the general structure of your website. You would like to put the navbar file here, for example. Model-related files have to be stored inside a folder named after it (e.g. the User Model’s views go inside the users folder). Mind the pluralization. There’s a shared folder that contains views used in different pages of your website (partials). The layouts’ folder includes all HTML files related to the general structure of your website. You would like to put the navbar file here, for example. Model-related files have to be stored inside a folder named after it (e.g. the User Model’s views go inside the users folder). Mind the pluralization. users There’s a shared folder that contains views used in different pages of your website (partials). shared A very cool feature Rails has, is the ability to separate an HTML file into pieces called partials . This is very useful when you want to use the same template in different views of your site and keep things DRY . These files start with a ‘_’. partials partials DRY DRY Another interesting part about creating your app with Rails is that the HTML files you create are dynamic. Those files will include embedded ruby ( the file has a . html . erb extension) that allows you to incorporate variables inside your HTML design (e.g. when you want to display a user’s name). embedded ruby embedded ruby ( html erb And that’s the basis for the MVC architecture of your Rails application. But none of this would matter if you can’t connect it properly. That’s why you need to set the routes. You can create the views’ files when generating the controller with: rails generate controller name view_name view2_name rails generate controller name rails generate controller name view_name view_name view_name view2_name view2_name view2_name The routes file Inside the config folder, you can find multiple files to adjust the behavior of your Rails application and add additional code to be run at the application start time. In the beginning, the only file you will be working with here is the routes.rb . Think of this as the phone guide of the company. Your app will check this file to call the right Controller and display the correct View. routes.rb The routes you will create on your app are based on the RESTful principles that use these HTTP requests: get, put, post and delete. RESTful Inside the routes file, you will create the correct liaisons to each part of your app. Check the image above. In lines 10 and 11 you are declaring that when a user gets to the /signup page, they will be routed to the new method of the User Model and when they click on the signup button, they will be posting information using the create method inside the User Model . liaisons gets new User Model posting create User Model Take a look at the last line of the image. That is the easiest way to declare all the routes you will need in your application using rails: resources :model. This line creates all RESTful routes to your model. Tip: remember to set up the routes right after you create a Controller or you will get a lot of errors when trying to open a page (because we don’t know who to call to display a view). After this wide overview of your Rails app, you should feel more comfortable when working with your files. Do you feel less overwhelmed when looking at your application directory? I hope this article was useful to understand a bit more about how Rails works. Need more help? Feel free to add a comment to the post and I will gladly answer your questions! Remember to follow me on my social media: Github LinkedIn Github Github LinkedIn LinkedIn Resources you would like to check: The Odin’s Project, a free online course to become a Full-Stack developer. Michael Hartl’s Ruby on Rails Tutorial an amazing tutorial to build an app. The Rails Guides is an excellent reference for technical support. The Odin’s Project , a free online course to become a Full-Stack developer. The Odin’s Project Michael Hartl’s Ruby on Rails Tutorial an amazing tutorial to build an app. Michael Hartl’s Ruby on Rails Tutorial The Rails Guides is an excellent reference for technical support. The Rails Guides
![featured image - Understanding your Rails Application Structure [Beginners Guide]](https://hackernoon.imgix.net/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-v082rs8.jpeg?auto=format&fit=max&w=3840)
![Integrating Redux to your React App [A Step by Step Guide]](https://hackernoon.imgix.net/drafts/vz3qu3y8i.png?auto=format&fit=max&w=3840)
