Creating an app and deploying it for the first time on heroku

Creating an application `rails new railsgirls cd rails server`

Use scaffold to form ideas, add, remove, edit, view. rails generate scaffold idea name:string description:text picture:string

Next, update the database. rails db:migrate

Design Design with Bootstrap.

app/views/layouts/application.html.erb


<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Add the following before this one line

app/views/layouts/application.html.erb


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

Also, modify the inside of <body> as follows.

app/views/layouts/application.html.erb


<div class="container">
  <%= yield %>
</div>

Then add navigation and footer to your layout. Add the following immediately after <body>.

app/views/layouts/application.html.erb


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

In addition, add the following just before </ body>.

app/views/layouts/application.html.erb


<footer>
  <div class="container">
    Rails Girls 2020
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

It also changes the style of the ideas table.

app/assets/stylesheets/application.css


body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

Addition of photo upload function

Open Gemfile and Immediately after gem'sqlite3', add the following line, gem 'carrierwave'

Then run the following command in the terminal:

bundle

Then you can generate code to perform the upload with the following command:

rails generate uploader Picture

next,

app/models/idea.rb


class Idea < ApplicationRecord

Immediately after, write the following.

app/models/idea.tb


mount_uploader :picture, PictureUploader

further,

app/views/ideas/_form.html.erb


<%= form.text_field :picture %>

Modify this as follows:

app/views/ideas/_form.html.erb


<%= form.file_field :picture %>

This just shows the path of the file. So

app/views/ideas/show.html.erb


<%= @idea.picture %>

Modify the above code as follows.

app/views/ideas/show.html.erb


<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Root adjustment http://localhost:3000でideasページにリダイレクトできるようにします。

config/routes.rb


root to: redirect('/ideas')

Add a page to the app

rails generate controller pages info

Upload the app to Heroku

Preparing for Heroku

First, set up a Heroku account. User registration screen: (https://signup.heroku.com/)

Install Heroku CLI Download an application for command line operations on Heroku.

For Mac brew install heroku/brew/heroku

Once you have Heroku Toolbelt installed, enter the following command in your terminal: heroku login

Then add the code you created to your version control system. Enter the following command in the terminal:

echo public/uploads >> .gitignore


git add .
git commit -m "initial commit"

Database update
gem 'sqlite3', '~> 1.4'

Modify this code as follows:


group :development do
  gem 'sqlite3', '~> 1.4'
end
group :production do
  gem 'pg'
end

Then run the following command on the terminal to set it up.

bundle install --without production git add . git commit -m "Added pg gem and updated Gemfile.lock"

Deploy the app Create a Heroku app. The name of the app must be unique on heroku. `heroku create first-app`

If successful, the following will be displayed. Creating ⬢ first-app... done http://my-first-app.herokuapp.com/ | https://git.heroku.com/my-first-app.git

If the name of the app is already used, it will be displayed as below. Creating ⬢ my-first-app... ! ▸ Name first-app is already taken

Push code Send the code to heroku. git push heroku main

Database migration heroku run rails db:migrate

You can see the app from the internet by running the following command. herku open

Reference Rails Girls Guides https://railsgirls.jp/

Recommended Posts

Creating an app and deploying it for the first time on heroku
Learn for the first time java # 3 expressions and operators
Spring Boot for the first time
Spring AOP for the first time
Introduction to java for the first time # 2
Learning for the first time java [Introduction]
The story of releasing the Android app to the Play Store for the first time.
Let's experience the authorization code grant flow with Spring Security OAuth-Part 2: Creating an app for the time being
Walls hit by Rspec for the first time
Ssh login to the app server on heroku
The training for newcomers was "Make an app!", So I made an app for the time being.
Tips for using the Spotify app on Ubuntu
Android Studio development for the first time (for beginners)
I tried touching Docker for the first time
left4dead2 I made a Docker image for the server and tried running it on GCE # 3 (I had a hard time building the server)
[Android studio / Java] What you don't understand when you touch it for the first time
Try running an app made with Quarkus on Heroku
Import the instance and use it on another screen
Oreore certificate https (2020/12/19) for the first time with nginx
Learning memo when learning Java for the first time (personal learning memo)
How to study kotlin for the first time ~ Part 2 ~
How to study kotlin for the first time ~ Part 1 ~
Create an Android app for those who don't want to play music on the speaker
Access Web API on Android with Get and process Json (Java for the time being)
[Rails] I tried using the button_to method for the first time
Created the first LINEbot on AWS Cloud9 (Rails + Heroku deployment)
Beginner-friendly Android app publishing procedure, struggling for the first release⁈
[Android] Change the app name and app icon for each Flavor
Building an environment for creating apps with Rails and Vue
Modeling a Digimon with DDD for the first time Part 1
Technical causes and countermeasures for the points I was addicted to with the first Android app & Kotlin
[Memo] Run Node.js v4.4.5 on CentOS 4.9 / RHEL4 (i386) for the time being (gcc-4.8 and glibc2.11 on LinuxKernel 2.6.9)
[Introduction] Installation of Docker Desktop for Mac for the first time and setup of virtual environment construction of CentOS
Install the memcached plugin on MySQL and access it from Java
I opened the menu bar (option menu) on Android and saw it.
(Ruby on Rails6) Creating a database and displaying it in a view
"Wait for the process to finish." And kill the process because it remains.
Create a Docker Image for redoc-cli and register it on Docker Hub
Released the No Todo app instead of Todo. .. (And notes on ridgepole)
Android Studio shows only one method for button onClick and Java throws an exception and ruins the app
What an inexperienced person is thinking now after a month of self-taught programming for the first time.
[Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery
Prepare the environment for CUDA, Nvida-Driver, and cuDNN on an Ubuntu 18.04 PC equipped with Geforce RTX2080 SUPER.