Kuidas installida reageerimise rakendust Expressi taustaprogrammiga Herokusse juurutada?

Kasutasite rakenduse React loomisel tööriista loomine-reageerimine-rakenduse loomiseks ja nüüd soovite lisada taustaprogrammi, näiteks Expressi. Kuidas sa seda teed?

Selle saavutamiseks on mitu võimalust:

Neid hostige eraldi: juurutage rakendus Express ühes arvutis ja rakendus React teises arvutis.

Kasutage puhverserverit: mõlemat rakendust hostitakse koos, kuid neid teenindavad erinevad serverid.

Nende kooshoidmine: laske oma kasutajaliidesel React-failid ja taustprogrammi Express-failid eksisteerida ühes serveris ja lasta Expressil lisaks API-taotlustele ka React-faile teenindada.

Keskendume siin kolmandale võimalusele. Üheskoos loome lihtsa rakenduse, mis kasutab Expressi abil taustaprogrammi API loomiseks ja ka Reaxi failide teenindamiseks. Siis juurutame selle Heroku. Kui teil pole Heroku kontot, registreeruge tasuta! Lisaks installige Heroku cli tööriistad. (Teise võimalusena saate lihtsalt $ brew heroki installida)

Loome meie rakenduse!

Rakendus Backend Express

Esmalt loome oma juurkataloogi. Olen nimetanud minu krae-näidet, kuid võite vabalt olla loominguline. Seejärel lähtestage see NPM-i või lõngaga.

$ mkdir krae-näide
$ cd krae-näide
npm dollarit init

Installige paketid NPM-i või lõngaga ja tehke siis meie indeksfail.

Npm $ väljendan cors cowsay
$ touch index.js

Tahame luua oma Expressi serveri, mis teenindaks kahte marsruuti. Põhimarsruut, mis tagastab lehma „Tere maailm!“, Ja marsruut, mis aktsepteerib kohandatud sisestust. Kuna tegemist on lihtsa rakendusega, hoiame kõike ühes failis, ehkki praktikas on seda palju parem modulareerida.

const express = nõua ('express')
const cowsay = nõuda ('cowsay')
const cors = vaja ('cors')
// Loo server
const app = ekspress ()
// Teenige meie api marsruuti / lehma, mis tagastab kohandatud rääkiva tekstiga lehma
app.get ('/ api / lehm /: ütle', korsikad (), async (req, res, next) => {
  proovige {
    const text = req.params.say
    const moo = cowsay.say ({tekst})
    res.json ({moo})
  } saagi (viga) {
    järgmine (viga)
  }
})
// Teenige meie baasteed, mis tagastab Tere Maailma lehma
app.get ('/ api / lehm /', cors (), async (req, res, next) => {
  proovige {
    const moo = cowsay.say ({tekst: 'Tere maailm!'})
    res.json ({moo})
  } saagi (viga) {
    järgmine (viga)
  }
})
// Valige port ja käivitage server
const PORT = protsess.env.PORT || 5000
app.listen (PORT, () => {
  console.log (`Segamine pordis $ {PORT}`)
})

See on meie index.js jaoks. Lisageme meie paketile.json stardiskript ja katsetage meie ühte marsruuti.

"skriptid": {
    "test": "echo \" Viga: testi pole täpsustatud \ "&& exit 1",
    "start": "node index.js"
  },

Teise võimalusena võite muudatuste kuulamiseks kasutada nodemon index.js. Alustame meie rakendust:

npm dollari algus

Peaksite oma terminalis konsooli logi nägema.

Meie rakendus töötab ja töötab sadamas 5000!

Seejärel liikuge aadressile http: // localhost: 5000 / api / lehm. See on hiilgav, kuid see on meie jäljendav tekstilehm!

See ei näe tegelikult välja nagu lehm ...

Juurutamine Herokusse

Hea tava on kasutusele võtta alguses, veenduda, et kõik töötab, ja seejärel jätkata. Alustame git-hoidla, et saaksime selle Herokusse kasutada.

$ git init
$ echo node_modules> .gitignore
$ git add -A
$ git activ -m "Esimene pühendumine"

Eeldusel, et olete installinud Heroku CLI-tööriistad, saame seda nüüd juurutamiseks kasutada. Kui te pole seda veel teinud, logige sisse Heroku.

$ heroku login // sisestage oma mandaat
$ heroku loo krae-näide
See oli lihtne, kas pole?

Nüüd peame lihtsalt oma koodi Heroku juurde viima.

$ git push heroku meister
Alati on tore näha, et see on tehtud konsoolis.

Kui läheme aadressile https://crae-example.herokuapp.com/api/cow, peaksime nägema sama hiiglaslikku väljundit kui ülalpool. Meie lehm (rakendus) on nüüd Internetis reaalajas!

Rakendus Frontend React

Vajame esipinda, et näidata oma lehma, kas pole? Installigem tööriist loomise-reageerimise rakenduse loomine.

Npm $, mida ma loon-reageeri-rakenduses

Loome meie juurkataloogi, kus asub meie rakenduse Express, loome meie esirakenduse:

$ kliendi loomine-reageerimine

Kuna see on juba iseenesest rakendus, peame puhverserveri rakenduse kaudu puhverserveri API taotlusi puhverserverisse oma backend Expressi rakendusse puhverserverdama. Õnneks on seda hõlpsalt võimalik teha, lisades kliendi / package.json järgmised andmed.

"puhverserver": "http: // localhost: 5000"

See aga tähendab, kui kutsume kliendi poolelt aadressi / api / lehm, selle asemel, et minna aadressile http: // localhost: 3000 / api / lehm, puhverdab see meid aadressile http: // localhost: 5000 / api / lehm.

Järgmisena asendame src / App.js järgmisega:

impordi Reakt, {komponent} rakendusest 'reageerima'
import './App.css'
klassi rakendus laiendab komponenti {
  osariik = {
    lehm: '',
    tekst: ''
  }
komponentDidMount () {
    this.fetchCow ()
  }
fetchCow = async () => {
    const response = oota toomist (`/ api / lehm`)
    const basicCow = oota vastust.json ()
    const lehm = esialgne lehm.moo
    this.setState ({lehm})
  }
customCow = async evt => {
    evt.preventDefault ()
    const text = this.state.text
    const response = oodake toomist (`/ api / lehm / $ {text}`)
    const custom = oota vastust.json ()
    const lehm = kohandatud.moo
    this.setState ({lehm, tekst: ''})
  }
handleChange = evt => {
    this.setState ({[evt.target.name]: evt.target.value})
    console.log (this.state.text)
  }
renderdama () {
    tagasi (
      
        

tekstlehm. Moo

         {this.state.cow}                     kohandatud lehmade tekst:                                      
    )   } }
eksportige vaikerakendus

See näeb välja palju, aga tegelikult pole! Kutsume oma komponendisDDMMount lihtsalt fetchCow, mis annab meile meie "Tere maailma" lehma ja seab selle oleku, et saaksime seda renderdamisel kuvada. Samuti renderdame sisestusvormi, mis võimaldab kasutajatel sisestada lehma väljundi jaoks kohandatud stringi teksti.

Valikuline: värskendage src / App.css. Soovitan lisada vähemalt tühiku: pre, mis hoiab kõik valged ruumid selle asemel, et mitut valget tühikut tihendada üheks. See on lehmale väga oluline!

.App {
  kuva: flex;
  paindumissuund: kolonn;
  joonda üksused: keskel;
  veeris: 2em;
  valge ruum: eel
}
.Rakenduskood {
  veeris: 2em;
  veerise ülaosa: 0;
  polster: 0;
  teksti joondamine: vasak;
  kirjasuurus: 2em;
}
h3 {
  kirjasuurus: 2,5em;
  veeris: 1em;
  polster: 0;
  piir: 0
}
nuppu {
  kirjasuurus: 1em;
  fondiperekond: "Courier New", monospace;
  ääris: 2xx tahke # 000;
  polster: 10x25px;
}
nupp: hõljutage kursorit {
  taustavärv: rgb (255, 235, 59);
}
nupp: aktiivne {
  taustavärv: rgb (255, 244, 142);
}
vorm {
  kuva: flex;
  paindumissuund: kolonn;
  fondiperekond: "Courier New", monospace;
}
sisend {
  kirjasuurus: 1,5em;
  veerise ülaosa: 1em;
  veerise põhi: 1em;
  ääris: 1xx hall
}

Kuna see on lihtne rakendus, määratleme klasside määramise asemel css-atribuudid otse elementidel (pole soovitatav). Et testida, kas kõik töötab, peame käivitama mõlemad oma rakendused (juurkataloogist):

$ npm jooksu algus
$ cd klient
$ npm jooksu algus

Minge aadressile http: // localhost: 3000 ja peaksite seda nägema:

See töötab! Tere, Maailm!

Viimane asi: me peame värskendama oma juurkataloogi index.js, et React-faile pärast tootmist uuesti üles näidata:

const tee = nõua ('tee')
// Esitage staatilisi faile rakendusest React
app.use (express.static (tee.liitu (__ dirname, 'klient / ehita')))
// Kõik, mis ei ühti ülaltooduga, saatke tagasi index.html
app.get ('*', (req, res) => {
  res.sendFile (path.join (__ dirname + '/client/build/index.html'))
})

Viimane õhkutõus

Enne kui saame uuesti kasutusele võtta, peame kõigepealt konfigureerima Heroku, et see ehitaks kogu rea ülespoole rakenduse esikülje React. Selle põhjuseks on asjaolu, et me täpsustasime ülalpool kliendi / buildi staatiliste failide teenindamist. Seadistagem viimati meie juurkataloogi package.js:

"skriptid": {
    "test": "echo \" Viga: testi pole täpsustatud \ "&& exit 1",
    "start": "node index.js",
    "heroku-postbuild": "cd klient ja & npm install && npm run build"
  },

Lisame skripti heroku-postbuild, nii et see teab sisseehitatud ehitamismeetodi käitamist. Loo-reageeri-rakendus annab meile pärast seda, kui Heroku on teinud oma ehituse. Nüüd saame kasutusele võtta!

$ git add -A
$ git activ -m 'Juurutage start!'
$ git push heroku meister

Hunnik asju juhtub terminalis. kuid lõpus peaksite nägema sama URL-i nagu varem. Minge oma Heroku URL-i ja vaadake, kuidas teie rakendus töötab! Minuga saab mängida aadressil https://crae-example.herokuapp.com/. Palju õnne! Teie tootmises on rakendus React ja Express!

Tutvuge koodiga siin Githubis. Head kodeerimist! :)