Sådan konfigureres kontinuerlig integration og distribution til din React-app

Opsætning af et React-udviklingsmiljø kan være forvirrende og skræmmende for nykommere. Du har muligvis også hørt udviklere tale om, hvordan forskellige pakker som babel, Webpack og så videre også er nødvendige (men dette kan diskuteres).

Når React bliver mere populært, er der et par kedelplade-projekter, der sigter mod at hjælpe udviklere med at skabe et passende React-udviklingsmiljø. create-react-app er en af ​​de mest populære starter skabeloner.

Det sigter mod at give udviklere mulighed for at oprette en reagerende app med konfiguration af nul build.

Udviklere behøver ikke længere at bekymre sig om, hvordan webpack skal konfigureres, hvad der skal konfigureres med babel til brug af es6, eller hvilken linter og testpakke, de skal bruge. Alt fungerer bare ud af kassen. Ja, det er så let!

For udviklere, der har brug for at administrere den underliggende konfiguration, har den et kørseludspring på npm, der giver dem mulighed for at rode med konfigurationen og gøre, hvad de ikke kunne gøre tidligere. Den eneste ting at bemærke er, at når udkastet er kørt, kan det ikke vendes.

Udviklingsstabel til reaktion

Jeg skrev følgende vejledning for at hjælpe udviklere med at opbygge en kontinuerlig integration og kontinuerlig distribution til deres React-app. Vi bruger CircleCI, CodeClimate og Heroku. Hvis du ikke har en konto på nogen af ​​ovenstående tjenester, skal du gå over for at tilmelde dig - de er GRATIS!

I slutningen har vi en React-app i en Github Repo, der automatisk distribuerer eventuelle ændringer på mastergrenen til Heroku, når alle test er gennemført. Her er et eksempel på det implementerede React-websted.

Lad os begynde!

Det første trin er at følge create-react-app-guiden for at oprette en ny React-app. Gør dette:

$ npm installere -g create-react-app
$ create-react-app min-react-app
$ cd min-reager-app /
Start af $ npm

Derefter skal browseren automatisk åbne en side på http: // localhost: 3000 /. Hvis du ser en Welcome to React-side køre, er alt godt.

CircleCI-opsætning

Dernæst skal vi tilføje en lille konfiguration til opsætningen CircleCI til vores projekt. Opret en .circleci-mappe og en config.yml i det bibliotek, og tilføj følgende:

version: 2
job:
  bygge:
    havnearbejder:
      - billede: circleci / node: 8
    trin:
      - kassen
      - gendannelsescache: # specielt trin til at gendanne afhængighedscachen
          nøgle: afhængighedscache - {{checksum "package.json"}}
      - løb:
          navn: Opsætningsafhængigheder
          kommando: npm installation
      - løb:
          navn: Opsætningskode Klimatest-reporter
          kommando: |
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64> ./cc-test-reporter
            chmod + x ./cc-test-reporter
      - save_cache: # specielt trin til at gemme afhængighedscachen
          nøgle: afhængighedscache - {{checksum "package.json"}}
          stier:
            - ./node_moduler
      - kør: # kør test
          navn: Kør test og dækning
          kommando: |
            ./cc-test-reporter før-build
            npm test - - dækning
            ./cc-test-reporter after-build - eksit-kode $?

Denne opsætning er til CircleCI 2.0. De solnedgang cirkel 1.0 den 31. august 2018.

Bygningstrinnet opsætter en node: 8 med et Docker-billede. Det kræver v6 eller højere at arbejde.

I trin tjekker vi først projektet, gendanner fra cachen, hvis nogen, og installerer derefter afhængigheder. Vi installerer også cc-test-reporter, et værktøj leveret af CodeClimate til at sende en dækningsrapport.

Vi kører derefter testen mellem kommandoer før bygning og efterbygning i henhold til CodeClimate-dokumenter. Dette giver CodeClimate besked for den verserende rapport, og når den er færdig, sender den enten rapporten eller en fejlstatus.

Setup Git

Opret en repo i Github, og gør følgende:

$ git init
$ git-fjernbetjening tilføj oprindelse [email protected]: brugernavn / new-repo-here
$ git tilføjelse.
$ git commit -m “first commit”
$ git push -u oprindelsesmaster

Dette skubber det projekt, vi har oprettet, ind i GitHub.

Byg og test projektet

Gå over til CircleCI, log ind og opbyg det nyoprettede projekt. I slutningen af ​​bygningen skal du se en fiasko i kørselstesten og dækningen.

OpsætningskodeClimate

Ovenstående fejl skyldes, at vi endnu ikke har tilladelse til at sende en rapport til CodeClimate. Så gå nu over til CodeClimate, log ind og opbyg det oprettede GitHub-projekt. Vi skulle få dette i slutningen af ​​analysen:

kodeklimatanalyse

For at løse CircleCI-problemet og bruge feedback-dækning af test, har vi brug for Test Reporter ID. Dette kan hentes under fanen Indstillinger> Testdækning. Kopier testrapporter-ID'et uden at dele det med nogen.

I CircleCI skal du navigere til Projekt> Indstillinger> Miljøvariabel og tilføje CC_TEST_REPORTER_ID med det kopierede Test Reporter ID.

Heroku Deployment Setup

For at implementere React på Heroku, bruger vi en buildpack. Gør følgende:

$ heroku oprette REPLACE_APP_NAME_HERE - buildpack https://github.com/mars/create-react-app-buildpack.git
$ git push heroku master
$ heroku åben

Vi skubbede den seneste mastergren til heroku med git push heroku master. En webside vil være åben i slutningen med siden Velkomst til reaktion.

Derefter bliver vi nødt til at navigere til den nyligt oprettede app i Heroku Dashboard for at opsætte automatiseret distribution. Gør følgende på instrumentbrættet:

  • Gå til fanen Deploy og Opret forbindelse til den korrekte GitHub-repo.
  • Aktivér automatisk udrulning, og kontroller, at ventetid, for at CI går, før installationen.
aktiver automatisk distribution

Vi er færdige!

Med et par trin har vi en fuldautomatisk kontinuerlig integrations- og implementeringssuite klar. Nu med hver engagement, der skubbes til GitHub, sender den en trigger til CircleCI og CodeClimate. Når testen er bestået, hvis den var på mastergrenen, vil den også blive distribueret automatisk til Heroku.

Se eksempler repo her og det implementerede websted her!

Konklusion

Dette er en opdatering af mit tidligere indlæg for næsten et år siden. Brugen af ​​CircleCI er blevet opdateret til 2.0, og vi bruger også den opdaterede cc-test-reporter af CodeClimate. Hvis du er interesseret i migreringen, kan du se på anmodningen om træk.

Tak for at have læst! Hvis du kan lide det, skal du trykke på

Jeg nyder at læse og skrive om tech og produkter, der især er relateret til at øge produktiviteten hos udviklere. Du kan sige hej til mig på min Twitter eller min blog.