Uvod
U današnje vreme, neizbežno je da moderne web aplikacije poseduju odzivan, interaktivan i brzo učitavajući korisnički interfejs. Kombinovanjem Ruby on Rails (RoR), framework-a zasnovanog na MVC arhitekturi za razvoj web aplikacija sa back-end strane, i React-a, fleksibilne JavaScript biblioteke za izgradnju korisničkih interfejsa sa front-end strane, dobija se idealno rešenje za izradu robusnih i efikasnih web aplikacija.
U ovom detaljnom vodiču, provešćemo vas kroz postupak podešavanja Ruby on Rails v7 projekta zajedno sa React front-end-om na Ubuntu 20.04 serveru. Kroz korake ćemo obraditi sve neophodne elemente, od instaliranja potrebnih zavisnosti do pokretanja vaše aplikacije.
Instaliranje neophodnih zavisnosti
Ruby i Rails
1. Osvežite sistem koristeći sledeću komandu:
sudo apt update
2. Instalirajte Ruby-2.7.6 i Rails-7.0.4 pomoću ovih komandi:
sudo apt-get install ruby-full
sudo gem install rails -v 7.0.4
Node.js i Yarn
1. Dodajte Node.js PPA i ažurirajte listu paketa:
curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt update
2. Instalirajte Node.js i Yarn:
sudo apt install nodejs
sudo npm install -g yarn
React
1. Napravite novi direktorijum za vaš React frontend:
mkdir frontend
cd frontend
2. Inicijalizujte novi npm projekat:
yarn init -y
3. Instalirajte React i potrebne zavisnosti:
yarn add react react-dom
Kreiranje Ruby on Rails projekta
1. Vratite se u glavni direktorijum i napravite novi Rails projekat:
cd ..
rails new backend --api
2. Uđite u direktorijum projekta:
cd backend
3. Generišite model, kontroler i rute za resurs „artikal“:
rails generate resource article
4. Pokrenite migracije kako biste kreirali tabelu u bazi podataka:
rails db:migrate
Konfigurisanje React Frontend-a
1. Vratite se u direktorijum React Frontend-a:
cd ../frontend
2. Kreirajte novu registarsku komponentu:
touch src/App.js
3. Otvorite App.js i dodajte sledeći kod:
import React, { useState, useEffect } from 'react';
function App() {
const [articles, setArticles] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/articles')
.then(res => res.json())
.then(data => setArticles(data))
.catch(err => console.log(err));
}, []);
return (
<div>
{articles.map(article => (
<p key={article.id}>{article.title}</p>
))}
</div>
);
}
export default App;
4. Kreirajte novi index.html fajl za pokretanje React aplikacije:
touch public/index.html
5. Otvorite index.html i dodajte sledeći kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Frontend</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
6. Kreirajte novi main.js fajl za kompajliranje React aplikacije:
touch public/main.js
7. Otvorite main.js i dodajte sledeći kod:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';
ReactDOM.render(<App />, document.getElementById('root'));
Povezivanje Ruby on Rails i React Frontend-a
1. Instalirajte webpacker gem u Ruby on Rails projekat:
cd ../backend
rails webpacker:install
2. Ažurirajte webpack konfiguraciju u config/webpack/environment.js:
const environment = {
development: {
...
devtool: 'eval'
},
...
};
3. Pokrenite webpacker da bi ste kompajlirali React aplikaciju:
rails webpacker:compile
4. Pokrenite Rails server:
rails s
5. Posetite http://localhost:3000 u browser-u kako biste videli vašu React aplikaciju.
Zaključak
Uspešno ste postavili Ruby on Rails v7 projekat sa React front-end-om na Ubuntu 20.04 serveru. Ovu konfiguraciju možete koristiti kao temelj za izgradnju sopstvenih web aplikacija koje će pružiti izvanredno korisničko iskustvo. Imajte na umu da je ovo samo početna tačka i da će možda biti potrebno prilagoditi konfiguraciju u skladu sa vašim specifičnim zahtevima.
Timski rad, otvorena razmena znanja i kontinuirano učenje su ključni za razvoj uspešnih web aplikacija. Ne oklevajte da posetite sledeće resurse ukoliko vam je potrebna dodatna pomoć:
Često postavljana pitanja (FAQ)
1. Koja je prednost korišćenja Ruby on Rails i React zajedno?
Ruby on Rails omogućava brz i efikasan framework za razvoj back-end-a, dok React omogućava razvoj bogatih i interaktivnih korisničkih interfejsa sa front-end strane.
2. Da li je potrebno da instaliram određene verzije Ruby on Rails i React?
Da, ovaj vodič podrazumeva korišćenje Ruby on Rails v7.0.4 i React 18.2.x. Druge verzije mogu zahtevati manje izmene u konfiguraciji.
3. Mogu li koristiti drugu bazu podataka sa ovom konfiguracijom?
Da, možete koristiti druge baze podataka kao što su PostgreSQL, MySQL ili MongoDB. Za detalje o podržanim bazama podataka, pogledajte Rails dokumentaciju.
4. Kako mogu dodati dodatne funkcije mojoj web aplikaciji?
Možete dodati dodatne funkcije instaliranjem dodatnih gemova ili npm paketa, ili proširivanjem postojećih modela i kontrolera u vašem Rails projektu.
5. Kako mogu postaviti ovu aplikaciju na produkcijski server?
Konsultujte