Подешавање Ruby on Rails v7 пројекта са React Frontend-ом на Ubuntu 20.04

Подешавање Ruby on Rails v7 пројекта са React Frontend-ом на Ubuntu 20.04

Увод

Данас је неопходно да модерне веб апликације имају одзивни, интерактивни и брзо учитавајући кориснички интерфејс. Комбиновање Ruby on Rails (RoR), оквира заснованог на MVC за развој веб апликација са повратним крајем, и React, једноставне JavaScript библиотеке за изградњу корисничких интерфејса са предњим крајем, пружа идеално решење за изградњу робусних и ефикасних веб апликација.

У овом детаљном водичу ћемо вас провести кроз процес подешавања Ruby on Rails v7 пројекта са React Frontend-ом на Ubuntu 20.04 серверу. Корак по корак ћемо обухватити све потребне кораке, од инсталирања неопходних зависности до покретања ваше апликације.

Инсталирање неопходних зависности

Ruby и Rails

1. Ажурирајте свој систем помоћу следеће команде:

sh
sudo apt update

2. Инсталирајте Ruby-2.7.6 и Rails-7.0.4 помоћу следећих команди:

sh
sudo apt-get install ruby-full
sudo gem install rails -v 7.0.4

Node.js и Yarn

1. Додајте Node.js PPA и ажурирајте листу пакета:

sh
curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt update

2. Инсталирајте Node.js и Yarn:

sh
sudo apt install nodejs
sudo npm install -g yarn

React

1. Направите нови директоријум за свој React Frontend:

sh
mkdir frontend
cd frontend

2. Иницијализујте нови npm пројекат:

sh
yarn init -y

3. Инсталирајте React и потребне зависности:

  Како уклонити локацију са Инстаграма и задржати приватно место где се налазите

sh
yarn add react react-dom

Креирање Ruby on Rails пројекта

1. Вратите се у главни директоријум и креирајте нови Rails пројекат:

sh
cd ..
rails new backend --api

2. Уђите у директоријум пројекта:

sh
cd backend

3. Генеришите модел, контролер и путеве за ресурс „артикал“:

sh
rails generate resource article

4. Покрените миграције да бисте креирали табелу у бази података:

sh
rails db:migrate

Конфигурисање React Frontend-а

1. Вратите се у директоријум React Frontend-а:

sh
cd ../frontend

2. Креирајте нови регистарску компоненту:

sh
touch src/App.js

3. Отворите App.js и додајте следећи код:

javascript
import React, { useState } 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. Креирајте нови index.html фајл за покретање React апликације:

sh
touch public/index.html

5. Отворите index.html и додајте следећи код:


<!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. Креирајте нови main.js фајл за компилацију React апликације:

sh
touch public/main.js

7. Отворите main.js и додајте следећи код:

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

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

Повезивање Ruby on Rails и React Frontend-а

1. Инсталирајте webpacker гем у Ruby on Rails пројекат:

sh
cd ../backend
rails webpacker:install

2. Ажурирајте webpack конфигурацију у config/webpack/environment.js:

javascript
const environment = {
development: {
...
devtool: 'eval'
},
...
};

3. Покрените webpacker да бисте компилирали React апликацију:

sh
rails webpacker:compile

4. Покрените Rails сервер:

sh
rails s

5. Посетите http://localhost:3000 у претраживачу да бисте видели своју React апликацију која се приказује.

Закључак

Успешно сте подесили Ruby on Rails v7 пројекат са React Frontend-ом на Ubuntu 20.04 серверу. Ову конфигурацију можете користити као основу за изградњу сопствених веб апликација које ће пружити одличан кориснички доживљај. Имајте на уму да је ово само почетна тачка и да ћете можда морати да прилагодите конфигурацију у складу са вашим специфичним захтевима.

Тимски рад, отворено делење знања и стално учење су кључни за изградњу успешних веб апликација. Не оклевајте да посетите следеће ресурсе ако вам је потребна додатна помоћ:

* Ruby on Rails
* React
* Webpacker

Често постављана питања (FAQs)

1. Која је предност коришћења Ruby on Rails и React заједно?

Ruby on Rails пружа брз и лаган оквир за изградњу повратних крајева, док React омогућава изградњу богатих и интерактивних корисничких интерфејса са предњим крајем.

2. Да ли је потребно да инсталирам посебне верзије Ruby on Rails и React?

Да, овај водич претпоставља да користите Ruby on Rails v7.0.4 и React 18.2.х. Друге верзије можда захтевају незнатне измене у конфигурацији.

3. Могу ли користити другачију базу података са овом конфигурацијом?

Да, можете интегрисати ову конфигурацију са другим базама података као што су PostgreSQL, MySQL или MongoDB. Проверите Rails документацију за детаље о подржаваним базама података.

4. Како могу додати додатне функције мојој веб апликацији?

Можете додати dodatne funkcije instaliranjem додатnih гемова ili npm пакета, ili proširenjem postojećih modela i kontrolera u vašem Rails projеktu.

5. Kako mogu да поставиm ову апликацију na produkcijski сервер?

Консултујте