If you are a beginner, you should know that Ruby on Rails is a framework that helps you build web applications.
For some years Ruby on Rails is used in software development and that’s because of its many benefits. A lot of companies are using Rails like:
- Airbnb
- Fiverr
- Basecamp
- GitHub
- Dribbble
- Couchsurfing
Yet, as all new things, it can be hard using Ruby on Rails as a beginner. But don’t worry! In this article, we will look at how you can start your first rails application and create your own page.
Creating a rails app
To create your first rails application, it’s easy. Yet, you need to install Ruby and SQL Lite on your computer. So make sure it’s done.
The Rails command for starting a new app is
rails new your-app-namerails new my-rails-appAs soon as you use this command, rails will create a new folder called ‘my-rails-app’. You can open it with a code editor (I will use VS Code in this case).
After opening your folder ‘rails-app’ with VS code, you should have something like this:
Starting your rails server
Let’s now start the app. Open your terminal in VS code and type
rails serverThat’s it! You started your first rails application! If everything goes well, you should have something like this:
Changing the content of your Rails application
Having your rails app up and running is great. But, we need to make changes to our default app to make it our own. To change the content of your app, you need to understand how rails work behind the scenes.
How Ruby On Rails Works: Understanding the MVC Architecture
Rails works using the MVC architecture: Model-View-Controller. This is not proper for Rails though. A lot of other frameworks like Django, AngularJS, or ReactJs use the MVC concept as well.
Explaining the MVC in detail would take another article. Just know that the MVC architecture is how Rails connects the frontend to the backend.
The different roles for each of them are:
- Model: handles everything related to the database
- View: the part that deals with what the user views in your app.
- Controller: it deals with the requests made by users and returns a result (like a new visual or login into an account). In dynamic websites, the controller also talks to the database.
Here’s a visual explanation of what we said:
Picutre from: sitePoint
When a user makes a request (let’s say a search), that request will hit a router. The router will send the request to the controller. And that’s where the controller takes over. It will deal with the database (if needed) and print the result in the view (hence the search results). That’s when you see your search results.
Creating the route
Let’s create a new path for our application. Right now we can’t go anywhere in our rails app. Let’s say we want to go to the /blog path of our app. If we type http://localhost:3000/blog, we will get an error like this:
You see? It’s telling us something: there is no path( or route) for http://localhost:3000/blog.
In other words, there is no ‘/blog’ yet in our application. This means we have to create it. And we do this with the router!
The router is the link between the app and the user. When you type localhost:3000/blog, it will hit the router.
The router checks if there is an existing route in your application that deals with that request. If not, it will return an error (like we are having now). So if we want to solve this error, we have to create this ‘/blog’ route. Let’s do it!
Go back to your code editor, and open the routes.rb file (in your config folder).
We create a new route (get request) with this syntax: “
get blog, to: ‘blog#indexThis is a way of telling Rails “Hey! when someone wants to go to localhost/blog, know that it exists and map that request to somewhere”. And that ‘somewhere’ here is our blog controller (again look at the MVC illustration).
If we try again with our app(refreshing our page), we are getting a new error. This means that it created the route (the route exists). But it’s not seeing the controller with the name ‘blog’.
So let’s create it!
Creating the blog controller
In your app folder, there is a ‘controllers’ folder. You need to browse into that folder (from the root folder) to create your new controller. There are two ways to create a new controller:
- By doing it with the terminal
- By creating it manually
We will create our new controller using the terminal. This will help us create other necessary files as well (as we’ll see later).
So open your terminal and type the command
rails generate controller blogNow take a look inside your controllers folder. You will see that rails generated a new file called blog_controller.rb. We have now created our controller!
Creating the index action for our controller
If we refresh our server, we will get… well, another error. But this will soon end! If you look at this error, you will see that the BlogController is existing now. Yet, it still needs an action to deal with that request.
Think of an action as a method. You will use it to deal with the request (in this case, having to deal with the request ‘localhost:3000/blog’). So we will now create that index action in our blog controller like this:
- Open your blog_controller.rb file
- Inside the class, create a method named index. This method will actually deal with the request as defined in the router.
If we save and refresh the page, we got our last error: there is no view for the page.
You see, the app understands the request. It recognizes there’s is a blog router in your app. It then maps the request to a particular method in the blog controller (the index method). Everything is correct at that time. However, the app crashes when it reaches the action (index action). That’s because there is something missing: the view!
In fact, the index action’s job is to communicate with the view and show the page you request. Sometimes it can do this with some data as well (from the database).
We won’t use any database in this simple guide. All we need is to print a “Hello World!” on our blog page. So let’s create a simple view.
Creating the view
Now that the request is mapped to the index action, you need to create a view for it.
If you remember, we created our controller using “rails generate controller blog”.
This command has also created a new folder for our view. So if you go inside your views folder, you will find a blog folder.
This is the folder where you can create all your views for the /blog path. If the request hits the index action, it will search for a view called ‘index.html.erb’ in your views/blog folder.
So we need to create a view with the same name as our index action. Now go ahead and create a file called ‘index.html.erb’ inside views/blog.
The extension html.erb helps you write both HTML and Ruby code in the same file. It’s that simple. But, we will print a basic HTML code in our file like this:
Now if we refresh our page, we should get the app printing our actual view.
Congratulations! You created your first rails app!
Styling your application
If you want to style your application, know that it’s easy. The command
rails generate controller blog You can target HTML elements and style them as you would do with a simple HTML and CSS page.
To style your application, open your assets folder (inside the app folder). Then go to stylesheets and open the blog.scss file. You can add all your stylings for the blog page here.
Conclusion
This was a little guide to show you how you can start working with Rails. However, understanding Rails and building awesome web applications comes with practice. Rails has a solid community and documentation. You can find almost everything you need to become a good developer in this case. The most popular source to get started with Ruby On Rails is its documentation.