[RUBY] Building an environment for creating apps with Rails and Vue

This article aims to do Hello Vue! With Rails and Vue.

Creating a project

Anyway, it's rails new, isn't it? By the way, at this point you can install vue from the beginning with the --webpack = vue option, but this time I will introduce other methods. All you have to do is hit rails webpacker: install: vue later.

% rails -v
Rails 6.0.3.4

% rails new memo-memo -d mysql --skip-test

% cd memo-memo

Actually, I stumbled on the installation of mysql and wrote that article, so please refer to it. This time I will proceed with a body that has not failed. rails new fails to install mysql

Creating a database

% rails db:create
Created database 'memo_memo_development'
Created database 'memo_memo_test'

Hello World!

% rails s
Webpacker configuration file not found xxx/memo-memo/config/webpacker.yml.
Please run rails webpacker:install Error: 
No such file or directory @ rb_sysopen - xxx/memo-memo/config/webpacker.yml (RuntimeError)

I was angry that webpacker was not installed

% rails webpacker:install
% rails s
=> Booting Puma
=> Rails 6.0.3.4 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.7 (ruby 2.6.3-p62), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop

What is Webpacker

Now that I've been able to say hello to the world, I'm going to use Vue with Webpacker. For those who don't know what Webpacker is, Webpacker is a library for putting Webpack in Rails, and it makes Webpack settings good. Webpack is a file that brings together files such as JS. To put it coolly, it's a module bundler. The reason for grouping the files together is to speed up the loading of the browser. It takes an overwhelming amount of time to get the file compared to calculating with the CPU, and reducing the number of times the file is read has a great effect on the loading speed of the browser. By the way, compilation is not the original function of Webpack, but it is realized by putting loader in webpacker. Also, in practice, with Webpacker, when an error occurs, it becomes difficult to understand what is the cause, so it seems that Webpack is used without fun. However, if you are a beginner like me, I think there is no problem entering from Webpacker. The story is going to be long, so I'll move on.

Install Vue

% rails webpacker:install:vue

I think some files have been added, but the important files are app/javascript/packs/hello_vue.js and app/javascript/app.vue. You can do hello vue! With these files.

app/javascript/packs/hello_vue.js


import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

app/javascript/app.vue


<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

The reason why hello_vue.js is required in addition to app.vue is that the vue file is read via the js file instead of being read directly. If you load hello_vue.js with html.erb, hello_vue.js is loading app.vue, so you can display app.vue. Hello Vue! Is defined in the variable called message in the script tag of the app.vue file, and the variable message is written in the p tag in the template tag, so Hello Vue! Is output. I think you can understand it somehow. I will omit the detailed explanation.

Display of Hello Vue!

I'm going to create a simple page to display Hello Vue !. The flow is routing → controller → view. Here, when I access'localhost: 3000/home', I want to be routed to the index action of the Home controller and display app/view/home/index.html.erb from the index action. Display Hello Vue! By loading the hello_vue.js file with its index.html.erb.

Now let's set up the routing.

routes.rb


 get 'home', to: 'home#index'

Do you know what happens if you access localhost: 3000/home in this state? I think it says'uninitialized constant HomeController'. It's natural because the Home controller is not defined. I will make a Home controller.

% rails g controller home
      create  app/controllers/home_controller.rb
      invoke  erb
      create    app/views/home
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/home.scss

Open the created app/controllers/home_controller.rb file and add an index action.

class HomeController < ApplicationController
  def index
  end
end

This completes the definition of the index action. You don't have to define anything because render is implicitly called to execute the template associated with the action by name. By the way, do you know what happens if you access localhost: 3000/home in this state? It's a missing a template, isn't it? Next, create app/view/home/index.html.erb. After creating it, load hello_vue.js. Use javascript_pack_tag'' to include the JavaScript pack in the view. I want to load hello_vue.js this time, so I put hello_vue in the pack name.

<%= javascript_pack_tag 'hello_vue' %>

Now, go to http: // localhost: 3000/home and see if "Hello Vue!" Is displayed!

thank you for your hard work. When it comes to actual development, it is better to execute the bin/webpack-dev-server command in addition to rails s. This command will do a hot reload of the JS file. It is also possible to write rails s and bin/webpack-dev-server in one file and execute two commands with one command. I won't go into details, but it requires a gem called foreman. You can find it by checking'foreman rails s bin/webpack-dev-server'. Also, for bin/webpack-dev-server, this article may be helpful.

Recommended Posts

Building an environment for creating apps with Rails and Vue
Building Rails 6 and PostgreSQL environment with Docker
[Rails] Building an environment for developing web applications
A memorandum for creating an extended logger using org.slf4j.Logger
Procedure for publishing an application using AWS (4) Creating a database
Building an environment for creating apps with Rails and Vue
Procedure for building a Rails application development environment with Docker [Rails, MySQL, Docker]
Tutorial 1 for building apps with Rails (First steps to Yay! You're on Rails!)
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
Rails development environment created with VSCode and devcontainer
[Rails] How to build an environment with Docker
A memorandum when building an environment with Ruby3.0 x Rails6.1 x Docker x CentOS Stream
Stable development environment construction manual for "Rails6" with "Docker-compose"
Create an EC site with Rails5 ④ ~ Header and footer ~
Prepare the environment for java11 and javaFx with Ubuntu 18.4
Building an environment for copying the book "Test Driven Development"
Getting started with Java and creating an AsciiDoc editor with JavaFX
Rough procedure verbalized output when creating an app with Rails
Summary of initial work when creating an app with Rails
Preparation for developing with Rails
A story stuck with an error when building Vagrant + Virtulbox CentOS7.8 and creating a shared folder
How to specify db when creating an app with rails
[Docker] Rails 5.2 environment construction with docker
Create Rails5 and postgresql environment with Docker and make pgadmin available
List of copy and paste collections that are useful when creating apps with Ruby on Rails
How to install Pry after building Rails development environment with Docker
(For myself) Try creating a C # environment with docker + code-server, cloud9
How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
"Rails 6 x MySQL 8" Docker environment construction procedure for sharing with teams
Creating a dual boot environment for Ubuntu Server 20.04.1 LTS and Windows 10
Rails + MySQL environment construction with Docker
Create a Vue3 environment with Docker!
Links for creating Android apps (for beginners)
[Rails] Creating a new project with rails new
Build environment with vue.js + rails + docker
About creating an application with springboot
Build Rails environment with Docker Compose
[Environment construction with Docker] Rails 6 & MySQL 8
[EC2 / Vue / Rails] EC2 deployment procedure for Vue + Rails
# 1 [Beginner] Create a web application (website) with Eclipse from knowledge 0. "Let's build an environment for creating web applications"
Prepare the environment for CUDA, Nvida-Driver, and cuDNN on an Ubuntu 18.04 PC equipped with Geforce RTX2080 SUPER.
I built a rails environment with docker and mysql, but I got stuck
Building an environment for "test-driven development" copying sutras starting at the terminal
Creating a java web application development environment with docker for mac part1
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
Launching the production environment with docker + rails (ver5.2) and errors that occurred
Build a bulletin board API with authentication and authorization with Rails 6 # 1 Environment construction
Creating an app and deploying it for the first time on heroku
When building rails6 environment on Ubuntu, it gets stuck with bundle install
Create an EC site with Rails5 ③-Set model associations and other things-
Complete roadmap for building environment up to Docker + rails6 + MySQL + bootstrap, jquery
[Ruby on Rails] Creating an inquiry form
Create an infinite scroll with Infinite Scroll and kaminari
Notes for using BLE with iOS apps
Rails environment construction with Docker (personal apocalypse)
Build and manage RStudio environment with Docker-compose
Create Rails 6 + MySQL environment with Docker compose
Migrate existing Rails 6 apps to Docker environment
Prepare the format environment with "Rails" (VScode)
Prepare the security check environment for Rails 6
Build an environment with Docker on AWS
Let's make an error screen with Rails