Подешавање 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 сервер?

Консултујте