Sut i Ddechrau Prosiect Rails gyda Esbuild a TailwindCSS

Mae creu gwefan gyda Ruby on Rails yn broses gyffrous, ac mae ychwanegu Esbuild a TailwindCSS yn gwneud y broses hon hyd yn oed yn haws a mwy effeithlon. Yn yr erthygl hon, byddwn yn mynd trwy'r camau i sefydlu prosiect Rails gyda'r ddau dechnoleg hyn. Byddwn yn edrych ar sut i osod, cychwyn a chynnal y prosiect, gan sicrhau bod gennych chi'r holl wybodaeth sydd ei hangen arnoch i ddechrau.

Cam 1: Creu Prosiect Newydd Rails

Y cam cyntaf yw creu prosiect newydd Rails. Os nad ydych wedi gosod Rails ar eich system, gallwch ei wneud trwy ddefnyddio'r gorchymyn canlynol:

gem install rails

Unwaith y bydd Rails wedi'i osod, gallwch greu prosiect newydd trwy ddefnyddio'r gorchymyn canlynol:

rails new my_project --skip-javascript

Mae'r flag --skip-javascript yn sicrhau nad yw Rails yn creu ffeiliau JavaScript yn awtomatig, gan y byddwn yn defnyddio Esbuild yn lle hynny.

Cam 2: Gosod Esbuild

Y cam nesaf yw gosod Esbuild. Gallwch ei wneud trwy ychwanegu'r gem i'ch Gemfile. Agorwch y ffeil Gemfile a chynnwys y llinell hon:

gem "esbuild", "~> 0.14.0"

Ar ôl hynny, rhedeg y gorchymyn canlynol i osod y gem:

bundle install

Yna, gallwch ddefnyddio'r gorchymyn canlynol i greu ffeiliau Esbuild:

rails esbuild:install

Bydd hyn yn creu ffeiliau a ffolderi angenrheidiol ar gyfer Esbuild yn eich prosiect.

Cam 3: Gosod TailwindCSS

Nawr, gadewch i ni ychwanegu TailwindCSS i'r prosiect. Mae TailwindCSS yn fframwaith CSS sy'n caniatáu i chi greu dyluniadau hyblyg a modern. I'w osod, bydd angen i chi ychwanegu'r gem i'ch Gemfile hefyd:

gem "tailwindcss-rails"

Ar ôl hynny, rhedeg y gorchymyn canlynol i osod TailwindCSS:

bundle install

Yna, gallwch ddefnyddio'r gorchymyn canlynol i osod TailwindCSS:

rails tailwindcss:install

Bydd hyn yn creu ffeiliau a ffolderi angenrheidiol ar gyfer TailwindCSS yn eich prosiect.

Cam 4: Cydosod Esbuild a TailwindCSS

Ar ôl i chi osod Esbuild a TailwindCSS, mae angen i chi eu cydosod. Agorwch y ffeil app/javascript/application.js a chynnwys y llinellau canlynol:

import "./stylesheets/application.tailwind.css"

Yna, agorwch y ffeil app/assets/stylesheets/application.tailwind.css a chynnwys y llinellau canlynol:

@tailwind base;
@tailwind components;
@tailwind utilities;

Mae hyn yn sicrhau bod TailwindCSS yn cael ei ddefnyddio yn eich prosiect.

Cam 5: Cychwyn y Gwefan

Mae popeth wedi'i sefydlu, felly nawr gallwch gychwyn y gwefan. Defnyddiwch y gorchymyn canlynol i gychwyn y gweinydd Rails:

rails server

Yna, gallwch fynd i http://localhost:3000 yn eich porwr i weld eich gwefan. Os ydych chi'n gweld y neges "Ydych chi'n barod i fynd?", mae popeth wedi'i sefydlu'n iawn!

Cam 6: Defnyddio TailwindCSS yn eich Prosiect

Mae TailwindCSS yn cynnig llawer o ddulliau a chymhwyso i'ch helpu i greu dyluniadau hyfryd. Dyma rai enghreifftiau o sut i ddefnyddio TailwindCSS yn eich prosiect:

Creu Botwm

Gallwch greu botwm syml gyda TailwindCSS fel hyn:

Creu Cynnwys

Gallwch greu cynnwys gyda TailwindCSS fel hyn:


  
    Teitl
    Dyma ddisgrifiad o'r cynnwys.

Cam 7: Gweithredu a Chynnal

Wrth i chi ddatblygu eich prosiect, bydd angen i chi weithredu a chynnal y ffeiliau JavaScript a CSS. Gallwch wneud hyn trwy ddefnyddio'r gorchymyn canlynol:

rails assets:precompile

Mae hyn yn sicrhau bod eich ffeiliau wedi'u gweithredu a'u paratoi ar gyfer cynhyrchu.

Casgliad

Mae sefydlu prosiect Rails gyda Esbuild a TailwindCSS yn broses syml a chyffrous. Mae'r ddau dechnoleg yn cynnig llawer o fanteision, gan gynnwys cyflymder a hyblygrwydd. Gyda'r camau a'r enghreifftiau a drafodwyd yn yr erthygl hon, byddwch yn gallu dechrau ar eich prosiect heb unrhyw broblemau. Peidiwch ag anghofio archwilio'r ddogfennaeth ar gyfer Esbuild a TailwindCSS i ddysgu mwy am eu nodweddion a'u defnydd.

Da iawn! Mae gennych chi nawr y wybodaeth sydd ei hangen arnoch i ddechrau gyda Rails, Esbuild, a TailwindCSS. Mwynhewch ddatblygu!