Nuxt.js × Create an application in Rails API mode

Thing you want to do

Create front with Nuxt.js and API with Rails Post with Postman for the created API

** Development environment ** ruby 2.6.5 Rails 6.0.3.4 node v14.7.0 yarn 1.22.4

Make the front with Nuxt.js

--Create a front application with the name ʻapp` in the directory post-app --Axios is selected to be installed when creating a project

// post-Create a directory called app
$ mkdir post-app
$ cd post-app

//Create an application with nuxt
$ npx create-nuxt-app app

//Select various settings
? Project name: (app)
└ Press Enter button as it is

? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript
└ Select JavaScript

? Package manager:
❯ Yarn
  Npm
└ Select Yarn

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
└ Select None

? Nuxt.js modules:
❯◉ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content
└ Select Axios (press the spacebar)

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
└ Press Enter button as it is

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO
└ Press Enter button as it is

? Rendering mode:
  Universal (SSR / SSG)
❯ Single Page App
└ Select Single Page App

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/JAMStack hosting)
└ Select Server

? Development tools:
❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
└ jsconfig.Select json (press spacebar)

Change nuxt port number to 8000

Official page

Quoted from the official ▼

js:app/nuxt.config.js


export default {
  server: {
    port: 8000, //Default: 3000
    host: '0.0.0.0' //Default: localhost
  }
  //Other settings
}

** Actual description ▼ **

js:app/nuxt.config.js


server: {
  port: 8000,
},

Launch localhost

$ cd app
$ yarn dev

//When the following is displayed, http://localhost:8000/Accessable at

   │   Nuxt.js @ v2.14.7                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:8000/

Create an API server with Rails

//API mode, DB makes rails application with MySQL
$ rails new api --api -d mysql

//Make a DB
$ rails db:create
Created database 'api_development'
Created database 'api_test'

Create Model and Controller

//Create a Post Model
$ rails g model Post title:string body:text

//migrate
$ rails db:migrate

//Create a posts controller in the v1 directory inside the api directory
//Skip the automatic generation of the test directory
$ rails g controller api::v1::posts --skip-test-framework

Routing settings

--Create a routing called / api / v1 / posts

api/config/routes.rb


Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :posts
    end
  end
end

Set up PostsController

api/app/controllers/api/v1/posts_controller.rb


class Api::V1::PostsController < ApplicationController
  before_action :set_post, only: [:show, :update, :destroy]

  def index
    posts = Post.order(created_at: :desc)
    render json: { status: 'SUCCESS', message: 'Loaded posts', data: posts }
  end

  def show
    render json: { status: 'SUCCESS', message: 'Loaded the post', data: @post }
  end

  def create
    post = Post.new(post_params)
    if post.save
      render json: { status: 'SUCCESS', data: post }
    else
      render json: { status: 'ERROR', data: post.errors }
    end
  end

  def destroy
    @post.destroy
    render json: { status: 'SUCCESS', message: 'Deleted the post', data: @post }
  end

  def update
    if @post.update(post_params)
      render json: { status: 'SUCCESS', message: 'Updated the post', data: @post }
    else
      render json: { status: 'SUCCESS', message: 'Not updated', data: @post.errors }
    end
  end

  private

  def set_post
    @post = Post.find(params[:id])
  end

  def post_params
    params.permit(:title, :body)
  end
end

Try posting using Postman

Postman Reference article on how to use --OK if it looks like the following Postman.gif

Check that you can post in the Rails console

//Launch the console
$ rails c

//Check the post
irb(main):001:0> Post.first

It is OK if the same content as Postman is displayed above

Recommended Posts

Nuxt.js × Create an application in Rails API mode
[Rails] Create an application
[Rails] Use cookies in API mode
Create authentication function in Rails application using devise
Implement application function in Rails
How to create an application
Launch the Rails app locally in production mode (API Server)
[Rails] Create an echo bot using the LINE Messaging API.
Preparing to create a Rails application
Create a new app in Rails
Create an easy-to-extend Stream API alternative
How to return Rails API mode to Rails
Install Rails in the development environment and create a new application
[Rails] Create an evaluation function using raty.js
Rails API
Create an HTML/XML generator in Swift (dynamicMemberLookup)
[Rails] Let's create a super simple Rails API
Create a SPA with authentication function with Rails API mode + devise_token_auth + Vue.js 3 (Rails edition)
Beginners create portfolio in Ruby on Rails
# 6 show, create implementation to build bulletin board API with authentication authorization in Rails 6
Create a Windows desktop application in Ruby and distribute an executable file (.exe)!
What to do if ffi installation fails when launching an application in Rails
Create an RSA encryption-enabled JSON API with wicket
Rails6 [API mode] + MySQL5.7 environment construction with Docker
[Rails] Implementation of retweet function in SNS application
Create an app by specifying the Rails version
How to easily create a pull-down in Rails
Rails6.0 ~ How to create an eco-friendly development environment
Make Rails API mode support cookie (session) authentication
I tried to develop an application in 2 languages
Create an EC site with Rails5 ⑤ ~ Customer model ~
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
Group_by in Rails
Place "Create a to-do list using Rails API mode and React Hooks" on docker
[Introduction] Try to create a Ruby on Rails application
Implement post search function in Rails application (where method)
Create an EC site with Rails5 ⑦ ~ Address, Genre model ~
Create an EC site with Rails 5 ⑨ ~ Create a cart function ~
Create an EC site with Rails5 ④ ~ Header and footer ~
Rails (API mode) x React x TypeScript simple Todo app
Create an EC site with Rails5 ⑥ ~ seed data input ~
I got an error "undefined method` create'" in RSpec
Rails6 I tried to introduce Docker to an existing application
Build Rails (API) x MySQL x Nuxt.js environment with Docker
[Rails] How to display an image in the view
Create API key authentication for Web API in Spring Security