Jak nastavit projekt Ruby on Rails v7 s frontendem React na Ubuntu 20.04

Jak nastavit projekt Ruby on Rails v7 s frontendem React na Ubuntu 20.04

Úvod

Ruby on Rails (RoR) je robustní framework pro vývoj webových aplikací, který je známý svou elegancí, produktivitou a uživatelsky přívětivou povahou. Reactjs je oblíbená javascriptová knihovna pro vytváření dynamických a interaktivních webových stránek. Kombinace těchto dvou technologií umožňuje vývojářům rychle navrhovat a implementovat komplexní webové aplikace.

Tento návod vás provede krok za krokem procesem nastavení projektu Ruby on Rails v7 s frontendem React na Ubuntu 20.04. Budeme předpokládat, že máte v systému nainstalovány základní nástroje jako Git, Node.js a PostgreSQL.

Instalace MySQL

1. Aktualizujte seznam balíčků:

sudo apt update


2. Nainstalujte MySQL server:

sudo apt install mysql-server


3. Spusťte MySQL server:

sudo systemctl start mysql


4. Zajistěte automatické spuštění MySQL při bootování:

sudo systemctl enable mysql


Nainstalujte Ruby on Rails

1. Přidejte repozitář Brightbox Ruby:

sudo add-apt-repository ppa:brightbox/ruby-ng
sudo apt update


2. Nainstalujte Ruby a Rails:

sudo apt install ruby2.7 ruby2.7-dev build-essential libpq-dev nodejs
sudo gem install rails


Vygenerujte novou aplikaci Rails

1. Vytvořte nový adresář pro svůj projekt:

mkdir rails-react-app
cd rails-react-app


2. Generujte novou aplikaci Rails:

rails new my_app --api --database=postgresql


Spusťte aplikaci Rails

1. Přepněte do adresáře aplikace:

cd my_app


2. Spusťte migraci databáze:

rails db:create
rails db:migrate


3. Spusťte server Rails:

rails s


Instalace Reactu

1. Vytvořte nový adresář frontend pro frontend aplikace:

mkdir frontend
cd frontend


2. Inicializujte nový projekt React:

npx create-react-app .


3. Přidejte skript pro spuštění vývojového serveru React do souboru package.json:

{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
}
}


Konfigurace Rails pro připojení Reactu

1. Přidejte následující řádky do souboru config/webpacker.yml:

source_path: ../frontend
source_entry_path: index.jsx


2. Přidejte následující řádky do souboru app/javascript/packs/application.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../frontend/src/App';

ReactDOM.render(<App />, document.getElementById('root'));


Spojte frontend a backend

1. Vytvořte nový ovladač API v Rails:

rails generate api/v1/tasks


2. Přidejte následující do souboru app/controllers/api/v1/tasks_controller.rb:

class Api::V1::TasksController < ApplicationController
protect_from_forgery with: :null_session

def index
@tasks = Task.all
render json: @tasks
end

def create
@task = Task.new(task_params)

if @task.save
render json: @task, status: :created
else
render json: @task.errors, status: :unprocessable_entity
end
end

private

def task_params
params.require(:task).permit(:title, :description)
end
end


3. Přidejte následující do souboru routes.rb:

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


Spusťte aplikaci

1. V jednom terminálovém okně spusťte server Rails:

rails s


2. V jiném terminálovém okně přejděte do adresáře frontend a spusťte vývojový server React:

cd ../frontend
npm start


Závěr

Úspěšně jste nastavili a spustili projekt Ruby on Rails v7 s frontendem React na Ubuntu 20.04. Tato architektura poskytuje výkonné a flexibilní řešení pro vývoj moderních webových aplikací. S použitím Reactu můžete snadno vytvářet interaktivní a dynamické uživatelské rozhraní, zatímco Rails se stará o backendovou logiku a správu dat. Tato kombinace umožňuje vývojářům rychle navrhovat a implementovat komplexní webové aplikace, které splňují požadavky moderních uživatelů.

Často kladené otázky (FAQ)

* Jak mohu přidat další funkce do mé aplikace?
Můžete přidat další modely, ovladače a zobrazení do vaší aplikace Rails a odpovídající komponenty React do vašeho frontendu.

* Jak mohu zabezpečit svou aplikaci?
Můžete implementovat vhodné bezpečnostní opatření na straně Rails i React, jako je ověřování, autorizace a šifrování.

* Jak mohu optimalizovat výkon své aplikace?
Můžete použít techniky, jako je kešování, komprese a optimalizace kódu, ke zlepšení výkonu vaší aplikace.

* Jak mohu nasadit svou aplikaci do produkčního prostředí?
Můžete použít platformy jako Heroku nebo AWS Elastic Beanstalk k nasazení vaší aplikace do produkce.

* Jak mohu přispívat do projektu open source Ruby on Rails?
Můžete se zapojit do komunity Ruby on Rails a přispívat k projektu na GitHubu.

* Kde mohu najít další zdroje k výuce Ruby on Rails a Reactu?
Existuje mnoho online zdrojů, tutoriálů a dokumentace, které vás mohou dále naučit Ruby on Rails a React.

* Jak mohu rozšířit funkčnost své aplikace pomocí knihoven třetích stran?
Ruby on Rails a React mají ekosystém knihoven třetích stran, které můžete použít k přidání dalších funkcí do své aplikace.

* Jak mohu sledovat výkon a chování své aplikace?
Můžete použít nástroje, jako je New Relic nebo Datadog, ke sledování výkonu a chování vaší aplikace.