Sådan distribueres en React + Node-app til Heroku på 3 minutter uden kommandolinjen

I denne vejledning laver vi en grundlæggende React + Node-app implementeret til Heroku.

Der er mange tutorials, der kun gør dette ved hjælp af kommandolinjen, så for at ændre tingene lidt op, vil jeg gøre det helt uden kommandolinjen.

For ting som at generere React og Express apps har vi intet andet valg end at bruge kommandolinjen. For alt andet bruger vi en GUI.

Jeg antager også, at du har en Github- og Heroku-konto. De er begge gratis, så du skal ikke bekymre dig om at tilmelde dig.

prøve projekt:

//github.com/iqbal125/react-express-sample

Reager og ekspressopsætning

Lad os først starte med at oprette to mapper med navnet Server og Client.

Klientmappen indeholder indholdet af create-react-appkommandoen, og Serveren indeholder indholdet af expresskommandoen. Dette bibliotek opretter bare en simpel Express-app til os automatisk, svarende til create-react-app. Det skal installeres globalt, hvilket du kan gøre med kommandoen:

npm install -g express-generator

Herefter skal du blot køre disse kommandoer i hvert af de respektive mapper for at installere startprojekterne:

npx create-react-app app1i Client biblioteket

expressi Server biblioteket

Skift til app1- biblioteket genereret af create-react-appog kør:

npm run build

Dette genererer en produktionsopbygget version af projektet, der er optimeret til en produktionsinstallation, hvor ting som fejlhåndteringskoden og det hvide område er fjernet.  

Bemærk: I en udviklingsbygning bruger du en proxy til // localhost: 5000 til at kommunikere fra din React-app til din Express-server, men her er React-appen og Express-serveren kun et projekt. Express-serveren serverer React-filerne.

Dernæst skal du klippe og indsætte hele buildmappen i servermappen . Din projektstruktur skal se sådan ud:

Vi kan nu tilføje noget kode for at fortælle vores Express-server, der betjener vores React-projekt:

.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... 

Den første linje kode tjener alle vore statiske filer fra bygge biblioteket.

Det andet stykke kode er at holde vores klientsides routing funktionel. Denne kode betjener i det væsentlige index.htmlfilen på ukendte ruter. Ellers skulle vi omskrive hele vores routing for at arbejde med denne Express-serveropsætning.

For at teste din app skal du bare køre npm starti serverkataloget og gå til // localhost 3000 i browseren. Så skal du se din kørende React-app.

Nu er vi klar til at uploade dette projekt til GitHub.

GitHub

I stedet for at bruge kommandolinjen til at uploade til GitHub, gør vi dette med GUI. Gå først til GitHub-hjemmesiden, og opret et nyt lager. Navngiv det, hvad du vil, men sørg for, at Initialiser dette lager med en README- indstilling markeret:

Upload derefter alle projektfilerne uden node_modules- biblioteket.

Klik på commit og vi er færdige. Dine uploadede projektfiler vises på GitHub sådan:

Nu kan vi gå videre til opsætning af Heroku.

Heroku

Gå til Heroku dashboardet, opret en ny app, og navngiv den, hvad du vil.

Gå derefter til fanen Implementering og vælg GitHub under Implementeringsmetode:

Hvis du endnu ikke har knyttet din GitHub-konto til din Heroku-konto, bliver du bedt om gennem GitHub Auth-strømmen.

Efter dette skal du søge efter dit projekt på GitHub og oprette forbindelse til det:

Endelig kan vi bare implementere vores app ved at klikke på knappen Implementér gren:

Heroku installerer automatisk alle Node-moduler til dig. Du kan se dit projekt ved at klikke på knappen Vis.

Og det er det, vi er færdige! Tak for læsningen.

Opret forbindelse til mig på Twitter for flere opdateringer om fremtidige tutorials: //twitter.com/iqbal125sf