{"id":7264,"date":"2025-03-13T11:00:05","date_gmt":"2025-03-13T05:30:05","guid":{"rendered":"https:\/\/www.notiontechnologies.com\/blog\/?p=7264"},"modified":"2025-03-15T14:06:27","modified_gmt":"2025-03-15T08:36:27","slug":"how-to-build-an-mvc-web-app-from-terminal","status":"publish","type":"post","link":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/","title":{"rendered":"How to Build an MVC Web App from Terminal"},"content":{"rendered":"\n<p>Building a (<strong>How to Build an MVC web app from the terminal<\/strong>) is a great way to understand the core concepts of web development. MVC stands for Model-View-Controller. It is a design pattern that separates an application into three main components. This makes the code easier to manage and scale. In this guide, we will walk you through the steps to create a simple MVC web app using the terminal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is MVC?<\/h2>\n\n\n\n<p>Before we start, let\u2019s understand what MVC means.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Model<\/strong>: This handles the data and business logic.<\/li>\n\n\n\n<li><strong>View<\/strong>: This is what the user sees (the UI).<\/li>\n\n\n\n<li><strong>Controller<\/strong>: This acts as the middleman between the Model and the View.<\/li>\n<\/ul>\n\n\n\n<p>Using MVC helps you keep your code organized. It also makes it easier to work in teams.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisite<\/h2>\n\n\n\n<p>To build an <strong>MVC web app from the terminal<\/strong>, you need:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A computer with a terminal (Linux, macOS, or Windows).<\/li>\n\n\n\n<li>A code editor like VS Code or Sublime Text.<\/li>\n\n\n\n<li>Basic knowledge of a programming language like Python, Ruby, or JavaScript.<\/li>\n\n\n\n<li>A framework that supports MVC (e.g., Django, Ruby on Rails, or Express.js).<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Choose a Framework<\/h2>\n\n\n\n<p>Frameworks make it easier to build MVC web apps. Here are some popular ones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Django<\/strong> (Python)<\/li>\n\n\n\n<li><strong>Ruby on Rails<\/strong> (Ruby)<\/li>\n\n\n\n<li><strong>Express.js<\/strong> (JavaScript)<\/li>\n<\/ul>\n\n\n\n<p>For this guide, we will use <strong>Ruby on Rails<\/strong> as an example. It is beginner-friendly and widely used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Install Ruby and Rails<\/h2>\n\n\n\n<p>To build an <strong>MVC web app from the terminal<\/strong>, you need to install Ruby and Rails.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your terminal.<\/li>\n\n\n\n<li>Install Ruby:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   sudo apt-get install ruby-full<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Install Rails:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   gem install rails<\/code><\/pre>\n\n\n\n<p>Check if the installation was successful:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>rails --version<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Create a New Rails App<\/h2>\n\n\n\n<p>Now, let\u2019s create a new Rails app.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the folder where you want to create the app.<\/li>\n\n\n\n<li>Run this command:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails new my_mvc_app<\/code><\/pre>\n\n\n\n<p><br>Replace <code>my_mvc_app<\/code> with your app\u2019s name.<\/p>\n\n\n\n<p>This command creates a new folder with all the necessary files for your MVC web app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Understand the Folder Structure<\/h2>\n\n\n\n<p>After creating the app, you will see a folder structure like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>app\/models<\/strong>: Contains the Model files.<\/li>\n\n\n\n<li><strong>app\/views<\/strong>: Contains the View files (HTML templates).<\/li>\n\n\n\n<li><strong>app\/controllers<\/strong>: Contains the Controller files.<\/li>\n\n\n\n<li><strong>config<\/strong>: Contains configuration files.<\/li>\n\n\n\n<li><strong>db<\/strong>: Contains database-related files.<\/li>\n<\/ul>\n\n\n\n<p>This structure is the backbone of your <strong>MVC web app<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Generate a Controller and View<\/h2>\n\n\n\n<p>Let\u2019s create a simple page for your app.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Generate a controller:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails generate controller Welcome index<\/code><\/pre>\n\n\n\n<p><br>This creates a <code>Welcome<\/code> controller with an <code>index<\/code> action.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Open the <code>app\/views\/welcome\/index.html.erb<\/code> file.<\/li>\n\n\n\n<li>Add some HTML code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;h1&gt;Welcome to My MVC App&lt;\/h1&gt;\n   &lt;p&gt;This is the homepage.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Set Up Routes<\/h2>\n\n\n\n<p>Routes tell your app which page to display.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <code>config\/routes.rb<\/code> file.<\/li>\n\n\n\n<li>Add this line:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   root 'welcome#index'<\/code><\/pre>\n\n\n\n<p><br>This sets the homepage to the <code>index<\/code> action of the <code>Welcome<\/code> controller.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Run the Server<\/h2>\n\n\n\n<p>Now, let\u2019s see your app in action.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Start the server:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails server<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Open your browser and go to <code>http:\/\/localhost:3000<\/code>.<\/li>\n\n\n\n<li>You should see your homepage.<\/li>\n<\/ol>\n\n\n\n<p>Congratulations! You have built a basic <strong>MVC web app from the terminal<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Add a Model<\/h2>\n\n\n\n<p>To make your app more functional, let\u2019s add a Model.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Generate a Model:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails generate model Post title:string content:text<\/code><\/pre>\n\n\n\n<p><br>This creates a <code>Post<\/code> model with a title and content.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Run the migration to create the database table:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails db:migrate<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 9: Connect the Model, View, and Controller<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a controller for the <code>Post<\/code> model:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   rails generate controller Posts<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Add actions like <code>index<\/code>, <code>show<\/code>, and <code>new<\/code> to the controller.<\/li>\n\n\n\n<li>Create views for these actions in the <code>app\/views\/posts<\/code> folder.<\/li>\n<\/ol>\n\n\n\n<p>Now, your <strong>MVC web app<\/strong> is fully functional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10: Deploy Your App<\/h2>\n\n\n\n<p>Once your app is ready, you can deploy it. Popular options include Heroku, AWS, or DigitalOcean.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install the Heroku CLI:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   sudo snap install heroku --classic<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Log in to Heroku:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   heroku login<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Deploy your app:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   git push heroku main<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Building an <strong>MVC web app from the terminal<\/strong> is not as hard as it seems. By following these steps, you can create a fully functional app. Remember to keep your code organized and test it regularly. Happy coding!<\/p>\n\n\n\n<p>By following this guide, you have learned how to build an <strong>MVC web app from the terminal<\/strong>. This skill is essential for any web developer. Keep practicing, and you will master it in no time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a (How to Build an MVC web app from the terminal) is a great way to understand the core concepts of web development. MVC stands for Model-View-Controller. It is&hellip;<\/p>\n","protected":false},"author":7,"featured_media":7334,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-7264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.8 (Yoast SEO v24.3) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build an MVC Web App from Terminal<\/title>\n<meta name=\"description\" content=\"Learn how to build an MVC web app from the terminal with this guide. Perfect for beginners, this tutorial covers everything you need to know.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build an MVC Web App from Terminal\" \/>\n<meta property=\"og:description\" content=\"Learn how to build an MVC web app from the terminal with this step-by-step guide. Perfect for beginners, this tutorial covers everything you need to know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/NotionTechnologies\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-13T05:30:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-15T08:36:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Caroline Murphy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Build an MVC Web App from Terminal\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to build an MVC web app from the terminal with this step-by-step guide. Perfect for beginners, this tutorial covers everything you need to know.\" \/>\n<meta name=\"twitter:creator\" content=\"@notiontech\" \/>\n<meta name=\"twitter:site\" content=\"@notiontech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caroline Murphy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build an MVC Web App from Terminal","description":"Learn how to build an MVC web app from the terminal with this guide. Perfect for beginners, this tutorial covers everything you need to know.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/","og_locale":"en_US","og_type":"article","og_title":"How to Build an MVC Web App from Terminal","og_description":"Learn how to build an MVC web app from the terminal with this step-by-step guide. Perfect for beginners, this tutorial covers everything you need to know.","og_url":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/","article_publisher":"https:\/\/www.facebook.com\/NotionTechnologies","article_published_time":"2025-03-13T05:30:05+00:00","article_modified_time":"2025-03-15T08:36:27+00:00","og_image":[{"width":1000,"height":563,"url":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp","type":"image\/webp"}],"author":"Caroline Murphy","twitter_card":"summary_large_image","twitter_title":"How to Build an MVC Web App from Terminal","twitter_description":"Learn how to build an MVC web app from the terminal with this step-by-step guide. Perfect for beginners, this tutorial covers everything you need to know.","twitter_creator":"@notiontech","twitter_site":"@notiontech","twitter_misc":{"Written by":"Caroline Murphy","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#article","isPartOf":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/"},"author":{"name":"Caroline Murphy","@id":"https:\/\/www.notiontechnologies.com\/blog\/#\/schema\/person\/e3e03eb273f61161a2d803ecf8d50be7"},"headline":"How to Build an MVC Web App from Terminal","datePublished":"2025-03-13T05:30:05+00:00","dateModified":"2025-03-15T08:36:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/"},"wordCount":650,"publisher":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#primaryimage"},"thumbnailUrl":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp","articleSection":["Resources"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/","url":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/","name":"How to Build an MVC Web App from Terminal","isPartOf":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#primaryimage"},"image":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#primaryimage"},"thumbnailUrl":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp","datePublished":"2025-03-13T05:30:05+00:00","dateModified":"2025-03-15T08:36:27+00:00","description":"Learn how to build an MVC web app from the terminal with this guide. Perfect for beginners, this tutorial covers everything you need to know.","breadcrumb":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#primaryimage","url":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp","contentUrl":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2025\/03\/how-to-build-an-mvc-web-app-from-terminal.webp","width":1000,"height":563,"caption":"How to Build an MVC Web App from Terminal"},{"@type":"BreadcrumbList","@id":"https:\/\/www.notiontechnologies.com\/blog\/how-to-build-an-mvc-web-app-from-terminal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.notiontechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build an MVC Web App from Terminal"}]},{"@type":"WebSite","@id":"https:\/\/www.notiontechnologies.com\/blog\/#website","url":"https:\/\/www.notiontechnologies.com\/blog\/","name":"notiontechnologies.com","description":"","publisher":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.notiontechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.notiontechnologies.com\/blog\/#organization","name":"Notion Technologies","url":"https:\/\/www.notiontechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.notiontechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2023\/05\/notion-technologies.png","contentUrl":"https:\/\/www.notiontechnologies.com\/blog\/wp-content\/uploads\/2023\/05\/notion-technologies.png","width":336,"height":156,"caption":"Notion Technologies"},"image":{"@id":"https:\/\/www.notiontechnologies.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/NotionTechnologies","https:\/\/x.com\/notiontech","https:\/\/www.linkedin.com\/company\/notiontechnologies","https:\/\/twitter.com\/notiontech"]},{"@type":"Person","@id":"https:\/\/www.notiontechnologies.com\/blog\/#\/schema\/person\/e3e03eb273f61161a2d803ecf8d50be7","name":"Caroline Murphy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.notiontechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce57f0ceee12fcdf8b2015d2d3b9e4c2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce57f0ceee12fcdf8b2015d2d3b9e4c2?s=96&d=mm&r=g","caption":"Caroline Murphy"},"description":"Staff Writer. Frequently covers tech, business psychology, social media, startups and digital marketing.","sameAs":["https:\/\/www.notiontechnologies.com"],"url":"https:\/\/www.notiontechnologies.com\/blog\/author\/caroline-murphy\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/7264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=7264"}],"version-history":[{"count":4,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/7264\/revisions"}],"predecessor-version":[{"id":7270,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/7264\/revisions\/7270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/media\/7334"}],"wp:attachment":[{"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=7264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=7264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.notiontechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=7264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}