Tartalomjegyzék
Ruby on Rails v7 projekt beállítása React frontenddel Ubuntu 20.04 rendszeren
A Ruby on Rails (RoR) egy népszerű webfejlesztési keretrendszer, amely a Model-View-Controller (MVC) architektúrát követi, és a Convention over Configuration (CoC) elvet alkalmazza. A RoR v7 a keretrendszer legújabb verziója, amely számos új funkciót és fejlesztést kínál.
Ebben a cikkben bemutatjuk, hogyan állíthat be egy Ruby on Rails v7 projektet React frontenddel Ubuntu 20.04 rendszeren lépésről lépésre.
Előkészületek
Mielőtt elkezdené a RoR v7 projekt beállítását, győződjön meg arról, hogy a következő előfeltételek teljesülnek:
– Ubuntu 20.04 rendszer
– Ruby 2.7 vagy újabb
– Node.js 16 vagy újabb
– npm 6 vagy újabb
– PostgreSQL adatbázis
RoR v7 projekt létrehozása
1. Hozzon létre egy új Rails projektet: Nyisson meg egy terminált, navigáljon a kívánt könyvtárba, majd futtassa a következő parancsot:
rails new my_app -d postgresql
2. Telepítse a React frontend függőségeit: Navigáljon az újonnan létrehozott projekt könyvtárába, és futtassa a következő parancsokat:
cd my_app
yarn add react react-dom
create-react-app client
3. Módosítsa az application.js fájlt: Adja hozzá a következő kódot az application.js fájlhoz:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
4. Módosítsa az index.html.erb fájlt: Módosítsa az index.html.erb fájlt a következőképpen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
React alkalmazás beállítása
1. Navigáljon a React alkalmazás könyvtárába: Navigáljon a React alkalmazás könyvtárába, amely az client nevű könyvtárban található.
2. Módosítsa az package.json fájlt: Módosítsa a package.json fájlt a következőképpen:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
3. Futassa a React alkalmazást: Futassa a következő parancsot a React alkalmazás elindításához:
yarn start
RoR és React alkalmazások összekapcsolása
1. Telepítsen egy proxy-t: Telepítsen egy proxy-t a RoR és a React alkalmazások összekapcsolásához. Ebben a példában a webpacker-dev-server proxy-t fogjuk használni. Telepítse a következő paranccsal:
gem install webpacker-dev-server
2. Adja hozzá a proxy-t a development.rb fájlhoz: Adja hozzá a következő sorokat a config/environments/development.rb fájlhoz:
config.action_dispatch.default_headers = {
'Access-Control-Allow-Origin' => 'http://localhost:3000',
'Access-Control-Allow-Headers' => 'X-Requested-With, X-Prototype-Version, Token, Content-Type, Accept, Origin, Authorization'
}
3. Futassa a RoR alkalmazást: Futassa a következő parancsot a RoR alkalmazás elindításához:
rails s
4. Futassa a webpacker-dev-servert: Futassa a következő parancsot a webpacker-dev-server elindításához:
webpacker-dev-server
5. Ellenőrizze a projektet: Nyissa meg a böngészőt, és navigáljon a http://localhost:3000 címre. Ha mindent helyesen csinált, megjelenik a React alkalmazás.
Következtetés
Ebben a cikkben végigvezettük a Ruby on Rails v7 projekt beállításának lépésein React frontenddel Ubuntu 20.04 rendszeren. Ez a beállítás lehetővé teszi a RoR és a React előnyeinek kihasználását egyetlen alkalmazásban.
A RoR v7 számos új funkciót és fejlesztést kínál, amelyek javítják a fejlesztői élményt és a webhelyek teljesítményét. Az React pedig egy népszerű JavaScript könyvtár, amely lehetővé teszi a modern, interaktív felhasználói felületek létrehozását.
Ezzel a beállítással erőteljes és rugalmas webes alkalmazásokat hozhat létre, amelyek megfelelnek a mai felhasználók elvárásainak.
Gyakran Ismételt Kérdések (GYIK)
1. Miért kell proxy-t használnom a RoR és a React alkalmazások összekapcsolásához?
A proxy lehetővé teszi a React alkalmazás számára, hogy a RoR alkalmazásból származó adatokat kérjen, és ezeket az adatokat biztonságosan jelenítse meg a felhasználónak.
2. Milyen más proxy-opciók állnak rendelkezésre?
A webpacker-dev-server mellett a webpack-dev-server és a cors gem is használható proxy-ként.
3. Hogyan telepíthetem a RoR v7-et Windows rendszerre?
A RoR v7 telepítéséhez Windows rendszeren használhatja a RubyInstaller-t vagy a WSL (Windows Subsystem for Linux).
4. Hogyan telepíthetem a Node.js-t Linux rendszerre?
A Node.js telepítéséhez Linux rendszeren használhatja a csomagkezelőt vagy letöltheti a Node.js webhelyéről.
5. Hogyan hozhatok létre React alkalmazást?
React alkalmazást hozhat létre a create-react-app paranccsal vagy kézzel.
6. Miért használjak React-et a frontendhez?
A React egy népszerű JavaScript könyvtár, amely lehetővé teszi a modern, interaktív felhasználói felületek létrehozását.
7. Mi a különbség az MVC és az MVVM között?
Az MVC (Model-View-Controller) és az MVVM (Model-View-ViewModel) két népszerű szoftverarchitektúra. Az MVC az adatokat, a nézeteket és a vezérlőket különálló rétegekre osztja, míg az MVVM a modellt és a nézetet egyetlen objektumba köti.
8. Hogyan javíthatom a webhelyem teljesítményét?
A webhely teljesítményének javításához használhat olyan technikákat, mint a gyorsítótárazás, a tömörítés és a kódoptimalizálás.