328. EPMO Open Source Coordination Office Redaction File Detail Report

Produced by Araxis Merge on 9/25/2018 2:13:30 PM Central Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

328.1 Files compared

# Location File Last Modified
1 build 3.zip\build 3\Patch 130\webapp\React README.md Mon May 7 17:32:38 2018 UTC
2 build 3.zip\build 3\Patch 130\webapp\React README.md Wed Sep 12 18:27:15 2018 UTC

328.2 Comparison summary

Description Between
Files 1 and 2
Text Blocks Lines
Unchanged 2 4456
Changed 1 2
Inserted 0 0
Removed 0 0

328.3 Comparison options

Whitespace
Character case Differences in character case are significant
Line endings Differences in line endings (CR and LF characters) are ignored
CR/LF characters Not shown in the comparison detail

328.4 Active regular expressions

No regular expressions were active.

328.5 Comparison detail

  1   This proje ct was boo tstrapped  with [Crea te React A pp](https: //github.c om/faceboo kincubator /create-re act-app).
  2  
  3   Below you  will find  some infor mation on  how to per form commo n tasks.<b r>
  4   You can fi nd the mos t recent v ersion of  this guide  [here](ht tps://gith ub.com/fac ebookincub ator/creat e-react-ap p/blob/mas ter/packag es/react-s cripts/tem plate/READ ME.md).
  5  
  6   ## Table o f Contents
  7  
  8   - [Updatin g to New R eleases](# updating-t o-new-rele ases)
  9   - [Sending  Feedback] (#sending- feedback)
  10   - [Folder  Structure] (#folder-s tructure)
  11   - [Availab le Scripts ](#availab le-scripts )
  12     - [npm s tart](#npm -start)
  13     - [npm t est](#npm- test)
  14     - [npm r un build]( #npm-run-b uild)
  15     - [npm r un eject]( #npm-run-e ject)
  16   - [Support ed Languag e Features  and Polyf ills](#sup ported-lan guage-feat ures-and-p olyfills)
  17   - [Syntax  Highlighti ng in the  Editor](#s yntax-high lighting-i n-the-edit or)
  18   - [Display ing Lint O utput in t he Editor] (#displayi ng-lint-ou tput-in-th e-editor)
  19   - [Debuggi ng in the  Editor](#d ebugging-i n-the-edit or)
  20   - [Formatt ing Code A utomatical ly](#forma tting-code -automatic ally)
  21   - [Changin g the Page  `<title>` ](#changin g-the-page -title)
  22   - [Install ing a Depe ndency](#i nstalling- a-dependen cy)
  23   - [Importi ng a Compo nent](#imp orting-a-c omponent)
  24   - [Code Sp litting](# code-split ting)
  25   - [Adding  a Styleshe et](#addin g-a-styles heet)
  26   - [Post-Pr ocessing C SS](#post- processing -css)
  27   - [Adding  a CSS Prep rocessor ( Sass, Less  etc.)](#a dding-a-cs s-preproce ssor-sass- less-etc)
  28   - [Adding  Images, Fo nts, and F iles](#add ing-images -fonts-and -files)
  29   - [Using t he `public ` Folder]( #using-the -public-fo lder)
  30     - [Chang ing the HT ML](#chang ing-the-ht ml)
  31     - [Addin g Assets O utside of  the Module  System](# adding-ass ets-outsid e-of-the-m odule-syst em)
  32     - [When  to Use the  `public`  Folder](#w hen-to-use -the-publi c-folder)
  33   - [Using G lobal Vari ables](#us ing-global -variables )
  34   - [Adding  Bootstrap] (#adding-b ootstrap)
  35     - [Using  a Custom  Theme](#us ing-a-cust om-theme)
  36   - [Adding  Flow](#add ing-flow)
  37   - [Adding  Custom Env ironment V ariables]( #adding-cu stom-envir onment-var iables)
  38     - [Refer encing Env ironment V ariables i n the HTML ](#referen cing-envir onment-var iables-in- the-html)
  39     - [Addin g Temporar y Environm ent Variab les In You r Shell](# adding-tem porary-env ironment-v ariables-i n-your-she ll)
  40     - [Addin g Developm ent Enviro nment Vari ables In ` .env`](#ad ding-devel opment-env ironment-v ariables-i n-env)
  41   - [Can I U se Decorat ors?](#can -i-use-dec orators)
  42   - [Integra ting with  an API Bac kend](#int egrating-w ith-an-api -backend)
  43     - [Node] (#node)
  44     - [Ruby  on Rails]( #ruby-on-r ails)
  45   - [Proxyin g API Requ ests in De velopment] (#proxying -api-reque sts-in-dev elopment)
  46     - ["Inva lid Host H eader" Err ors After  Configurin g Proxy](# invalid-ho st-header- errors-aft er-configu ring-proxy )
  47     - [Confi guring the  Proxy Man ually](#co nfiguring- the-proxy- manually)
  48     - [Confi guring a W ebSocket P roxy](#con figuring-a -websocket -proxy)
  49   - [Using H TTPS in De velopment] (#using-ht tps-in-dev elopment)
  50   - [Generat ing Dynami c `<meta>`  Tags on t he Server] (#generati ng-dynamic -meta-tags -on-the-se rver)
  51   - [Pre-Ren dering int o Static H TML Files] (#pre-rend ering-into -static-ht ml-files)
  52   - [Injecti ng Data fr om the Ser ver into t he Page](# injecting- data-from- the-server -into-the- page)
  53   - [Running  Tests](#r unning-tes ts)
  54     - [Filen ame Conven tions](#fi lename-con ventions)
  55     - [Comma nd Line In terface](# command-li ne-interfa ce)
  56     - [Versi on Control  Integrati on](#versi on-control -integrati on)
  57     - [Writi ng Tests]( #writing-t ests)
  58     - [Testi ng Compone nts](#test ing-compon ents)
  59     - [Using  Third Par ty Asserti on Librari es](#using -third-par ty-asserti on-librari es)
  60     - [Initi alizing Te st Environ ment](#ini tializing- test-envir onment)
  61     - [Focus ing and Ex cluding Te sts](#focu sing-and-e xcluding-t ests)
  62     - [Cover age Report ing](#cove rage-repor ting)
  63     - [Conti nuous Inte gration](# continuous -integrati on)
  64     - [Disab ling jsdom ](#disabli ng-jsdom)
  65     - [Snaps hot Testin g](#snapsh ot-testing )
  66     - [Edito r Integrat ion](#edit or-integra tion)
  67   - [Develop ing Compon ents in Is olation](# developing -component s-in-isola tion)
  68     - [Getti ng Started  with Stor ybook](#ge tting-star ted-with-s torybook)
  69     - [Getti ng Started  with Styl eguidist]( #getting-s tarted-wit h-stylegui dist)
  70   - [Making  a Progress ive Web Ap p](#making -a-progres sive-web-a pp)
  71     - [Optin g Out of C aching](#o pting-out- of-caching )
  72     - [Offli ne-First C onsiderati ons](#offl ine-first- considerat ions)
  73     - [Progr essive Web  App Metad ata](#prog ressive-we b-app-meta data)
  74   - [Analyzi ng the Bun dle Size]( #analyzing -the-bundl e-size)
  75   - [Deploym ent](#depl oyment)
  76     - [Stati c Server]( #static-se rver)
  77     - [Other  Solutions ](#other-s olutions)
  78     - [Servi ng Apps wi th Client- Side Routi ng](#servi ng-apps-wi th-client- side-routi ng)
  79     - [Build ing for Re lative Pat hs](#build ing-for-re lative-pat hs)
  80     - [Azure ](#azure)
  81     - [Fireb ase](#fire base)
  82     - [GitHu b Pages](# github-pag es)
  83     - [Herok u](#heroku )
  84     - [Netli fy](#netli fy)
  85     - [Now]( #now)
  86     - [S3 an d CloudFro nt](#s3-an d-cloudfro nt)
  87     - [Surge ](#surge)
  88   - [Advance d Configur ation](#ad vanced-con figuration )
  89   - [Trouble shooting]( #troublesh ooting)
  90     - [`npm  start` doe sn’t det ect change s](#npm-st art-doesnt -detect-ch anges)
  91     - [`npm  test` hang s on macOS  Sierra](# npm-test-h angs-on-ma cos-sierra )
  92     - [`npm  run build`  exits too  early](#n pm-run-bui ld-exits-t oo-early)
  93     - [`npm  run build`  fails on  Heroku](#n pm-run-bui ld-fails-o n-heroku)
  94     - [`npm  run build`  fails to  minify](#n pm-run-bui ld-fails-t o-minify)
  95     - [Momen t.js local es are mis sing](#mom entjs-loca les-are-mi ssing)
  96   - [Somethi ng Missing ?](#someth ing-missin g)
  97  
  98   ## Updatin g to New R eleases
  99  
  100   Create Rea ct App is  divided in to two pac kages:
  101  
  102   * `create- react-app`  is a glob al command -line util ity that y ou use to  create new  projects.
  103   * `react-s cripts` is  a develop ment depen dency in t he generat ed project s (includi ng this on e).
  104  
  105   You almost  never nee d to updat e `create- react-app`  itself: i t delegate s all the  setup to ` react-scri pts`.
  106  
  107   When you r un `create -react-app `, it alwa ys creates  the proje ct with th e latest v ersion of  `react-scr ipts` so y ou’ll ge t all the  new featur es and imp rovements  in newly c reated app s automati cally.
  108  
  109   To update  an existin g project  to a new v ersion of  `react-scr ipts`, [op en the cha ngelog](ht tps://gith ub.com/fac ebookincub ator/creat e-react-ap p/blob/mas ter/CHANGE LOG.md), f ind the ve rsion youâ €™re curre ntly on (c heck `pack age.json`  in this fo lder if yo u’re not  sure), an d apply th e migratio n instruct ions for t he newer v ersions.
  110  
  111   In most ca ses bumpin g the `rea ct-scripts ` version  in `packag e.json` an d running  `npm insta ll` in thi s folder s hould be e nough, but  it’s go od to cons ult the [c hangelog]( https://gi thub.com/f acebookinc ubator/cre ate-react- app/blob/m aster/CHAN GELOG.md)  for potent ial breaki ng changes .
  112  
  113   We commit  to keeping  the break ing change s minimal  so you can  upgrade ` react-scri pts` painl essly.
  114  
  115   ## Sending  Feedback
  116  
  117   We are alw ays open t o [your fe edback](ht tps://gith ub.com/fac ebookincub ator/creat e-react-ap p/issues).
  118  
  119   ## Folder  Structure
  120  
  121   After crea tion, your  project s hould look  like this :
  122  
  123   ```
  124   my-app/
  125     README.m d
  126     node_mod ules/
  127     package. json
  128     public/
  129       index. html
  130       favico n.ico
  131     src/
  132       App.cs s
  133       App.js
  134       App.te st.js
  135       index. css
  136       index. js
  137       logo.s vg
  138   ```
  139  
  140   For the pr oject to b uild, **th ese files  must exist  with exac t filename s**:
  141  
  142   * `public/ index.html ` is the p age templa te;
  143   * `src/ind ex.js` is  the JavaSc ript entry  point.
  144  
  145   You can de lete or re name the o ther files .
  146  
  147   You may cr eate subdi rectories  inside `sr c`. For fa ster rebui lds, only  files insi de `src` a re process ed by Webp ack.<br>
  148   You need t o **put an y JS and C SS files i nside `src `**, other wise Webpa ck won’t  see them.
  149  
  150   Only files  inside `p ublic` can  be used f rom `publi c/index.ht ml`.<br>
  151   Read instr uctions be low for us ing assets  from Java Script and  HTML.
  152  
  153   You can, h owever, cr eate more  top-level  directorie s.<br>
  154   They will  not be inc luded in t he product ion build  so you can  use them  for things  like docu mentation.
  155  
  156   ## Availab le Scripts
  157  
  158   In the pro ject direc tory, you  can run:
  159  
  160   ### `npm s tart`
  161  
  162   Runs the a pp in the  developmen t mode.<br >
  163   Open [http ://localho st:3000](h ttp://loca lhost:3000 ) to view  it in the  browser.
  164  
  165   The page w ill reload  if you ma ke edits.< br>
  166   You will a lso see an y lint err ors in the  console.
  167  
  168   ### `npm t est`
  169  
  170   Launches t he test ru nner in th e interact ive watch  mode.<br>
  171   See the se ction abou t [running  tests](#r unning-tes ts) for mo re informa tion.
  172  
  173   ### `npm r un build`
  174  
  175   Builds the  app for p roduction  to the `bu ild` folde r.<br>
  176   It correct ly bundles  React in  production  mode and  optimizes  the build  for the be st perform ance.
  177  
  178   The build  is minifie d and the  filenames  include th e hashes.< br>
  179   Your app i s ready to  be deploy ed!
  180  
  181   See the se ction abou t [deploym ent](#depl oyment) fo r more inf ormation.
  182  
  183   ### `npm r un eject`
  184  
  185   **Note: th is is a on e-way oper ation. Onc e you `eje ct`, you c an’t go  back!**
  186  
  187   If you are n’t sati sfied with  the build  tool and  configurat ion choice s, you can  `eject` a t any time . This com mand will  remove the  single bu ild depend ency from  your proje ct.
  188  
  189   Instead, i t will cop y all the  configurat ion files  and the tr ansitive d ependencie s (Webpack , Babel, E SLint, etc ) right in to your pr oject so y ou have fu ll control  over them . All of t he command s except ` eject` wil l still wo rk, but th ey will po int to the  copied sc ripts so y ou can twe ak them. A t this poi nt you’r e on your  own.
  190  
  191   You don’ t have to  ever use ` eject`. Th e curated  feature se t is suita ble for sm all and mi ddle deplo yments, an d you shou ldn’t fe el obligat ed to use  this featu re. Howeve r we under stand that  this tool  wouldn’ t be usefu l if you c ouldn’t  customize  it when yo u are read y for it.
  192  
  193   ## Support ed Languag e Features  and Polyf ills
  194  
  195   This proje ct support s a supers et of the  latest Jav aScript st andard.<br >
  196   In additio n to [ES6] (https://g ithub.com/ lukehoban/ es6feature s) syntax  features,  it also su pports:
  197  
  198   * [Exponen tiation Op erator](ht tps://gith ub.com/rwa ldron/expo nentiation -operator)  (ES2016).
  199   * [Async/a wait](http s://github .com/tc39/ ecmascript -asyncawai t) (ES2017 ).
  200   * [Object  Rest/Sprea d Properti es](https: //github.c om/sebmark bage/ecmas cript-rest -spread) ( stage 3 pr oposal).
  201   * [Dynamic  import()] (https://g ithub.com/ tc39/propo sal-dynami c-import)  (stage 3 p roposal)
  202   * [Class F ields and  Static Pro perties](h ttps://git hub.com/tc 39/proposa l-class-pu blic-field s) (part o f stage 3  proposal).
  203   * [JSX](ht tps://face book.githu b.io/react /docs/intr oducing-js x.html) an d [Flow](h ttps://flo wtype.org/ ) syntax.
  204  
  205   Learn more  about [di fferent pr oposal sta ges](https ://babeljs .io/docs/p lugins/#pr esets-stag e-x-experi mental-pre sets-).
  206  
  207   While we r ecommend u sing exper imental pr oposals wi th some ca ution, Fac ebook heav ily uses t hese featu res in the  product c ode, so we  intend to  provide [ codemods]( https://me dium.com/@ cpojer/eff ective-jav ascript-co demods-5a6 686bb46fb)  if any of  these pro posals cha nge in the  future.
  208  
  209   Note that  **the proj ect only i ncludes a  few ES6 [p olyfills]( https://en .wikipedia .org/wiki/ Polyfill)* *:
  210  
  211   * [`Object .assign()` ](https:// developer. mozilla.or g/en/docs/ Web/JavaSc ript/Refer ence/Globa l_Objects/ Object/ass ign) via [ `object-as sign`](htt ps://githu b.com/sind resorhus/o bject-assi gn).
  212   * [`Promis e`](https: //develope r.mozilla. org/en-US/ docs/Web/J avaScript/ Reference/ Global_Obj ects/Promi se) via [` promise`]( https://gi thub.com/t hen/promis e).
  213   * [`fetch( )`](https: //develope r.mozilla. org/en/doc s/Web/API/ Fetch_API)  via [`wha twg-fetch` ](https:// github.com /github/fe tch).
  214  
  215   If you use  any other  ES6+ feat ures that  need **run time suppo rt** (such  as `Array .from()` o r `Symbol` ), make su re you are  including  the appro priate pol yfills man ually, or  that the b rowsers yo u are targ eting alre ady suppor t them.
  216  
  217   ## Syntax  Highlighti ng in the  Editor
  218  
  219   To configu re the syn tax highli ghting in  your favor ite text e ditor, hea d to the [ relevant B abel docum entation p age](https ://babeljs .io/docs/e ditors) an d follow t he instruc tions. Som e of the m ost popula r editors  are covere d.
  220  
  221   ## Display ing Lint O utput in t he Editor
  222  
  223   >Note: thi s feature  is availab le with `r eact-scrip ts@0.2.0`  and higher .<br>
  224   >It also o nly works  with npm 3  or higher .
  225  
  226   Some edito rs, includ ing Sublim e Text, At om, and Vi sual Studi o Code, pr ovide plug ins for ES Lint.
  227  
  228   They are n ot require d for lint ing. You s hould see  the linter  output ri ght in you r terminal  as well a s the brow ser consol e. However , if you p refer the  lint resul ts to appe ar right i n your edi tor, there  are some  extra step s you can  do.
  229  
  230   You would  need to in stall an E SLint plug in for you r editor f irst. Then , add a fi le called  `.eslintrc ` to the p roject roo t:
  231  
  232   ```js
  233   {
  234     "extends ": "react- app"
  235   }
  236   ```
  237  
  238   Now your e ditor shou ld report  the lintin g warnings .
  239  
  240   Note that  even if yo u edit you r `.eslint rc` file f urther, th ese change s will **o nly affect  the edito r integrat ion**. The y won’t  affect the  terminal  and in-bro wser lint  output. Th is is beca use Create  React App  intention ally provi des a mini mal set of  rules tha t find com mon mistak es.
  241  
  242   If you wan t to enfor ce a codin g style fo r your pro ject, cons ider using  [Prettier ](https:// github.com /jlongster /prettier)  instead o f ESLint s tyle rules .
  243  
  244   ## Debuggi ng in the  Editor
  245  
  246   **This fea ture is cu rrently on ly support ed by [Vis ual Studio  Code](htt ps://code. visualstud io.com) an d [WebStor m](https:/ /www.jetbr ains.com/w ebstorm/). **
  247  
  248   Visual Stu dio Code a nd WebStor m support  debugging  out of the  box with  Create Rea ct App. Th is enables  you as a  developer  to write a nd debug y our React  code witho ut leaving  the edito r, and mos t importan tly it ena bles you t o have a c ontinuous  developmen t workflow , where co ntext swit ching is m inimal, as  you don†™t have to  switch be tween tool s.
  249  
  250   ### Visual  Studio Co de
  251  
  252   You would  need to ha ve the lat est versio n of [VS C ode](https ://code.vi sualstudio .com) and  VS Code [C hrome Debu gger Exten sion](http s://market place.visu alstudio.c om/items?i temName=ms jsdiag.deb ugger-for- chrome) in stalled.
  253  
  254   Then add t he block b elow to yo ur `launch .json` fil e and put  it inside  the `.vsco de` folder  in your a pp’s roo t director y.
  255  
  256   ```json
  257   {
  258     "version ": "0.2.0" ,
  259     "configu rations":  [{
  260       "name" : "Chrome" ,
  261       "type" : "chrome" ,
  262       "reque st": "laun ch",
  263       "url":  "http://l ocalhost:3 000",
  264       "webRo ot": "${wo rkspaceRoo t}/src",
  265       "sourc eMapPathOv errides":  {
  266         "web pack:///sr c/*": "${w ebRoot}/*"
  267       }
  268     }]
  269   }
  270   ```
  271   >Note: the  URL may b e differen t if you'v e made adj ustments v ia the [HO ST or PORT  environme nt variabl es](#advan ced-config uration).
  272  
  273   Start your  app by ru nning `npm  start`, a nd start d ebugging i n VS Code  by pressin g `F5` or  by clickin g the gree n debug ic on. You ca n now writ e code, se t breakpoi nts, make  changes to  the code,  and debug  your newl y modified  code—al l from you r editor.
  274  
  275   Having pro blems with  VS Code D ebugging?  Please see  their [tr oubleshoot ing guide] (https://g ithub.com/ Microsoft/ vscode-chr ome-debug/ blob/maste r/README.m d#troubles hooting).
  276  
  277   ### WebSto rm
  278  
  279   You would  need to ha ve [WebSto rm](https: //www.jetb rains.com/ webstorm/)  and [JetB rains IDE  Support](h ttps://chr ome.google .com/webst ore/detail /jetbrains -ide-suppo rt/hmhgedd bohgjknpmj agkdomcpob mllji) Chr ome extens ion instal led.
  280  
  281   In the Web Storm menu  `Run` sel ect `Edit  Configurat ions...`.  Then click  `+` and s elect `Jav aScript De bug`. Past e `http:// localhost: 3000` into  the URL f ield and s ave the co nfiguratio n.
  282  
  283   >Note: the  URL may b e differen t if you'v e made adj ustments v ia the [HO ST or PORT  environme nt variabl es](#advan ced-config uration).
  284  
  285   Start your  app by ru nning `npm  start`, t hen press  `^D` on ma cOS or `F9 ` on Windo ws and Lin ux or clic k the gree n debug ic on to star t debuggin g in WebSt orm.
  286  
  287   The same w ay you can  debug you r applicat ion in Int elliJ IDEA  Ultimate,  PhpStorm,  PyCharm P ro, and Ru byMine. 
  288  
  289   ## Formatt ing Code A utomatical ly
  290  
  291   Prettier i s an opini onated cod e formatte r with sup port for J avaScript,  CSS and J SON. With  Prettier y ou can for mat the co de you wri te automat ically to  ensure a c ode style  within you r project.  See the [ Prettier's  GitHub pa ge](https: //github.c om/prettie r/prettier ) for more  informati on, and lo ok at this  [page to  see it in  action](ht tps://pret tier.githu b.io/prett ier/).
  292  
  293   To format  our code w henever we  make a co mmit in gi t, we need  to instal l the foll owing depe ndencies:
  294  
  295   ```sh
  296   npm instal l --save h usky lint- staged pre ttier
  297   ```
  298  
  299   Alternativ ely you ma y use `yar n`:
  300  
  301   ```sh
  302   yarn add h usky lint- staged pre ttier
  303   ```
  304  
  305   * `husky`  makes it e asy to use  githooks  as if they  are npm s cripts.
  306   * `lint-st aged` allo ws us to r un scripts  on staged  files in  git. See t his [blog  post about  lint-stag ed to lear n more abo ut it](htt ps://mediu m.com/@oko netchnikov /make-lint ing-great- again-f389 0e1ad6b8).
  307   * `prettie r` is the  JavaScript  formatter  we will r un before  commits.
  308  
  309   Now we can  make sure  every fil e is forma tted corre ctly by ad ding a few  lines to  the `packa ge.json` i n the proj ect root.
  310  
  311   Add the fo llowing li ne to `scr ipts` sect ion:
  312  
  313   ```diff
  314     "scripts ": {
  315   +   "preco mmit": "li nt-staged" ,
  316       "start ": "react- scripts st art",
  317       "build ": "react- scripts bu ild",
  318   ```
  319  
  320   Next we ad d a 'lint- staged' fi eld to the  `package. json`, for  example:
  321  
  322   ```diff
  323     "depende ncies": {
  324       // ...
  325     },
  326   + "lint-st aged": {
  327   +   "src/* */*.{js,js x,json,css }": [
  328   +     "pre ttier --si ngle-quote  --write",
  329   +     "git  add"
  330   +   ]
  331   + },
  332     "scripts ": {
  333   ```
  334  
  335   Now, whene ver you ma ke a commi t, Prettie r will for mat the ch anged file s automati cally. You  can also  run `./nod e_modules/ .bin/prett ier --sing le-quote - -write "sr c/**/*.{js ,jsx}"` to  format yo ur entire  project fo r the firs t time.
  336  
  337   Next you m ight want  to integra te Prettie r in your  favorite e ditor. Rea d the sect ion on [Ed itor Integ ration](ht tps://gith ub.com/pre ttier/pret tier#edito r-integrat ion) on th e Prettier  GitHub pa ge.
  338  
  339   ## Changin g the Page  `<title>`
  340  
  341   You can fi nd the sou rce HTML f ile in the  `public`  folder of  the genera ted projec t. You may  edit the  `<title>`  tag in it  to change  the title  from â€œRe act Appâ€?  to anythi ng else.
  342  
  343   Note that  normally y ou wouldnâ €™t edit f iles in th e `public`  folder ve ry often.  For exampl e, [adding  a stylesh eet](#addi ng-a-style sheet) is  done witho ut touchin g the HTML .
  344  
  345   If you nee d to dynam ically upd ate the pa ge title b ased on th e content,  you can u se the bro wser [`doc ument.titl e`](https: //develope r.mozilla. org/en-US/ docs/Web/A PI/Documen t/title) A PI. For mo re complex  scenarios  when you  want to ch ange the t itle from  React comp onents, yo u can use  [React Hel met](https ://github. com/nfl/re act-helmet ), a third  party lib rary.
  346  
  347   If you use  a custom  server for  your app  in product ion and wa nt to modi fy the tit le before  it gets se nt to the  browser, y ou can fol low advice  in [this  section](# generating -dynamic-m eta-tags-o n-the-serv er). Alter natively,  you can pr e-build ea ch page as  a static  HTML file  which then  loads the  JavaScrip t bundle,  which is c overed [he re](#pre-r endering-i nto-static -html-file s).
  348  
  349   ## Install ing a Depe ndency
  350  
  351   The genera ted projec t includes  React and  ReactDOM  as depende ncies. It  also inclu des a set  of scripts  used by C reate Reac t App as a  developme nt depende ncy. You m ay install  other dep endencies  (for examp le, React  Router) wi th `npm`:
  352  
  353   ```sh
  354   npm instal l --save r eact-route r
  355   ```
  356  
  357   Alternativ ely you ma y use `yar n`:
  358  
  359   ```sh
  360   yarn add r eact-route r
  361   ```
  362  
  363   This works  for any l ibrary, no t just `re act-router `.
  364  
  365   ## Importi ng a Compo nent
  366  
  367   This proje ct setup s upports ES 6 modules  thanks to  Babel.<br>
  368   While you  can still  use `requi re()` and  `module.ex ports`, we  encourage  you to us e [`import ` and `exp ort`](http ://explori ngjs.com/e s6/ch_modu les.html)  instead.
  369  
  370   For exampl e:
  371  
  372   ### `Butto n.js`
  373  
  374   ```js
  375   import Rea ct, { Comp onent } fr om 'react' ;
  376  
  377   class Butt on extends  Component  {
  378     render()  {
  379       // ...
  380     }
  381   }
  382  
  383   export def ault Butto n; // Donâ €™t forget  to use ex port defau lt!
  384   ```
  385  
  386   ### `Dange rButton.js `
  387  
  388  
  389   ```js
  390   import Rea ct, { Comp onent } fr om 'react' ;
  391   import But ton from ' ./Button';  // Import  a compone nt from an other file
  392  
  393   class Dang erButton e xtends Com ponent {
  394     render()  {
  395       return  <Button c olor="red"  />;
  396     }
  397   }
  398  
  399   export def ault Dange rButton;
  400   ```
  401  
  402   Be aware o f the [dif ference be tween defa ult and na med export s](http:// stackoverf low.com/qu estions/36 795819/rea ct-native- es-6-when- should-i-u se-curly-b races-for- import/367 96281#3679 6281). It  is a commo n source o f mistakes .
  403  
  404   We suggest  that you  stick to u sing defau lt imports  and expor ts when a  module onl y exports  a single t hing (for  example, a  component ). That’ s what you  get when  you use `e xport defa ult Button ` and `imp ort Button  from './B utton'`.
  405  
  406   Named expo rts are us eful for u tility mod ules that  export sev eral funct ions. A mo dule may h ave at mos t one defa ult export  and as ma ny named e xports as  you like.
  407  
  408   Learn more  about ES6  modules:
  409  
  410   * [When to  use the c urly brace s?](http:/ /stackover flow.com/q uestions/3 6795819/re act-native -es-6-when -should-i- use-curly- braces-for -import/36 796281#367 96281)
  411   * [Explori ng ES6: Mo dules](htt p://explor ingjs.com/ es6/ch_mod ules.html)
  412   * [Underst anding ES6 : Modules] (https://l eanpub.com /understan dinges6/re ad#leanpub -auto-enca psulating- code-with- modules)
  413  
  414   ## Code Sp litting
  415  
  416   Instead of  downloadi ng the ent ire app be fore users  can use i t, code sp litting al lows you t o split yo ur code in to small c hunks whic h you can  then load  on demand.
  417  
  418   This proje ct setup s upports co de splitti ng via [dy namic `imp ort()`](ht tp://2alit y.com/2017 /01/import -operator. html#loadi ng-code-on -demand).  Its [propo sal](https ://github. com/tc39/p roposal-dy namic-impo rt) is in  stage 3. T he `import ()` functi on-like fo rm takes t he module  name as an  argument  and return s a [`Prom ise`](http s://develo per.mozill a.org/en-U S/docs/Web /JavaScrip t/Referenc e/Global_O bjects/Pro mise) whic h always r esolves to  the names pace objec t of the m odule.
  419  
  420   Here is an  example:
  421  
  422   ### `modul eA.js`
  423  
  424   ```js
  425   const modu leA = 'Hel lo';
  426  
  427   export { m oduleA };
  428   ```
  429   ### `App.j s`
  430  
  431   ```js
  432   import Rea ct, { Comp onent } fr om 'react' ;
  433  
  434   class App  extends Co mponent {
  435     handleCl ick = () = > {
  436       import ('./module A')
  437         .the n(({ modul eA }) => {
  438           //  Use modul eA
  439         })
  440         .cat ch(err =>  {
  441           //  Handle fa ilure
  442         });
  443     };
  444  
  445     render()  {
  446       return  (
  447         <div >
  448           <b utton onCl ick={this. handleClic k}>Load</b utton>
  449         </di v>
  450       );
  451     }
  452   }
  453  
  454   export def ault App;
  455   ```
  456  
  457   This will  make `modu leA.js` an d all its  unique dep endencies  as a separ ate chunk  that only  loads afte r the user  clicks th e 'Load' b utton.
  458  
  459   You can al so use it  with `asyn c` / `awai t` syntax  if you pre fer it.
  460  
  461   ### With R eact Route r
  462  
  463   If you are  using Rea ct Router  check out  [this tuto rial](http ://serverl ess-stack. com/chapte rs/code-sp litting-in -create-re act-app.ht ml) on how  to use co de splitti ng with it . You can  find the c ompanion G itHub repo sitory [he re](https: //github.c om/Anomaly Innovation s/serverle ss-stack-d emo-client /tree/code -splitting -in-create -react-app ).
  464  
  465   ## Adding  a Styleshe et
  466  
  467   This proje ct setup u ses [Webpa ck](https: //webpack. js.org/) f or handlin g all asse ts. Webpac k offers a  custom wa y of â€œex tendingâ€?  the conce pt of `imp ort` beyon d JavaScri pt. To exp ress that  a JavaScri pt file de pends on a  CSS file,  you need  to **impor t the CSS  from the J avaScript  file**:
  468  
  469   ### `Butto n.css`
  470  
  471   ```css
  472   .Button {
  473     padding:  20px;
  474   }
  475   ```
  476  
  477   ### `Butto n.js`
  478  
  479   ```js
  480   import Rea ct, { Comp onent } fr om 'react' ;
  481   import './ Button.css '; // Tell  Webpack t hat Button .js uses t hese style s
  482  
  483   class Butt on extends  Component  {
  484     render()  {
  485       // You  can use t hem as reg ular CSS s tyles
  486       return  <div clas sName="But ton" />;
  487     }
  488   }
  489   ```
  490  
  491   **This is  not requir ed for Rea ct** but m any people  find this  feature c onvenient.  You can r ead about  the benefi ts of this  approach  [here](htt ps://mediu m.com/seek -ui-engine ering/bloc k-element- modifying- your-javas cript-comp onents-d7f 99fcab52b) . However  you should  be aware  that this  makes your  code less  portable  to other b uild tools  and envir onments th an Webpack .
  492  
  493   In develop ment, expr essing dep endencies  this way a llows your  styles to  be reload ed on the  fly as you  edit them . In produ ction, all  CSS files  will be c oncatenate d into a s ingle mini fied `.css ` file in  the build  output.
  494  
  495   If you are  concerned  about usi ng Webpack -specific  semantics,  you can p ut all you r CSS righ t into `sr c/index.cs s`. It wou ld still b e imported  from `src /index.js` , but you  could alwa ys remove  that impor t if you l ater migra te to a di fferent bu ild tool.
  496  
  497   ## Post-Pr ocessing C SS
  498  
  499   This proje ct setup m inifies yo ur CSS and  adds vend or prefixe s to it au tomaticall y through  [Autoprefi xer](https ://github. com/postcs s/autopref ixer) so y ou don’t  need to w orry about  it.
  500  
  501   For exampl e, this:
  502  
  503   ```css
  504   .App {
  505     display:  flex;
  506     flex-dir ection: ro w;
  507     align-it ems: cente r;
  508   }
  509   ```
  510  
  511   becomes th is:
  512  
  513   ```css
  514   .App {
  515     display:  -webkit-b ox;
  516     display:  -ms-flexb ox;
  517     display:  flex;
  518     -webkit- box-orient : horizont al;
  519     -webkit- box-direct ion: norma l;
  520         -ms- flex-direc tion: row;
  521              flex-direc tion: row;
  522     -webkit- box-align:  center;
  523         -ms- flex-align : center;
  524              align-item s: center;
  525   }
  526   ```
  527  
  528   If you nee d to disab le autopre fixing for  some reas on, [follo w this sec tion](http s://github .com/postc ss/autopre fixer#disa bling).
  529  
  530   ## Adding  a CSS Prep rocessor ( Sass, Less  etc.)
  531  
  532   Generally,  we recomm end that y ou don’t  reuse the  same CSS  classes ac ross diffe rent compo nents. For  example,  instead of  using a ` .Button` C SS class i n `<Accept Button>` a nd `<Rejec tButton>`  components , we recom mend creat ing a `<Bu tton>` com ponent wit h its own  `.Button`  styles, th at both `< AcceptButt on>` and ` <RejectBut ton>` can  render (bu t [not inh erit](http s://facebo ok.github. io/react/d ocs/compos ition-vs-i nheritance .html)).
  533  
  534   Following  this rule  often make s CSS prep rocessors  less usefu l, as feat ures like  mixins and  nesting a re replace d by compo nent compo sition. Yo u can, how ever, inte grate a CS S preproce ssor if yo u find it  valuable.  In this wa lkthrough,  we will b e using Sa ss, but yo u can also  use Less,  or anothe r alternat ive.
  535  
  536   First, let ’s insta ll the com mand-line  interface  for Sass:
  537  
  538   ```sh
  539   npm instal l --save n ode-sass-c hokidar
  540   ```
  541  
  542   Alternativ ely you ma y use `yar n`:
  543  
  544   ```sh
  545   yarn add n ode-sass-c hokidar
  546   ```
  547  
  548   Then in `p ackage.jso n`, add th e followin g lines to  `scripts` :
  549  
  550   ```diff
  551      "script s": {
  552   +    "buil d-css": "n ode-sass-c hokidar sr c/ -o src/ ",
  553   +    "watc h-css": "n pm run bui ld-css &&  node-sass- chokidar s rc/ -o src / --watch  --recursiv e",
  554        "star t": "react -scripts s tart",
  555        "buil d": "react -scripts b uild",
  556        "test ": "react- scripts te st --env=j sdom",
  557   ```
  558  
  559   >Note: To  use a diff erent prep rocessor,  replace `b uild-css`  and `watch -css` comm ands accor ding to yo ur preproc essor’s  documentat ion.
  560  
  561   Now you ca n rename ` src/App.cs s` to `src /App.scss`  and run ` npm run wa tch-css`.  The watche r will fin d every Sa ss file in  `src` sub directorie s, and cre ate a corr esponding  CSS file n ext to it,  in our ca se overwri ting `src/ App.css`.  Since `src /App.js` s till impor ts `src/Ap p.css`, th e styles b ecome a pa rt of your  applicati on. You ca n now edit  `src/App. scss`, and  `src/App. css` will  be regener ated.
  562  
  563   To share v ariables b etween Sas s files, y ou can use  Sass impo rts. For e xample, `s rc/App.scs s` and oth er compone nt style f iles could  include ` @import ". /shared.sc ss";` with  variable  definition s.
  564  
  565   To enable  importing  files with out using  relative p aths, you  can add th e  `--incl ude-path`  option to  the comman d in `pack age.json`.
  566  
  567   ```
  568   "build-css ": "node-s ass-chokid ar --inclu de-path ./ src --incl ude-path . /node_modu les src/ - o src/",
  569   "watch-css ": "npm ru n build-cs s && node- sass-choki dar --incl ude-path . /src --inc lude-path  ./node_mod ules src/  -o src/ -- watch --re cursive",
  570   ```
  571  
  572   This will  allow you  to do impo rts like
  573  
  574   ```scss
  575   @import 's tyles/_col ors.scss';  // assumi ng a style s director y under sr c/
  576   @import 'n progress/n progress';  // import ing a css  file from  the nprogr ess node m odule
  577   ```
  578  
  579   At this po int you mi ght want t o remove a ll CSS fil es from th e source c ontrol, an d add `src /**/*.css`  to your ` .gitignore ` file. It  is genera lly a good  practice  to keep th e build pr oducts out side of th e source c ontrol.
  580  
  581   As a final  step, you  may find  it conveni ent to run  `watch-cs s` automat ically wit h `npm sta rt`, and r un `build- css` as a  part of `n pm run bui ld`. You c an use the  `&&` oper ator to ex ecute two  scripts se quentially . However,  there is  no cross-p latform wa y to run t wo scripts  in parall el, so we  will insta ll a packa ge for thi s:
  582  
  583   ```sh
  584   npm instal l --save n pm-run-all
  585   ```
  586  
  587   Alternativ ely you ma y use `yar n`:
  588  
  589   ```sh
  590   yarn add n pm-run-all
  591   ```
  592  
  593   Then we ca n change ` start` and  `build` s cripts to  include th e CSS prep rocessor c ommands:
  594  
  595   ```diff
  596      "script s": {
  597        "buil d-css": "n ode-sass-c hokidar sr c/ -o src/ ",
  598        "watc h-css": "n pm run bui ld-css &&  node-sass- chokidar s rc/ -o src / --watch  --recursiv e",
  599   -    "star t": "react -scripts s tart",
  600   -    "buil d": "react -scripts b uild",
  601   +    "star t-js": "re act-script s start",
  602   +    "star t": "npm-r un-all -p  watch-css  start-js",
  603   +    "buil d-js": "re act-script s build",
  604   +    "buil d": "npm-r un-all bui ld-css bui ld-js",
  605        "test ": "react- scripts te st --env=j sdom",
  606        "ejec t": "react -scripts e ject"
  607      }
  608   ```
  609  
  610   Now runnin g `npm sta rt` and `n pm run bui ld` also b uilds Sass  files.
  611  
  612   **Why `nod e-sass-cho kidar`?**
  613  
  614   `node-sass ` has been  reported  as having  the follow ing issues :
  615  
  616   - `node-sa ss --watch ` has been  reported  to have *p erformance  issues* i n certain  conditions  when used  in a virt ual machin e or with  docker.
  617  
  618   - Infinite  styles co mpiling [# 1939](http s://github .com/faceb ookincubat or/create- react-app/ issues/193 9)
  619  
  620   - `node-sa ss` has be en reporte d as havin g issues w ith detect ing new fi les in a d irectory [ #1891](htt ps://githu b.com/sass /node-sass /issues/18 91)
  621  
  622    `node-sas s-chokidar ` is used  here as it  addresses  these iss ues.
  623  
  624   ## Adding  Images, Fo nts, and F iles
  625  
  626   With Webpa ck, using  static ass ets like i mages and  fonts work s similarl y to CSS.
  627  
  628   You can ** `import` a  file righ t in a Jav aScript mo dule**. Th is tells W ebpack to  include th at file in  the bundl e. Unlike  CSS import s, importi ng a file  gives you  a string v alue. This  value is  the final  path you c an referen ce in your  code, e.g . as the ` src` attri bute of an  image or  the `href`  of a link  to a PDF.
  629  
  630   To reduce  the number  of reques ts to the  server, im porting im ages that  are less t han 10,000  bytes ret urns a [da ta URI](ht tps://deve loper.mozi lla.org/en -US/docs/W eb/HTTP/Ba sics_of_HT TP/Data_UR Is) instea d of a pat h. This ap plies to t he followi ng file ex tensions:  bmp, gif,  jpg, jpeg,  and png.  SVG files  are exclud ed due to  [#1153](ht tps://gith ub.com/fac ebookincub ator/creat e-react-ap p/issues/1 153).
  631  
  632   Here is an  example:
  633  
  634   ```js
  635   import Rea ct from 'r eact';
  636   import log o from './ logo.png';  // Tell W ebpack thi s JS file  uses this  image
  637  
  638   console.lo g(logo); / / /logo.84 287d09.png
  639  
  640   function H eader() {
  641     // Impor t result i s the URL  of your im age
  642     return < img src={l ogo} alt=" Logo" />;
  643   }
  644  
  645   export def ault Heade r;
  646   ```
  647  
  648   This ensur es that wh en the pro ject is bu ilt, Webpa ck will co rrectly mo ve the ima ges into t he build f older, and  provide u s with cor rect paths .
  649  
  650   This works  in CSS to o:
  651  
  652   ```css
  653   .Logo {
  654     backgrou nd-image:  url(./logo .png);
  655   }
  656   ```
  657  
  658   Webpack fi nds all re lative mod ule refere nces in CS S (they st art with ` ./`) and r eplaces th em with th e final pa ths from t he compile d bundle.  If you mak e a typo o r accident ally delet e an impor tant file,  you will  see a comp ilation er ror, just  like when  you import  a non-exi stent Java Script mod ule. The f inal filen ames in th e compiled  bundle ar e generate d by Webpa ck from co ntent hash es. If the  file cont ent change s in the f uture, Web pack will  give it a  different  name in pr oduction s o you donâ €™t need t o worry ab out long-t erm cachin g of asset s.
  659  
  660   Please be  advised th at this is  also a cu stom featu re of Webp ack.
  661  
  662   **It is no t required  for React ** but man y people e njoy it (a nd React N ative uses  a similar  mechanism  for image s).<br>
  663   An alterna tive way o f handling  static as sets is de scribed in  the next  section.
  664  
  665   ## Using t he `public ` Folder
  666  
  667   >Note: thi s feature  is availab le with `r eact-scrip ts@0.5.0`  and higher .
  668  
  669   ### Changi ng the HTM L
  670  
  671   The `publi c` folder  contains t he HTML fi le so you  can tweak  it, for ex ample, to  [set the p age title] (#changing -the-page- title).
  672   The `<scri pt>` tag w ith the co mpiled cod e will be  added to i t automati cally duri ng the bui ld process .
  673  
  674   ### Adding  Assets Ou tside of t he Module  System
  675  
  676   You can al so add oth er assets  to the `pu blic` fold er.
  677  
  678   Note that  we normall y encourag e you to ` import` as sets in Ja vaScript f iles inste ad.
  679   For exampl e, see the  sections  on [adding  a stylesh eet](#addi ng-a-style sheet) and  [adding i mages and  fonts](#ad ding-image s-fonts-an d-files).
  680   This mecha nism provi des a numb er of bene fits:
  681  
  682   * Scripts  and styles heets get  minified a nd bundled  together  to avoid e xtra netwo rk request s.
  683   * Missing  files caus e compilat ion errors  instead o f 404 erro rs for you r users.
  684   * Result f ilenames i nclude con tent hashe s so you d on’t nee d to worry  about bro wsers cach ing their  old versio ns.
  685  
  686   However th ere is an  **escape h atch** tha t you can  use to add  an asset  outside of  the modul e system.
  687  
  688   If you put  a file in to the `pu blic` fold er, it wil l **not**  be process ed by Webp ack. Inste ad it will  be copied  into the  build fold er untouch ed.   To r eference a ssets in t he `public ` folder,  you need t o use a sp ecial vari able calle d `PUBLIC_ URL`.
  689  
  690   Inside `in dex.html`,  you can u se it like  this:
  691  
  692   ```html
  693   <link rel= "shortcut  icon" href ="%PUBLIC_ URL%/favic on.ico">
  694   ```
  695  
  696   Only files  inside th e `public`  folder wi ll be acce ssible by  `%PUBLIC_U RL%` prefi x. If you  need to us e a file f rom `src`  or `node_m odules`, y ou’ll ha ve to copy  it there  to explici tly specif y your int ention to  make this  file a par t of the b uild.
  697  
  698   When you r un `npm ru n build`,  Create Rea ct App wil l substitu te `%PUBLI C_URL%` wi th a corre ct absolut e path so  your proje ct works e ven if you  use clien t-side rou ting or ho st it at a  non-root  URL.
  699  
  700   In JavaScr ipt code,  you can us e `process .env.PUBLI C_URL` for  similar p urposes:
  701  
  702   ```js
  703   render() {
  704     // Note:  this is a n escape h atch and s hould be u sed sparin gly!
  705     // Norma lly we rec ommend usi ng `import ` for gett ing asset  URLs
  706     // as de scribed in  â€œAdding  Images an d Fontsâ€?  above thi s section.
  707     return < img src={p rocess.env .PUBLIC_UR L + '/img/ logo.png'}  />;
  708   }
  709   ```
  710  
  711   Keep in mi nd the dow nsides of  this appro ach:
  712  
  713   * None of  the files  in `public ` folder g et post-pr ocessed or  minified.
  714   * Missing  files will  not be ca lled at co mpilation  time, and  will cause  404 error s for your  users.
  715   * Result f ilenames w on’t inc lude conte nt hashes  so you’l l need to  add query  arguments  or rename  them every  time they  change.
  716  
  717   ### When t o Use the  `public` F older
  718  
  719   Normally w e recommen d importin g [stylesh eets](#add ing-a-styl esheet), [ images, an d fonts](# adding-ima ges-fonts- and-files)  from Java Script.
  720   The `publi c` folder  is useful  as a worka round for  a number o f less com mon cases:
  721  
  722   * You need  a file wi th a speci fic name i n the buil d output,  such as [` manifest.w ebmanifest `](https:/ /developer .mozilla.o rg/en-US/d ocs/Web/Ma nifest).
  723   * You have  thousands  of images  and need  to dynamic ally refer ence their  paths.
  724   * You want  to includ e a small  script lik e [`pace.j s`](http:/ /github.hu bspot.com/ pace/docs/ welcome/)  outside of  the bundl ed code.
  725   * Some lib rary may b e incompat ible with  Webpack an d you have  no other  option but  to includ e it as a  `<script>`  tag.
  726  
  727   Note that  if you add  a `<scrip t>` that d eclares gl obal varia bles, you  also need  to read th e next sec tion on us ing them.
  728  
  729   ## Using G lobal Vari ables
  730  
  731   When you i nclude a s cript in t he HTML fi le that de fines glob al variabl es and try  to use on e of these  variables  in the co de, the li nter will  complain b ecause it  cannot see  the defin ition of t he variabl e.
  732  
  733   You can av oid this b y reading  the global  variable  explicitly  from the  `window` o bject, for  example:
  734  
  735   ```js
  736   const $ =  window.$;
  737   ```
  738  
  739   This makes  it obviou s you are  using a gl obal varia ble intent ionally ra ther than  because of  a typo.
  740  
  741   Alternativ ely, you c an force t he linter  to ignore  any line b y adding ` // eslint- disable-li ne` after  it.
  742  
  743   ## Adding  Bootstrap
  744  
  745   You don’ t have to  use [React  Bootstrap ](https:// react-boot strap.gith ub.io) tog ether with  React but  it is a p opular lib rary for i ntegrating  Bootstrap  with Reac t apps. If  you need  it, you ca n integrat e it with  Create Rea ct App by  following  these step s:
  746  
  747   Install Re act Bootst rap and Bo otstrap fr om npm. Re act Bootst rap does n ot include  Bootstrap  CSS so th is needs t o be insta lled as we ll:
  748  
  749   ```sh
  750   npm instal l --save r eact-boots trap boots trap@3
  751   ```
  752  
  753   Alternativ ely you ma y use `yar n`:
  754  
  755   ```sh
  756   yarn add r eact-boots trap boots trap@3
  757   ```
  758  
  759   Import Boo tstrap CSS  and optio nally Boot strap them e CSS in t he beginni ng of your  ```src/in dex.js```  file:
  760  
  761   ```js
  762   import 'bo otstrap/di st/css/boo tstrap.css ';
  763   import 'bo otstrap/di st/css/boo tstrap-the me.css';
  764   // Put any  other imp orts below  so that C SS from yo ur
  765   // compone nts takes  precedence  over defa ult styles .
  766   ```
  767  
  768   Import req uired Reac t Bootstra p componen ts within  ```src/App .js``` fil e or your  custom com ponent fil es:
  769  
  770   ```js
  771   import { N avbar, Jum botron, Bu tton } fro m 'react-b ootstrap';
  772   ```
  773  
  774   Now you ar e ready to  use the i mported Re act Bootst rap compon ents withi n your com ponent hie rarchy def ined in th e render m ethod. Her e is an ex ample [`Ap p.js`](htt ps://gist. githubuser content.co m/gaearon/ 85d8c067f6 af1e56277c 82d19fd4da 7b/raw/615 8dd991b672 84e9fc8d70 b9d973efe8 7659d72/Ap p.js) redo ne using R eact Boots trap.
  775  
  776   ### Using  a Custom T heme
  777  
  778   Sometimes  you might  need to tw eak the vi sual style s of Boots trap (or e quivalent  package).< br>
  779   We suggest  the follo wing appro ach:
  780  
  781   * Create a  new packa ge that de pends on t he package  you wish  to customi ze, e.g. B ootstrap.
  782   * Add the  necessary  build step s to tweak  the theme , and publ ish your p ackage on  npm.
  783   * Install  your own t heme npm p ackage as  a dependen cy of your  app.
  784  
  785   Here is an  example o f adding a  [customiz ed Bootstr ap](https: //medium.c om/@tacoma nator/cust omizing-cr eate-react -app-aa9ff b88165) th at follows  these ste ps.
  786  
  787   ## Adding  Flow
  788  
  789   Flow is a  static typ e checker  that helps  you write  code with  fewer bug s. Check o ut this [i ntroductio n to using  static ty pes in Jav aScript](h ttps://med ium.com/@p reethikasi reddy/why- use-static -types-in- javascript -part-1-83 82da1e0adb ) if you a re new to  this conce pt.
  790  
  791   Recent ver sions of [ Flow](http ://flowtyp e.org/) wo rk with Cr eate React  App proje cts out of  the box.
  792  
  793   To add Flo w to a Cre ate React  App projec t, follow  these step s:
  794  
  795   1. Run `np m install  --save flo w-bin` (or  `yarn add  flow-bin` ).
  796   2. Add `"f low": "flo w"` to the  `scripts`  section o f your `pa ckage.json `.
  797   3. Run `np m run flow  init` (or  `yarn flo w init`) t o create a  [`.flowco nfig` file ](https:// flowtype.o rg/docs/ad vanced-con figuration .html) in  the root d irectory.
  798   4. Add `//  @flow` to  any files  you want  to type ch eck (for e xample, to  `src/App. js`).
  799  
  800   Now you ca n run `npm  run flow`  (or `yarn  flow`) to  check the  files for  type erro rs.
  801   You can op tionally u se an IDE  like [Nucl ide](https ://nuclide .io/docs/l anguages/f low/) for  a better i ntegrated  experience .
  802   In the fut ure we pla n to integ rate it in to Create  React App  even more  closely.
  803  
  804   To learn m ore about  Flow, chec k out [its  documenta tion](http s://flowty pe.org/).
  805  
  806   ## Adding  Custom Env ironment V ariables
  807  
  808   >Note: thi s feature  is availab le with `r eact-scrip ts@0.2.3`  and higher .
  809  
  810   Your proje ct can con sume varia bles decla red in you r environm ent as if  they were  declared l ocally in  your JS fi les. By
  811   default yo u will hav e `NODE_EN V` defined  for you,  and any ot her enviro nment vari ables star ting with
  812   `REACT_APP _`.
  813  
  814   **The envi ronment va riables ar e embedded  during th e build ti me**. Sinc e Create R eact App p roduces a  static HTM L/CSS/JS b undle, it  can’t po ssibly rea d them at  runtime. T o read the m at runti me, you wo uld need t o load HTM L into mem ory on the  server an d replace  placeholde rs in runt ime, just  like [desc ribed here ](#injecti ng-data-fr om-the-ser ver-into-t he-page).  Alternativ ely you ca n rebuild  the app on  the serve r anytime  you change  them.
  815  
  816   >Note: You  must crea te custom  environmen t variable s beginnin g with `RE ACT_APP_`.  Any other  variables  except `N ODE_ENV` w ill be ign ored to av oid accide ntally [ex posing a p rivate key  on the ma chine that  could hav e the same  name](htt ps://githu b.com/face bookincuba tor/create -react-app /issues/86 5#issuecom ment-25219 9527). Cha nging any  environmen t variable s will req uire you t o restart  the develo pment serv er if it i s running.
  817  
  818   These envi ronment va riables wi ll be defi ned for yo u on `proc ess.env`.  For exampl e, having  an environ ment
  819   variable n amed `REAC T_APP_SECR ET_CODE` w ill be exp osed in yo ur JS as ` process.en v.REACT_AP P_SECRET_C ODE`.
  820  
  821   There is a lso a spec ial built- in environ ment varia ble called  `NODE_ENV `. You can  read it f rom `proce ss.env.NOD E_ENV`. Wh en you run  `npm star t`, it is  always equ al to `'de velopment' `, when yo u run `npm  test` it  is always  equal to ` 'test'`, a nd when yo u run `npm  run build ` to make  a producti on bundle,  it is alw ays equal  to `'produ ction'`. * *You canno t override  `NODE_ENV ` manually .** This p revents de velopers f rom accide ntally dep loying a s low develo pment buil d to produ ction.
  822  
  823   These envi ronment va riables ca n be usefu l for disp laying inf ormation c onditional ly based o n where th e project  is
  824   deployed o r consumin g sensitiv e data tha t lives ou tside of v ersion con trol.
  825  
  826   First, you  need to h ave enviro nment vari ables defi ned. For e xample, le t’s say  you wanted  to consum e a  PW        defined
  827   in the env ironment i nside a `< form>`:
  828  
  829   ```jsx
  830   render() {
  831     return (
  832       <div>
  833         <sma ll>You are  running t his applic ation in < b>{process .env.NODE_ ENV}</b> m ode.</smal l>
  834         <for m>
  835           <i nput type= "hidden" d efaultValu e={process .env.REACT _APP_SECRE T_CODE} />
  836         </fo rm>
  837       </div>
  838     );
  839   }
  840   ```
  841  
  842   During the  build, `p rocess.env .REACT_APP _SECRET_CO DE` will b e replaced  with the  current va lue of the  `REACT_AP P_SECRET_C ODE` envir onment var iable. Rem ember that  the `NODE _ENV` vari able will  be set for  you autom atically.
  843  
  844   When you l oad the ap p in the b rowser and  inspect t he `<input >`, you wi ll see its  value set  to `abcde f`, and th e bold tex t will sho w the envi ronment pr ovided whe n using `n pm start`:
  845  
  846   ```html
  847   <div>
  848     <small>Y ou are run ning this  applicatio n in <b>de velopment< /b> mode.< /small>
  849     <form>
  850       <input  type="hid den" value ="abcdef"  />
  851     </form>
  852   </div>
  853   ```
  854  
  855   The above  form is lo oking for  a variable  called `R EACT_APP_S ECRET_CODE ` from the  environme nt. In ord er to cons ume this
  856   value, we  need to ha ve it defi ned in the  environme nt. This c an be done  using two  ways: eit her in you r shell or  in
  857   a `.env` f ile. Both  of these w ays are de scribed in  the next  few sectio ns.
  858  
  859   Having acc ess to the  `NODE_ENV ` is also  useful for  performin g actions  conditiona lly:
  860  
  861   ```js
  862   if (proces s.env.NODE _ENV !== ' production ') {
  863     analytic s.disable( );
  864   }
  865   ```
  866  
  867   When you c ompile the  app with  `npm run b uild`, the  minificat ion step w ill strip  out this c ondition,  and the re sulting bu ndle will  be smaller .
  868  
  869   ### Refere ncing Envi ronment Va riables in  the HTML
  870  
  871   >Note: thi s feature  is availab le with `r eact-scrip ts@0.9.0`  and higher .
  872  
  873   You can al so access  the enviro nment vari ables star ting with  `REACT_APP _` in the  `public/in dex.html`.  For examp le:
  874  
  875   ```html
  876   <title>%RE ACT_APP_WE BSITE_NAME %</title>
  877   ```
  878  
  879   Note that  the caveat s from the  above sec tion apply :
  880  
  881   * Apart fr om a few b uilt-in va riables (` NODE_ENV`  and `PUBLI C_URL`), v ariable na mes must s tart with  `REACT_APP _` to work .
  882   * The envi ronment va riables ar e injected  at build  time. If y ou need to  inject th em at runt ime, [foll ow this ap proach ins tead](#gen erating-dy namic-meta -tags-on-t he-server) .
  883  
  884   ### Adding  Temporary  Environme nt Variabl es In Your  Shell
  885  
  886   Defining e nvironment  variables  can vary  between OS es. It’s  also impo rtant to k now that t his manner  is tempor ary for th e
  887   life of th e shell se ssion.
  888  
  889   #### Windo ws (cmd.ex e)
  890  
  891   ```cmd
  892   set REACT_ APP_SECRET _CODE=abcd ef&&npm st art
  893   ```
  894  
  895   (Note: the  lack of w hitespace  is intenti onal.)
  896  
  897   #### Linux , macOS (B ash)
  898  
  899   ```bash
  900   REACT_APP_ SECRET_COD E=abcdef n pm start
  901   ```
  902  
  903   ### Adding  Developme nt Environ ment Varia bles In `. env`
  904  
  905   >Note: thi s feature  is availab le with `r eact-scrip ts@0.5.0`  and higher .
  906  
  907   To define  permanent  environmen t variable s, create  a file cal led `.env`  in the ro ot of your  project:
  908  
  909   ```
  910   REACT_APP_ SECRET_COD E=abcdef
  911   ```
  912  
  913   `.env` fil es **shoul d be** che cked into  source con trol (with  the exclu sion of `. env*.local `).
  914  
  915   #### What  other `.en v` files c an be used ?
  916  
  917   >Note: thi s feature  is **avail able with  `react-scr ipts@1.0.0 ` and high er**.
  918  
  919   * `.env`:  Default.
  920   * `.env.lo cal`: Loca l override s. **This  file is lo aded for a ll environ ments exce pt test.**
  921   * `.env.de velopment` , `.env.te st`, `.env .productio n`: Enviro nment-spec ific setti ngs.
  922   * `.env.de velopment. local`, `. env.test.l ocal`, `.e nv.product ion.local` : Local ov errides of  environme nt-specifi c settings .
  923  
  924   Files on t he left ha ve more pr iority tha n files on  the right :
  925  
  926   * `npm sta rt`: `.env .developme nt.local`,  `.env.dev elopment`,  `.env.loc al`, `.env `
  927   * `npm run  build`: ` .env.produ ction.loca l`, `.env. production `, `.env.l ocal`, `.e nv`
  928   * `npm tes t`: `.env. test.local `, `.env.t est`, `.en v` (note ` .env.local ` is missi ng)
  929  
  930   These vari ables will  act as th e defaults  if the ma chine does  not expli citly set  them.<br>
  931   Please ref er to the  [dotenv do cumentatio n](https:/ /github.co m/motdotla /dotenv) f or more de tails.
  932  
  933   >Note: If  you are de fining env ironment v ariables f or develop ment, your  CI and/or  hosting p latform wi ll most li kely need
  934   these defi ned as wel l. Consult  their doc umentation  how to do  this. For  example,  see the do cumentatio n for [Tra vis CI](ht tps://docs .travis-ci .com/user/ environmen t-variable s/) or [He roku](http s://devcen ter.heroku .com/artic les/config -vars).
  935  
  936   ## Can I U se Decorat ors?
  937  
  938   Many popul ar librari es use [de corators]( https://me dium.com/g oogle-deve lopers/exp loring-es7 -decorator s-76ecb65f b841) in t heir docum entation.< br>
  939   Create Rea ct App doe sn’t sup port decor ator synta x at the m oment beca use:
  940  
  941   * It is an  experimen tal propos al and is  subject to  change.
  942   * The curr ent specif ication ve rsion is n ot officia lly suppor ted by Bab el.
  943   * If the s pecificati on changes , we won†™t be able  to write  a codemod  because we  don’t u se them in ternally a t Facebook .
  944  
  945   However in  many case s you can  rewrite de corator-ba sed code w ithout dec orators ju st as fine .<br>
  946   Please ref er to thes e two thre ads for re ference:
  947  
  948   * [#214](h ttps://git hub.com/fa cebookincu bator/crea te-react-a pp/issues/ 214)
  949   * [#411](h ttps://git hub.com/fa cebookincu bator/crea te-react-a pp/issues/ 411)
  950  
  951   Create Rea ct App wil l add deco rator supp ort when t he specifi cation adv ances to a  stable st age.
  952  
  953   ## Integra ting with  an API Bac kend
  954  
  955   These tuto rials will  help you  to integra te your ap p with an  API backen d running  on another  port,
  956   using `fet ch()` to a ccess it.
  957  
  958   ### Node
  959   Check out  [this tuto rial](http s://www.fu llstackrea ct.com/art icles/usin g-create-r eact-app-w ith-a-serv er/).
  960   You can fi nd the com panion Git Hub reposi tory [here ](https:// github.com /fullstack react/food -lookup-de mo).
  961  
  962   ### Ruby o n Rails
  963  
  964   Check out  [this tuto rial](http s://www.fu llstackrea ct.com/art icles/how- to-get-cre ate-react- app-to-wor k-with-you r-rails-ap i/).
  965   You can fi nd the com panion Git Hub reposi tory [here ](https:// github.com /fullstack react/food -lookup-de mo-rails).
  966  
  967   ## Proxyin g API Requ ests in De velopment
  968  
  969   >Note: thi s feature  is availab le with `r eact-scrip ts@0.2.3`  and higher .
  970  
  971   People oft en serve t he front-e nd React a pp from th e same hos t and port  as their  backend im plementati on.<br>
  972   For exampl e, a produ ction setu p might lo ok like th is after t he app is  deployed:
  973  
  974   ```
  975   /              - stat ic server  returns in dex.html w ith React  app
  976   /todos         - stat ic server  returns in dex.html w ith React  app
  977   /api/todos     - serv er handles  any /api/ * requests  using the  backend i mplementat ion
  978   ```
  979  
  980   Such setup  is **not* * required . However,  if you ** do** have  a setup li ke this, i t is conve nient to w rite reque sts like ` fetch('/ap i/todos')`  without w orrying ab out redire cting them  to anothe r host or  port durin g developm ent.
  981  
  982   To tell th e developm ent server  to proxy  any unknow n requests  to your A PI server  in develop ment, add  a `proxy`  field to y our `packa ge.json`,  for exampl e:
  983  
  984   ```js
  985     "proxy":  "http://l ocalhost:4 000",
  986   ```
  987  
  988   This way,  when you ` fetch('/ap i/todos')`  in develo pment, the  developme nt server  will recog nize that  it’s not  a static  asset, and  will prox y your req uest to `h ttp://loca lhost:4000 /api/todos ` as a fal lback. The  developme nt server  will **onl y** attemp t to send  requests w ithout `te xt/html` i n its `Acc ept` heade r to the p roxy.
  989  
  990   Convenient ly, this a voids [COR S issues]( http://sta ckoverflow .com/quest ions/21854 516/unders tanding-aj ax-cors-an d-security -considera tions) and  error mes sages like  this in d evelopment :
  991  
  992   ```
  993   Fetch API  cannot loa d http://l ocalhost:4 000/api/to dos. No 'A ccess-Cont rol-Allow- Origin' he ader is pr esent on t he request ed resourc e. Origin  'http://lo calhost:30 00' is the refore not  allowed a ccess. If  an opaque  response s erves your  needs, se t the requ est's mode  to 'no-co rs' to fet ch the res ource with  CORS disa bled.
  994   ```
  995  
  996   Keep in mi nd that `p roxy` only  has effec t in devel opment (wi th `npm st art`), and  it is up  to you to  ensure tha t URLs lik e `/api/to dos` point  to the ri ght thing  in product ion. You d on’t hav e to use t he `/api`  prefix. An y unrecogn ized reque st without  a `text/h tml` accep t header w ill be red irected to  the speci fied `prox y`.
  997  
  998   The `proxy ` option s upports HT TP, HTTPS  and WebSoc ket connec tions.<br>
  999   If the `pr oxy` optio n is **not ** flexibl e enough f or you, al ternativel y you can:
  1000  
  1001   * [Configu re the pro xy yoursel f](#config uring-the- proxy-manu ally)
  1002   * Enable C ORS on you r server ( [here’s  how to do  it for Exp ress](http ://enable- cors.org/s erver_expr essjs.html )).
  1003   * Use [env ironment v ariables]( #adding-cu stom-envir onment-var iables) to  inject th e right se rver host  and port i nto your a pp.
  1004  
  1005   ### "Inval id Host He ader" Erro rs After C onfiguring  Proxy
  1006  
  1007   When you e nable the  `proxy` op tion, you  opt into a  more stri ct set of  host check s. This is  necessary  because l eaving the  backend o pen to rem ote hosts  makes your  computer  vulnerable  to DNS re binding at tacks. The  issue is  explained  in [this a rticle](ht tps://medi um.com/web pack/webpa ck-dev-ser ver-middle ware-secur ity-issues -1489d9508 74a) and [ this issue ](https:// github.com /webpack/w ebpack-dev -server/is sues/887).
  1008  
  1009   This shoul dn’t aff ect you wh en develop ing on `lo calhost`,  but if you  develop r emotely li ke [descri bed here]( https://gi thub.com/f acebookinc ubator/cre ate-react- app/issues /2271), yo u will see  this erro r in the b rowser aft er enablin g the `pro xy` option :
  1010  
  1011   >Invalid H ost header
  1012  
  1013   To work ar ound it, y ou can spe cify your  public dev elopment h ost in a f ile called  `.env.dev elopment`  in the roo t of your  project:
  1014  
  1015   ```
  1016   HOST=mypub licdevhost .com
  1017   ```
  1018  
  1019   If you res tart the d evelopment  server no w and load  the app f rom the sp ecified ho st, it sho uld work.
  1020  
  1021   If you are  still hav ing issues  or if you ’re usin g a more e xotic envi ronment li ke a cloud  editor, y ou can byp ass the ho st check c ompletely  by adding  a line to  `.env.deve lopment.lo cal`. **No te that th is is dang erous and  exposes yo ur machine  to remote  code exec ution from  malicious  websites: **
  1022  
  1023   ```
  1024   # NOTE: TH IS IS DANG EROUS!
  1025   # It expos es your ma chine to a ttacks fro m the webs ites you v isit.
  1026   DANGEROUSL Y_DISABLE_ HOST_CHECK =true
  1027   ```
  1028  
  1029   We don’t  recommend  this appr oach.
  1030  
  1031   ### Config uring the  Proxy Manu ally
  1032  
  1033   >Note: thi s feature  is availab le with `r eact-scrip ts@1.0.0`  and higher .
  1034  
  1035   If the `pr oxy` optio n is **not ** flexibl e enough f or you, yo u can spec ify an obj ect in the  following  form (in  `package.j son`).<br>
  1036   You may al so specify  any confi guration v alue [`htt p-proxy-mi ddleware`] (https://g ithub.com/ chimurai/h ttp-proxy- middleware #options)  or [`http- proxy`](ht tps://gith ub.com/nod ejitsu/nod e-http-pro xy#options ) supports .
  1037   ```js
  1038   {
  1039     // ...
  1040     "proxy":  {
  1041       "/api" : {
  1042         "tar get": "<ur l>",
  1043         "ws" : true
  1044         // . ..
  1045       }
  1046     }
  1047     // ...
  1048   }
  1049   ```
  1050  
  1051   All reques ts matchin g this pat h will be  proxies, n o exceptio ns. This i ncludes re quests for  `text/htm l`, which  the standa rd `proxy`  option do es not pro xy.
  1052  
  1053   If you nee d to speci fy multipl e proxies,  you may d o so by sp ecifying a dditional  entries.
  1054   Matches ar e regular  expression s, so that  you can u se a regex p to match  multiple  paths.
  1055   ```js
  1056   {
  1057     // ...
  1058     "proxy":  {
  1059       // Mat ches any r equest sta rting with  /api
  1060       "/api" : {
  1061         "tar get": "<ur l_1>",
  1062         "ws" : true
  1063         // . ..
  1064       },
  1065       // Mat ches any r equest sta rting with  /foo
  1066       "/foo" : {
  1067         "tar get": "<ur l_2>",
  1068         "ssl ": true,
  1069         "pat hRewrite":  {
  1070           "^ /foo": "/f oo/beta"
  1071         }
  1072         // . ..
  1073       },
  1074       // Mat ches /bar/ abc.html b ut not /ba r/sub/def. html
  1075       "/bar/ [^/]*[.]ht ml": {
  1076         "tar get": "<ur l_3>",
  1077         // . ..
  1078       },
  1079       // Mat ches /baz/ abc.html a nd /baz/su b/def.html
  1080       "/baz/ .*/.*[.]ht ml": {
  1081         "tar get": "<ur l_4>"
  1082         // . ..
  1083       }
  1084     }
  1085     // ...
  1086   }
  1087   ```
  1088  
  1089   ### Config uring a We bSocket Pr oxy
  1090  
  1091   When setti ng up a We bSocket pr oxy, there  are a som e extra co nsideratio ns to be a ware of.
  1092  
  1093   If you’r e using a  WebSocket  engine lik e [Socket. io](https: //socket.i o/), you m ust have a  Socket.io  server ru nning that  you can u se as the  proxy targ et. Socket .io will n ot work wi th a stand ard WebSoc ket server . Specific ally, don' t expect S ocket.io t o work wit h [the web socket.org  echo test ](http://w ebsocket.o rg/echo.ht ml).
  1094  
  1095   There’s  some good  documentat ion availa ble for [s etting up  a Socket.i o server]( https://so cket.io/do cs/).
  1096  
  1097   Standard W ebSockets  **will** w ork with a  standard  WebSocket  server as  well as th e websocke t.org echo  test. You  can use l ibraries l ike [ws](h ttps://git hub.com/we bsockets/w s) for the  server, w ith [nativ e WebSocke ts in the  browser](h ttps://dev eloper.moz illa.org/e n-US/docs/ Web/API/We bSocket).
  1098  
  1099   Either way , you can  proxy WebS ocket requ ests manua lly in `pa ckage.json `:
  1100  
  1101   ```js
  1102   {
  1103     // ...
  1104     "proxy":  {
  1105       "/sock et": {
  1106         // Y our compat ible WebSo cket serve r
  1107         "tar get": "ws: //<socket_ url>",
  1108         // T ell http-p roxy-middl eware that  this is a  WebSocket  proxy.
  1109         // A lso allows  you to pr oxy WebSoc ket reques ts without  an additi onal HTTP  request
  1110         // h ttps://git hub.com/ch imurai/htt p-proxy-mi ddleware#e xternal-we bsocket-up grade
  1111         "ws" : true
  1112         // . ..
  1113       }
  1114     }
  1115     // ...
  1116   }
  1117   ```
  1118  
  1119   ## Using H TTPS in De velopment
  1120  
  1121   >Note: thi s feature  is availab le with `r eact-scrip ts@0.4.0`  and higher .
  1122  
  1123   You may re quire the  dev server  to serve  pages over  HTTPS. On e particul ar case wh ere this c ould be us eful is wh en using [ the "proxy " feature] (#proxying -api-reque sts-in-dev elopment)  to proxy r equests to  an API se rver when  that API s erver is i tself serv ing HTTPS.
  1124  
  1125   To do this , set the  `HTTPS` en vironment  variable t o `true`,  then start  the dev s erver as u sual with  `npm start `:
  1126  
  1127   #### Windo ws (cmd.ex e)
  1128  
  1129   ```cmd
  1130   set HTTPS= true&&npm  start
  1131   ```
  1132  
  1133   (Note: the  lack of w hitespace  is intenti onal.)
  1134  
  1135   #### Linux , macOS (B ash)
  1136  
  1137   ```bash
  1138   HTTPS=true  npm start
  1139   ```
  1140  
  1141   Note that  the server  will use  a self-sig ned certif icate, so  your web b rowser wil l almost d efinitely  display a  warning up on accessi ng the pag e.
  1142  
  1143   ## Generat ing Dynami c `<meta>`  Tags on t he Server
  1144  
  1145   Since Crea te React A pp doesn†™t support  server re ndering, y ou might b e wonderin g how to m ake `<meta >` tags dy namic and  reflect th e current  URL. To so lve this,  we recomme nd to add  placeholde rs into th e HTML, li ke this:
  1146  
  1147   ```html
  1148   <!doctype  html>
  1149   <html lang ="en">
  1150     <head>
  1151       <meta  property=" og:title"  content="_ _OG_TITLE_ _">
  1152       <meta  property=" og:descrip tion" cont ent="__OG_ DESCRIPTIO N__">
  1153   ```
  1154  
  1155   Then, on t he server,  regardles s of the b ackend you  use, you  can read ` index.html ` into mem ory and re place `__O G_TITLE__` , `__OG_DE SCRIPTION_ _`, and an y other pl aceholders  with valu es dependi ng on the  current UR L. Just ma ke sure to  sanitize  and escape  the inter polated va lues so th at they ar e safe to  embed into  HTML!
  1156  
  1157   If you use  a Node se rver, you  can even s hare the r oute match ing logic  between th e client a nd the ser ver. Howev er duplica ting it al so works f ine in sim ple cases.
  1158  
  1159   ## Pre-Ren dering int o Static H TML Files
  1160  
  1161   If you’r e hosting  your `buil d` with a  static hos ting provi der you ca n use [rea ct-snapsho t](https:/ /www.npmjs .com/packa ge/react-s napshot) o r [react-s nap](https ://github. com/stereo booster/re act-snap)  to generat e HTML pag es for eac h route, o r relative  link, in  your appli cation. Th ese pages  will then  seamlessly  become ac tive, or â €œhydrated â€?, when  the JavaSc ript bundl e has load ed.
  1162  
  1163   There are  also oppor tunities t o use this  outside o f static h osting, to  take the  pressure o ff the ser ver when g enerating  and cachin g routes.
  1164  
  1165   The primar y benefit  of pre-ren dering is  that you g et the cor e content  of each pa ge _with_  the HTML p ayload—r egardless  of whether  or not yo ur JavaScr ipt bundle  successfu lly downlo ads. It al so increas es the lik elihood th at each ro ute of you r applicat ion will b e picked u p by searc h engines.
  1166  
  1167   You can re ad more ab out [zero- configurat ion pre-re ndering (a lso called  snapshott ing) here] (https://m edium.com/ superhighf ives/an-al most-stati c-stack-6d f0a2791319 ).
  1168  
  1169   ## Injecti ng Data fr om the Ser ver into t he Page
  1170  
  1171   Similarly  to the pre vious sect ion, you c an leave s ome placeh olders in  the HTML t hat inject  global va riables, f or example :
  1172  
  1173   ```js
  1174   <!doctype  html>
  1175   <html lang ="en">
  1176     <head>
  1177       <scrip t>
  1178         wind ow.SERVER_ DATA = __S ERVER_DATA __;
  1179       </scri pt>
  1180   ```
  1181  
  1182   Then, on t he server,  you can r eplace `__ SERVER_DAT A__` with  a JSON of  real data  right befo re sending  the respo nse. The c lient code  can then  read `wind ow.SERVER_ DATA` to u se it. **M ake sure t o [sanitiz e the JSON  before se nding it t o the clie nt](https: //medium.c om/node-se curity/the -most-comm on-xss-vul nerability -in-react- js-applica tions-2bdf fbcc1fa0)  as it make s your app  vulnerabl e to XSS a ttacks.**
  1183  
  1184   ## Running  Tests
  1185  
  1186   >Note: thi s feature  is availab le with `r eact-scrip ts@0.3.0`  and higher .<br>
  1187   >[Read the  migration  guide to  learn how  to enable  it in olde r projects !](https:/ /github.co m/facebook incubator/ create-rea ct-app/blo b/master/C HANGELOG.m d#migratin g-from-023 -to-030)
  1188  
  1189   Create Rea ct App use s [Jest](h ttps://fac ebook.gith ub.io/jest /) as its  test runne r. To prep are for th is integra tion, we d id a [majo r revamp]( https://fa cebook.git hub.io/jes t/blog/201 6/09/01/je st-15.html ) of Jest  so if you  heard bad  things abo ut it year s ago, giv e it anoth er try.
  1190  
  1191   Jest is a  Node-based  runner. T his means  that the t ests alway s run in a  Node envi ronment an d not in a  real brow ser. This  lets us en able fast  iteration  speed and  prevent fl akiness.
  1192  
  1193   While Jest  provides  browser gl obals such  as `windo w` thanks  to [jsdom] (https://g ithub.com/ tmpvar/jsd om), they  are only a pproximati ons of the  real brow ser behavi or. Jest i s intended  to be use d for unit  tests of  your logic  and your  components  rather th an the DOM  quirks.
  1194  
  1195   We recomme nd that yo u use a se parate too l for brow ser end-to -end tests  if you ne ed them. T hey are be yond the s cope of Cr eate React  App.
  1196  
  1197   ### Filena me Convent ions
  1198  
  1199   Jest will  look for t est files  with any o f the foll owing popu lar naming  conventio ns:
  1200  
  1201   * Files wi th `.js` s uffix in ` __tests__`  folders.
  1202   * Files wi th `.test. js` suffix .
  1203   * Files wi th `.spec. js` suffix .
  1204  
  1205   The `.test .js` / `.s pec.js` fi les (or th e `__tests __` folder s) can be  located at  any depth  under the  `src` top  level fol der.
  1206  
  1207   We recomme nd to put  the test f iles (or ` __tests__`  folders)  next to th e code the y are test ing so tha t relative  imports a ppear shor ter. For e xample, if  `App.test .js` and ` App.js` ar e in the s ame folder , the test  just need s to `impo rt App fro m './App'`  instead o f a long r elative pa th. Coloca tion also  helps find  tests mor e quickly  in larger  projects.
  1208  
  1209   ### Comman d Line Int erface
  1210  
  1211   When you r un `npm te st`, Jest  will launc h in the w atch mode.  Every tim e you save  a file, i t will re- run the te sts, just  like `npm  start` rec ompiles th e code.
  1212  
  1213   The watche r includes  an intera ctive comm and-line i nterface w ith the ab ility to r un all tes ts, or foc us on a se arch patte rn. It is  designed t his way so  that you  can keep i t open and  enjoy fas t re-runs.  You can l earn the c ommands fr om the â€œ Watch Usag eâ€? note  that the w atcher pri nts after  every run:
  1214  
  1215   ![Jest wat ch mode](h ttp://face book.githu b.io/jest/ img/blog/1 5-watch.gi f)
  1216  
  1217   ### Versio n Control  Integratio n
  1218  
  1219   By default , when you  run `npm  test`, Jes t will onl y run the  tests rela ted to fil es changed  since the  last comm it. This i s an optim ization de signed to  make your  tests run  fast regar dless of h ow many te sts you ha ve. Howeve r it assum es that yo u don’t  often comm it the cod e that doe sn’t pas s the test s.
  1220  
  1221   Jest will  always exp licitly me ntion that  it only r an tests r elated to  the files  changed si nce the la st commit.  You can a lso press  `a` in the  watch mod e to force  Jest to r un all tes ts.
  1222  
  1223   Jest will  always run  all tests  on a [con tinuous in tegration] (#continuo us-integra tion) serv er or if t he project  is not in side a Git  or Mercur ial reposi tory.
  1224  
  1225   ### Writin g Tests
  1226  
  1227   To create  tests, add  `it()` (o r `test()` ) blocks w ith the na me of the  test and i ts code. Y ou may opt ionally wr ap them in  `describe ()` blocks  for logic al groupin g but this  is neithe r required  nor recom mended.
  1228  
  1229   Jest provi des a buil t-in `expe ct()` glob al functio n for maki ng asserti ons. A bas ic test co uld look l ike this:
  1230  
  1231   ```js
  1232   import sum  from './s um';
  1233  
  1234   it('sums n umbers', ( ) => {
  1235     expect(s um(1, 2)). toEqual(3) ;
  1236     expect(s um(2, 2)). toEqual(4) ;
  1237   });
  1238   ```
  1239  
  1240   All `expec t()` match ers suppor ted by Jes t are [ext ensively d ocumented  here](http s://facebo ok.github. io/jest/do cs/en/expe ct.html#co ntent).<br >
  1241   You can al so use [`j est.fn()`  and `expec t(fn).toBe Called()`] (https://f acebook.gi thub.io/je st/docs/en /expect.ht ml#tohaveb eencalled)  to create  â€œspiesâ €? or mock  functions .
  1242  
  1243   ### Testin g Componen ts
  1244  
  1245   There is a  broad spe ctrum of c omponent t esting tec hniques. T hey range  from a â€œ smoke test â€? verify ing that a  component  renders w ithout thr owing, to  shallow re ndering an d testing  some of th e output,  to full re ndering an d testing  component  lifecycle  and state  changes.
  1246  
  1247   Different  projects c hoose diff erent test ing tradeo ffs based  on how oft en compone nts change , and how  much logic  they cont ain. If yo u haven’ t decided  on a testi ng strateg y yet, we  recommend  that you s tart with  creating s imple smok e tests fo r your com ponents:
  1248  
  1249   ```js
  1250   import Rea ct from 'r eact';
  1251   import Rea ctDOM from  'react-do m';
  1252   import App  from './A pp';
  1253  
  1254   it('render s without  crashing',  () => {
  1255     const di v = docume nt.createE lement('di v');
  1256     ReactDOM .render(<A pp />, div );
  1257   });
  1258   ```
  1259  
  1260   This test  mounts a c omponent a nd makes s ure that i t didn’t  throw dur ing render ing. Tests  like this  provide a  lot value  with very  little ef fort so th ey are gre at as a st arting poi nt, and th is is the  test you w ill find i n `src/App .test.js`.
  1261  
  1262   When you e ncounter b ugs caused  by changi ng compone nts, you w ill gain a  deeper in sight into  which par ts of them  are worth  testing i n your app lication.  This might  be a good  time to i ntroduce m ore specif ic tests a sserting s pecific ex pected out put or beh avior.
  1263  
  1264   If you’d  like to t est compon ents in is olation fr om the chi ld compone nts they r ender, we  recommend  using [`sh allow()` r endering A PI](http:/ /airbnb.io /enzyme/do cs/api/sha llow.html)  from [Enz yme](http: //airbnb.i o/enzyme/) . To insta ll it, run :
  1265  
  1266   ```sh
  1267   npm instal l --save e nzyme enzy me-adapter -react-16  react-test -renderer
  1268   ```
  1269  
  1270   Alternativ ely you ma y use `yar n`:
  1271  
  1272   ```sh
  1273   yarn add e nzyme enzy me-adapter -react-16  react-test -renderer
  1274   ```
  1275  
  1276   As of Enzy me 3, you  will need  to install  Enzyme al ong with a n Adapter  correspond ing to the  version o f React yo u are usin g. (The ex amples abo ve use the  adapter f or React 1 6.)
  1277  
  1278   The adapte r will als o need to  be configu red in you r [global  setup file ](#initial izing-test -environme nt):
  1279  
  1280   #### `src/ setupTests .js`
  1281   ```js
  1282   import { c onfigure }  from 'enz yme';
  1283   import Ada pter from  'enzyme-ad apter-reac t-16';
  1284  
  1285   configure( { adapter:  new Adapt er() });
  1286   ```
  1287  
  1288   Now you ca n write a  smoke test  with it:
  1289  
  1290   ```js
  1291   import Rea ct from 'r eact';
  1292   import { s hallow } f rom 'enzym e';
  1293   import App  from './A pp';
  1294  
  1295   it('render s without  crashing',  () => {
  1296     shallow( <App />);
  1297   });
  1298   ```
  1299  
  1300   Unlike the  previous  smoke test  using `Re actDOM.ren der()`, th is test on ly renders  `<App>` a nd doesn†™t go deep er. For ex ample, eve n if `<App >` itself  renders a  `<Button>`  that thro ws, this t est will p ass. Shall ow renderi ng is grea t for isol ated unit  tests, but  you may s till want  to create  some full  rendering  tests to e nsure the  components  integrate  correctly . Enzyme s upports [f ull render ing with ` mount()`]( http://air bnb.io/enz yme/docs/a pi/mount.h tml), and  you can al so use it  for testin g state ch anges and  component  lifecycle.
  1301  
  1302   You can re ad the [En zyme docum entation]( http://air bnb.io/enz yme/) for  more testi ng techniq ues. Enzym e document ation uses  Chai and  Sinon for  assertions  but you d on’t hav e to use t hem becaus e Jest pro vides buil t-in `expe ct()` and  `jest.fn() ` for spie s.
  1303  
  1304   Here is an  example f rom Enzyme  documenta tion that  asserts sp ecific out put, rewri tten to us e Jest mat chers:
  1305  
  1306   ```js
  1307   import Rea ct from 'r eact';
  1308   import { s hallow } f rom 'enzym e';
  1309   import App  from './A pp';
  1310  
  1311   it('render s welcome  message',  () => {
  1312     const wr apper = sh allow(<App  />);
  1313     const we lcome = <h 2>Welcome  to React</ h2>;
  1314     // expec t(wrapper. contains(w elcome)).t o.equal(tr ue);
  1315     expect(w rapper.con tains(welc ome)).toEq ual(true);
  1316   });
  1317   ```
  1318  
  1319   All Jest m atchers ar e [extensi vely docum ented here ](http://f acebook.gi thub.io/je st/docs/en /expect.ht ml).<br>
  1320   Neverthele ss you can  use a thi rd-party a ssertion l ibrary lik e [Chai](h ttp://chai js.com/) i f you want  to, as de scribed be low.
  1321  
  1322   Additional ly, you mi ght find [ jest-enzym e](https:/ /github.co m/blaineka sten/enzym e-matchers ) helpful  to simplif y your tes ts with re adable mat chers. The  above `co ntains` co de can be  written si mpler with  jest-enzy me.
  1323  
  1324   ```js
  1325   expect(wra pper).toCo ntainReact (welcome)
  1326   ```
  1327  
  1328   To enable  this, inst all `jest- enzyme`:
  1329  
  1330   ```sh
  1331   npm instal l --save j est-enzyme
  1332   ```
  1333  
  1334   Alternativ ely you ma y use `yar n`:
  1335  
  1336   ```sh
  1337   yarn add j est-enzyme
  1338   ```
  1339  
  1340   Import it  in [`src/s etupTests. js`](#init ializing-t est-enviro nment) to  make its m atchers av ailable in  every tes t:
  1341  
  1342   ```js
  1343   import 'je st-enzyme' ;
  1344   ```
  1345  
  1346   ### Using  Third Part y Assertio n Librarie s
  1347  
  1348   We recomme nd that yo u use `exp ect()` for  assertion s and `jes t.fn()` fo r spies. I f you are  having iss ues with t hem please  [file tho se against  Jest](htt ps://githu b.com/face book/jest/ issues/new ), and weâ €™ll fix t hem. We in tend to ke ep making  them bette r for Reac t, support ing, for e xample, [p retty-prin ting React  elements  as JSX](ht tps://gith ub.com/fac ebook/jest /pull/1566 ).
  1349  
  1350   However, i f you are  used to ot her librar ies, such  as [Chai]( http://cha ijs.com/)  and [Sinon ](http://s inonjs.org /), or if  you have e xisting co de using t hem that y ou’d lik e to port  over, you  can import  them norm ally like  this:
  1351  
  1352   ```js
  1353   import sin on from 's inon';
  1354   import { e xpect } fr om 'chai';
  1355   ```
  1356  
  1357   and then u se them in  your test s like you  normally  do.
  1358  
  1359   ### Initia lizing Tes t Environm ent
  1360  
  1361   >Note: thi s feature  is availab le with `r eact-scrip ts@0.4.0`  and higher .
  1362  
  1363   If your ap p uses a b rowser API  that you  need to mo ck in your  tests or  if you jus t need a g lobal setu p before r unning you r tests, a dd a `src/ setupTests .js` to yo ur project . It will  be automat ically exe cuted befo re running  your test s.
  1364  
  1365   For exampl e:
  1366  
  1367   #### `src/ setupTests .js`
  1368   ```js
  1369   const loca lStorageMo ck = {
  1370     getItem:  jest.fn() ,
  1371     setItem:  jest.fn() ,
  1372     clear: j est.fn()
  1373   };
  1374   global.loc alStorage  = localSto rageMock
  1375   ```
  1376  
  1377   ### Focusi ng and Exc luding Tes ts
  1378  
  1379   You can re place `it( )` with `x it()` to t emporarily  exclude a  test from  being exe cuted.<br>
  1380   Similarly,  `fit()` l ets you fo cus on a s pecific te st without  running a ny other t ests.
  1381  
  1382   ### Covera ge Reporti ng
  1383  
  1384   Jest has a n integrat ed coverag e reporter  that work s well wit h ES6 and  requires n o configur ation.<br>
  1385   Run `npm t est -- --c overage` ( note extra  `--` in t he middle)  to includ e a covera ge report  like this:
  1386  
  1387   ![coverage  report](h ttp://i.im gur.com/5b FhnTS.png)
  1388  
  1389   Note that  tests run  much slowe r with cov erage so i t is recom mended to  run it sep arately fr om your no rmal workf low.
  1390  
  1391   #### Confi guration
  1392  
  1393   The defaul t Jest cov erage conf iguration  can be ove rriden by  adding any  of the fo llowing su pported ke ys to a Je st config  in your pa ckage.json .
  1394  
  1395   Supported  overrides:
  1396    - [`colle ctCoverage From`](htt ps://faceb ook.github .io/jest/d ocs/en/con figuration .html#coll ectcoverag efrom-arra y)
  1397    - [`cover ageReporte rs`](https ://faceboo k.github.i o/jest/doc s/en/confi guration.h tml#covera gereporter s-array-st ring)
  1398    - [`cover ageThresho ld`](https ://faceboo k.github.i o/jest/doc s/en/confi guration.h tml#covera gethreshol d-object)
  1399    - [`snaps hotSeriali zers`](htt ps://faceb ook.github .io/jest/d ocs/en/con figuration .html#snap shotserial izers-arra y-string)
  1400  
  1401   Example pa ckage.json :
  1402  
  1403   ```json
  1404   {
  1405     "name":  "your-pack age",
  1406     "jest":  {
  1407       "colle ctCoverage From" : [
  1408         "src /**/*.{js, jsx}",
  1409         "!<r ootDir>/no de_modules /",
  1410         "!<r ootDir>/pa th/to/dir/ "
  1411       ],
  1412       "cover ageThresho ld": {
  1413         "glo bal": {
  1414           "b ranches":  90,
  1415           "f unctions":  90,
  1416           "l ines": 90,
  1417           "s tatements" : 90
  1418         }
  1419       },
  1420       "cover ageReporte rs": ["tex t"],
  1421       "snaps hotSeriali zers": ["m y-serializ er-module" ]
  1422     }
  1423   }
  1424   ```
  1425  
  1426   ### Contin uous Integ ration
  1427  
  1428   By default  `npm test ` runs the  watcher w ith intera ctive CLI.  However,  you can fo rce it to  run tests  once and f inish the  process by  setting a n environm ent variab le called  `CI`.
  1429  
  1430   When creat ing a buil d of your  applicatio n with `np m run buil d` linter  warnings a re not che cked by de fault. Lik e `npm tes t`, you ca n force th e build to  perform a  linter wa rning chec k by setti ng the env ironment v ariable `C I`. If any  warnings  are encoun tered then  the build  fails.
  1431  
  1432   Popular CI  servers a lready set  the envir onment var iable `CI`  by defaul t but you  can do thi s yourself  too:
  1433  
  1434   ### On CI  servers
  1435   #### Travi s CI
  1436  
  1437   1. Followi ng the [Tr avis Getti ng started ](https:// docs.travi s-ci.com/u ser/gettin g-started/ ) guide fo r syncing  your GitHu b reposito ry with Tr avis.  You  may need  to initial ize some s ettings ma nually in  your [prof ile](https ://travis- ci.org/pro file) page .
  1438   1. Add a ` .travis.ym l` file to  your git  repository .
  1439   ```
  1440   language:  node_js
  1441   node_js:
  1442     - 6
  1443   cache:
  1444     director ies:
  1445       - node _modules
  1446   script:
  1447     - npm ru n build
  1448     - npm te st
  1449   ```
  1450   1. Trigger  your firs t build wi th a git p ush.
  1451   1. [Custom ize your T ravis CI B uild](http s://docs.t ravis-ci.c om/user/cu stomizing- the-build/ ) if neede d.
  1452  
  1453   #### Circl eCI
  1454  
  1455   Follow [th is article ](https:// medium.com /@knowbody /circleci- and-zeits- now-sh-c9b 7eebcd3c1)  to set up  CircleCI  with a Cre ate React  App projec t.
  1456  
  1457   ### On you r own envi ronment
  1458   ##### Wind ows (cmd.e xe)
  1459  
  1460   ```cmd
  1461   set CI=tru e&&npm tes t
  1462   ```
  1463  
  1464   ```cmd
  1465   set CI=tru e&&npm run  build
  1466   ```
  1467  
  1468   (Note: the  lack of w hitespace  is intenti onal.)
  1469  
  1470   ##### Linu x, macOS ( Bash)
  1471  
  1472   ```bash
  1473   CI=true np m test
  1474   ```
  1475  
  1476   ```bash
  1477   CI=true np m run buil d
  1478   ```
  1479  
  1480   The test c ommand wil l force Je st to run  tests once  instead o f launchin g the watc her.
  1481  
  1482   >  If you  find yours elf doing  this often  in develo pment, ple ase [file  an issue]( https://gi thub.com/f acebookinc ubator/cre ate-react- app/issues /new) to t ell us abo ut your us e case bec ause we wa nt to make  watcher t he best ex perience a nd are ope n to chang ing how it  works to  accommodat e more wor kflows.
  1483  
  1484   The build  command wi ll check f or linter  warnings a nd fail if  any are f ound.
  1485  
  1486   ### Disabl ing jsdom
  1487  
  1488   By default , the `pac kage.json`  of the ge nerated pr oject look s like thi s:
  1489  
  1490   ```js
  1491     "scripts ": {
  1492       "start ": "react- scripts st art",
  1493       "build ": "react- scripts bu ild",
  1494       "test" : "react-s cripts tes t --env=js dom"
  1495   ```
  1496  
  1497   If you kno w that non e of your  tests depe nd on [jsd om](https: //github.c om/tmpvar/ jsdom), yo u can safe ly remove  `--env=jsd om`, and y our tests  will run f aster:
  1498  
  1499   ```diff
  1500     "scripts ": {
  1501       "start ": "react- scripts st art",
  1502       "build ": "react- scripts bu ild",
  1503   -   "test" : "react-s cripts tes t --env=js dom"
  1504   +   "test" : "react-s cripts tes t"
  1505   ```
  1506  
  1507   To help yo u make up  your mind,  here is a  list of A PIs that * *need jsdo m**:
  1508  
  1509   * Any brow ser global s like `wi ndow` and  `document`
  1510   * [`ReactD OM.render( )`](https: //facebook .github.io /react/doc s/top-leve l-api.html #reactdom. render)
  1511   * [`TestUt ils.render IntoDocume nt()`](htt ps://faceb ook.github .io/react/ docs/test- utils.html #renderint odocument)  ([a short cut](https ://github. com/facebo ok/react/b lob/34761c f9a252964a bfaab6faf7 4d473ad95d 1f21/src/t est/ReactT estUtils.j s#L83-L91)  for the a bove)
  1512   * [`mount( )`](http:/ /airbnb.io /enzyme/do cs/api/mou nt.html) i n [Enzyme] (http://ai rbnb.io/en zyme/index .html)
  1513  
  1514   In contras t, **jsdom  is not ne eded** for  the follo wing APIs:
  1515  
  1516   * [`TestUt ils.create Renderer() `](https:/ /facebook. github.io/ react/docs /test-util s.html#sha llow-rende ring) (sha llow rende ring)
  1517   * [`shallo w()`](http ://airbnb. io/enzyme/ docs/api/s hallow.htm l) in [Enz yme](http: //airbnb.i o/enzyme/i ndex.html)
  1518  
  1519   Finally, j sdom is al so not nee ded for [s napshot te sting](htt p://facebo ok.github. io/jest/bl og/2016/07 /27/jest-1 4.html).
  1520  
  1521   ### Snapsh ot Testing
  1522  
  1523   Snapshot t esting is  a feature  of Jest th at automat ically gen erates tex t snapshot s of your  components  and saves  them on t he disk so  if the UI  output ch anges, you  get notif ied withou t manually  writing a ny asserti ons on the  component  output. [ Read more  about snap shot testi ng.](http: //facebook .github.io /jest/blog /2016/07/2 7/jest-14. html)
  1524  
  1525   ### Editor  Integrati on
  1526  
  1527   If you use  [Visual S tudio Code ](https:// code.visua lstudio.co m), there  is a [Jest  extension ](https:// github.com /orta/vsco de-jest) w hich works  with Crea te React A pp out of  the box. T his provid es a lot o f IDE-like  features  while usin g a text e ditor: sho wing the s tatus of a  test run  with poten tial fail  messages i nline, sta rting and  stopping t he watcher  automatic ally, and  offering o ne-click s napshot up dates.
  1528  
  1529   ![VS Code  Jest Previ ew](https: //cloud.gi thubuserco ntent.com/ assets/490 38/2079534 9/a032308a -b7c8-11e6 -9b34-7eea c781003f.p ng)
  1530  
  1531   ## Develop ing Compon ents in Is olation
  1532  
  1533   Usually, i n an app,  you have a  lot of UI  component s, and eac h of them  has many d ifferent s tates.
  1534   For an exa mple, a si mple butto n componen t could ha ve followi ng states:
  1535  
  1536   * In a reg ular state , with a t ext label.
  1537   * In the d isabled mo de.
  1538   * In a loa ding state .
  1539  
  1540   Usually, i t’s hard  to see th ese states  without r unning a s ample app  or some ex amples.
  1541  
  1542   Create Rea ct App doe sn’t inc lude any t ools for t his by def ault, but  you can ea sily add [ Storybook  for React] (https://s torybook.j s.org) ([s ource](htt ps://githu b.com/stor ybooks/sto rybook)) o r [React S tyleguidis t](https:/ /react-sty leguidist. js.org/) ( [source](h ttps://git hub.com/st yleguidist /react-sty leguidist) ) to your  project. * *These are  third-par ty tools t hat let yo u develop  components  and see a ll their s tates in i solation f rom your a pp**.
  1543  
  1544   ![Storyboo k for Reac t Demo](ht tp://i.img ur.com/7CI AWpB.gif)
  1545  
  1546   You can al so deploy  your Story book or st yle guide  as a stati c app. Thi s way, eve ryone in y our team c an view an d review d ifferent s tates of U I componen ts without  starting  a backend  server or  creating a n account  in your ap p.
  1547  
  1548   ### Gettin g Started  with Story book
  1549  
  1550   Storybook  is a devel opment env ironment f or React U I componen ts. It all ows you to  browse a  component  library, v iew the di fferent st ates of ea ch compone nt, and in teractivel y develop  and test c omponents.
  1551  
  1552   First, ins tall the f ollowing n pm package  globally:
  1553  
  1554   ```sh
  1555   npm instal l -g @stor ybook/cli
  1556   ```
  1557  
  1558   Then, run  the follow ing comman d inside y our app’ s director y:
  1559  
  1560   ```sh
  1561   getstorybo ok
  1562   ```
  1563  
  1564   After that , follow t he instruc tions on t he screen.
  1565  
  1566   Learn more  about Rea ct Storybo ok:
  1567  
  1568   * Screenca st: [Getti ng Started  with Reac t Storyboo k](https:/ /egghead.i o/lessons/ react-gett ing-starte d-with-rea ct-storybo ok)
  1569   * [GitHub  Repo](http s://github .com/story books/stor ybook)
  1570   * [Documen tation](ht tps://stor ybook.js.o rg/basics/ introducti on/)
  1571   * [Snapsho t Testing  UI](https: //github.c om/storybo oks/storyb ook/tree/m aster/addo ns/storysh ots) with  Storybook  + addon/st oryshot
  1572  
  1573   ### Gettin g Started  with Style guidist
  1574  
  1575   Styleguidi st combine s a style  guide, whe re all you r componen ts are pre sented on  a single p age with t heir props  documenta tion and u sage examp les, with  an environ ment for d eveloping  components  in isolat ion, simil ar to Stor ybook. In  Styleguidi st you wri te example s in Markd own, where  each code  snippet i s rendered  as a live  editable  playground .
  1576  
  1577   First, ins tall Style guidist:
  1578  
  1579   ```sh
  1580   npm instal l --save r eact-style guidist
  1581   ```
  1582  
  1583   Alternativ ely you ma y use `yar n`:
  1584  
  1585   ```sh
  1586   yarn add r eact-style guidist
  1587   ```
  1588  
  1589   Then, add  these scri pts to you r `package .json`:
  1590  
  1591   ```diff
  1592      "script s": {
  1593   +    "styl eguide": " styleguidi st server" ,
  1594   +    "styl eguide:bui ld": "styl eguidist b uild",
  1595        "star t": "react -scripts s tart",
  1596   ```
  1597  
  1598   Then, run  the follow ing comman d inside y our app’ s director y:
  1599  
  1600   ```sh
  1601   npm run st yleguide
  1602   ```
  1603  
  1604   After that , follow t he instruc tions on t he screen.
  1605  
  1606   Learn more  about Rea ct Stylegu idist:
  1607  
  1608   * [GitHub  Repo](http s://github .com/style guidist/re act-styleg uidist)
  1609   * [Documen tation](ht tps://reac t-stylegui dist.js.or g/docs/get ting-start ed.html)
  1610  
  1611   ## Making  a Progress ive Web Ap p
  1612  
  1613   By default , the prod uction bui ld is a fu lly functi onal, offl ine-first
  1614   [Progressi ve Web App ](https:// developers .google.co m/web/prog ressive-we b-apps/).
  1615  
  1616   Progressiv e Web Apps  are faste r and more  reliable  than tradi tional web  pages, an d provide  an engagin g mobile e xperience:
  1617  
  1618    * All sta tic site a ssets are  cached so  that your  page loads  fast on s ubsequent  visits, re gardless o f network  connectivi ty (such a s 2G or 3G ). Updates  are downl oaded in t he backgro und.
  1619    * Your ap p will wor k regardle ss of netw ork state,  even if o ffline. Th is means y our users  will be ab le to use  your app a t 10,000 f eet and on  the subwa y.
  1620    * On mobi le devices , your app  can be ad ded direct ly to the  user's hom e screen,  app icon a nd all. Yo u can also  re-engage  users usi ng web **p ush notifi cations**.  This elim inates the  need for  the app st ore.
  1621  
  1622   The [`sw-p recache-we bpack-plug in`](https ://github. com/goldha nd/sw-prec ache-webpa ck-plugin)
  1623   is integra ted into p roduction  configurat ion,
  1624   and it wil l take car e of gener ating a se rvice work er file th at will au tomaticall y
  1625   precache a ll of your  local ass ets and ke ep them up  to date a s you depl oy updates .
  1626   The servic e worker w ill use a  [cache-fir st strateg y](https:/ /developer s.google.c om/web/fun damentals/ instant-an d-offline/ offline-co okbook/#ca che-fallin g-back-to- network)
  1627   for handli ng all req uests for  local asse ts, includ ing the in itial HTML , ensuring
  1628   that your  web app is  reliably  fast, even  on a slow  or unreli able netwo rk.
  1629  
  1630   ### Opting  Out of Ca ching
  1631  
  1632   If you wou ld prefer  not to ena ble servic e workers  prior to y our initia l
  1633   production  deploymen t, then re move the c all to `re gisterServ iceWorker( )`
  1634   from [`src /index.js` ](src/inde x.js).
  1635  
  1636   If you had  previousl y enabled  service wo rkers in y our produc tion deplo yment and
  1637   have decid ed that yo u would li ke to disa ble them f or all you r existing  users,
  1638   you can sw ap out the  call to ` registerSe rviceWorke r()` in
  1639   [`src/inde x.js`](src /index.js)  first by  modifying  the servic e worker i mport:
  1640   ```javascr ipt
  1641   import { u nregister  } from './ registerSe rviceWorke r';
  1642   ```
  1643   and then c all `unreg ister()` i nstead.
  1644   After the  user visit s a page t hat has `u nregister( )`,
  1645   the servic e worker w ill be uni nstalled.  Note that  depending  on how `/s ervice-wor ker.js` is  served,
  1646   it may tak e up to 24  hours for  the cache  to be inv alidated.
  1647  
  1648   ### Offlin e-First Co nsideratio ns
  1649  
  1650   1. Service  workers [ require HT TPS](https ://develop ers.google .com/web/f undamental s/getting- started/pr imers/serv ice-worker s#you_need _https),
  1651   although t o facilita te local t esting, th at policy
  1652   [does not  apply to ` localhost` ](http://s tackoverfl ow.com/que stions/341 60509/opti ons-for-te sting-serv ice-worker s-via-http /34161385# 34161385).
  1653   If your pr oduction w eb server  does not s upport HTT PS, then t he service  worker
  1654   registrati on will fa il, but th e rest of  your web a pp will re main funct ional.
  1655  
  1656   1. Service  workers a re [not cu rrently su pported](h ttps://jak earchibald .github.io /isservice workerread y/)
  1657   in all web  browsers.  Service w orker regi stration [ won't be a ttempted]( src/regist erServiceW orker.js)
  1658   on browser s that lac k support.
  1659  
  1660   1. The ser vice worke r is only  enabled in  the [prod uction env ironment]( #deploymen t),
  1661   e.g. the o utput of ` npm run bu ild`. It's  recommend ed that yo u do not e nable an
  1662   offline-fi rst servic e worker i n a develo pment envi ronment, a s it can l ead to
  1663   frustratio n when pre viously ca ched asset s are used  and do no t include  the latest
  1664   changes yo u've made  locally.
  1665  
  1666   1. If you  *need* to  test your  offline-fi rst servic e worker l ocally, bu ild
  1667   the applic ation (usi ng `npm ru n build`)  and run a  simple htt p server f rom your
  1668   build dire ctory. Aft er running  the build  script, ` create-rea ct-app` wi ll give
  1669   instructio ns for one  way to te st your pr oduction b uild local ly and the  [deployme nt instruc tions](#de ployment)  have
  1670   instructio ns for usi ng other m ethods. *B e sure to  always use  an
  1671   incognito  window to  avoid comp lications  with your  browser ca che.*
  1672  
  1673   1. If poss ible, conf igure your  productio n environm ent to ser ve the gen erated
  1674   `service-w orker.js`  [with HTTP  caching d isabled](h ttp://stac koverflow. com/questi ons/388439 70/service -worker-ja vascript-u pdate-freq uency-ever y-24-hours ).
  1675   If that's  not possib le—[GitH ub Pages]( #github-pa ges), for  instance,  does not
  1676   allow you  to change  the defaul t 10 minut e HTTP cac he lifetim e—then b e aware
  1677   that if yo u visit yo ur product ion site,  and then r evisit aga in before
  1678   `service-w orker.js`  has expire d from you r HTTP cac he, you'll  continue  to get
  1679   the previo usly cache d assets f rom the se rvice work er. If you  have an i mmediate
  1680   need to vi ew your up dated prod uction dep loyment, p erforming  a shift-re fresh
  1681   will tempo rarily dis able the s ervice wor ker and re trieve all  assets fr om the
  1682   network.
  1683  
  1684   1. Users a ren't alwa ys familia r with off line-first  web apps.  It can be  useful to
  1685   [let the u ser know]( https://de velopers.g oogle.com/ web/fundam entals/ins tant-and-o ffline/off line-ux#in form_the_u ser_when_t he_app_is_ ready_for_ offline_co nsumption)
  1686   when the s ervice wor ker has fi nished pop ulating yo ur caches  (showing a  "This web
  1687   app works  offline!"  message) a nd also le t them kno w when the  service w orker has
  1688   fetched th e latest u pdates tha t will be  available  the next t ime they l oad the
  1689   page (show ing a "New  content i s availabl e; please  refresh."  message).  Showing
  1690   this messa ges is cur rently lef t as an ex ercise to  the develo per, but a s a
  1691   starting p oint, you  can make u se of the  logic incl uded in [` src/regist erServiceW orker.js`] (src/regis terService Worker.js) , which
  1692   demonstrat es which s ervice wor ker lifecy cle events  to listen  for to de tect each
  1693   scenario,  and which  as a defau lt, just l ogs approp riate mess ages to th e
  1694   JavaScript  console.
  1695  
  1696   1. By defa ult, the g enerated s ervice wor ker file w ill not in tercept or  cache any
  1697   cross-orig in traffic , like HTT P [API req uests](#in tegrating- with-an-ap i-backend) ,
  1698   images, or  embeds lo aded from  a differen t domain.  If you wou ld like to  use a
  1699   runtime ca ching stra tegy for t hose reque sts, you c an [`eject `](#npm-ru n-eject)
  1700   and then c onfigure t he
  1701   [`runtimeC aching`](h ttps://git hub.com/Go ogleChrome /sw-precac he#runtime caching-ar rayobject)
  1702   option in  the `SWPre cacheWebpa ckPlugin`  section of
  1703   [`webpack. config.pro d.js`](../ config/web pack.confi g.prod.js) .
  1704  
  1705   ### Progre ssive Web  App Metada ta
  1706  
  1707   The defaul t configur ation incl udes a web  app manif est locate d at
  1708   [`public/m anifest.js on`](publi c/manifest .json), th at you can  customize  with
  1709   details sp ecific to  your web a pplication .
  1710  
  1711   When a use r adds a w eb app to  their home screen usi ng Chrome  or Firefox  on
  1712   Android, t he metadat a in [`man ifest.json `](public/ manifest.j son) deter mines what
  1713   icons, nam es, and br anding col ors to use  when the  web app is  displayed .
  1714   [The Web A pp Manifes t guide](h ttps://dev elopers.go ogle.com/w eb/fundame ntals/enga ge-and-ret ain/web-ap p-manifest /)
  1715   provides m ore contex t about wh at each fi eld means,  and how y our custom izations
  1716   will affec t your use rs' experi ence.
  1717  
  1718   ## Analyzi ng the Bun dle Size
  1719  
  1720   [Source ma p explorer ](https:// www.npmjs. com/packag e/source-m ap-explore r) analyze s
  1721   JavaScript  bundles u sing the s ource maps . This hel ps you und erstand wh ere code
  1722   bloat is c oming from .
  1723  
  1724   To add Sou rce map ex plorer to  a Create R eact App p roject, fo llow these  steps:
  1725  
  1726   ```sh
  1727   npm instal l --save s ource-map- explorer
  1728   ```
  1729  
  1730   Alternativ ely you ma y use `yar n`:
  1731  
  1732   ```sh
  1733   yarn add s ource-map- explorer
  1734   ```
  1735  
  1736   Then in `p ackage.jso n`, add th e followin g line to  `scripts`:
  1737  
  1738   ```diff
  1739      "script s": {
  1740   +    "anal yze": "sou rce-map-ex plorer bui ld/static/ js/main.*" ,
  1741        "star t": "react -scripts s tart",
  1742        "buil d": "react -scripts b uild",
  1743        "test ": "react- scripts te st --env=j sdom",
  1744   ```
  1745  
  1746   Then to an alyze the  bundle run  the produ ction buil d then run  the analy ze
  1747   script.
  1748  
  1749   ```
  1750   npm run bu ild
  1751   npm run an alyze
  1752   ```
  1753  
  1754   ## Deploym ent
  1755  
  1756   `npm run b uild` crea tes a `bui ld` direct ory with a  productio n build of  your app.  Set up yo ur favouri te HTTP se rver so th at a visit or to your  site is s erved `ind ex.html`,  and reques ts to stat ic paths l ike `/stat ic/js/main .<hash>.js ` are serv ed with th e contents  of the `/ static/js/ main.<hash >.js` file .
  1757  
  1758   ### Static  Server
  1759  
  1760   For enviro nments usi ng [Node]( https://no dejs.org/) , the easi est way to  handle th is would b e to insta ll [serve] (https://g ithub.com/ zeit/serve ) and let  it handle  the rest:
  1761  
  1762   ```sh
  1763   npm instal l -g serve
  1764   serve -s b uild
  1765   ```
  1766  
  1767   The last c ommand sho wn above w ill serve  your stati c site on  the port * *5000**. L ike many o f [serve]( https://gi thub.com/z eit/serve) ’s inter nal settin gs, the po rt can be  adjusted u sing the ` -p` or `-- port` flag s.
  1768  
  1769   Run this c ommand to  get a full  list of t he options  available :
  1770  
  1771   ```sh
  1772   serve -h
  1773   ```
  1774  
  1775   ### Other  Solutions
  1776  
  1777   You don’ t necessar ily need a  static se rver in or der to run  a Create  React App  project in  productio n. It work s just as  fine integ rated into  an existi ng dynamic  one.
  1778  
  1779   Here’s a  programma tic exampl e using [N ode](https ://nodejs. org/) and  [Express]( http://exp ressjs.com /):
  1780  
  1781   ```javascr ipt
  1782   const expr ess = requ ire('expre ss');
  1783   const path  = require ('path');
  1784   const app  = express( );
  1785  
  1786   app.use(ex press.stat ic(path.jo in(__dirna me, 'build ')));
  1787  
  1788   app.get('/ ', functio n (req, re s) {
  1789     res.send File(path. join(__dir name, 'bui ld', 'inde x.html'));
  1790   });
  1791  
  1792   app.listen (9000);
  1793   ```
  1794  
  1795   The choice  of your s erver soft ware isn†™t importa nt either.  Since Cre ate React  App is com pletely pl atform-agn ostic, the re’s no  need to ex plicitly u se Node.
  1796  
  1797   The `build ` folder w ith static  assets is  the only  output pro duced by C reate Reac t App.
  1798  
  1799   However th is is not  quite enou gh if you  use client -side rout ing. Read  the next s ection if  you want t o support  URLs like  `/todos/42 ` in your  single-pag e app.
  1800  
  1801   ### Servin g Apps wit h Client-S ide Routin g
  1802  
  1803   If you use  routers t hat use th e HTML5 [` pushState`  history A PI](https: //develope r.mozilla. org/en-US/ docs/Web/A PI/History _API#Addin g_and_modi fying_hist ory_entrie s) under t he hood (f or example , [React R outer](htt ps://githu b.com/Reac tTraining/ react-rout er) with ` browserHis tory`), ma ny static  file serve rs will fa il. For ex ample, if  you used R eact Route r with a r oute for ` /todos/42` , the deve lopment se rver will  respond to  `localhos t:3000/tod os/42` pro perly, but  an Expres s serving  a producti on build a s above wi ll not.
  1804  
  1805   This is be cause when  there is  a fresh pa ge load fo r a `/todo s/42`, the  server lo oks for th e file `bu ild/todos/ 42` and do es not fin d it. The  server nee ds to be c onfigured  to respond  to a requ est to `/t odos/42` b y serving  `index.htm l`. For ex ample, we  can amend  our Expres s example  above to s erve `inde x.html` fo r any unkn own paths:
  1806  
  1807   ```diff
  1808    app.use(e xpress.sta tic(path.j oin(__dirn ame, 'buil d')));
  1809  
  1810   -app.get(' /', functi on (req, r es) {
  1811   +app.get(' /*', funct ion (req,  res) {
  1812      res.sen dFile(path .join(__di rname, 'bu ild', 'ind ex.html')) ;
  1813    });
  1814   ```
  1815  
  1816   If you’r e using [A pache HTTP  Server](h ttps://htt pd.apache. org/), you  need to c reate a `. htaccess`  file in th e `public`  folder th at looks l ike this:
  1817  
  1818   ```
  1819       Option s -MultiVi ews
  1820       Rewrit eEngine On
  1821       Rewrit eCond %{RE QUEST_FILE NAME} !-f
  1822       Rewrit eRule ^ in dex.html [ QSA,L]
  1823   ```
  1824  
  1825   It will ge t copied t o the `bui ld` folder  when you  run `npm r un build`.  
  1826  
  1827   If you’r e using [A pache Tomc at](http:/ /tomcat.ap ache.org/) , you need  to follow  [this Sta ck Overflo w answer]( https://st ackoverflo w.com/a/41 249464/487 8474).
  1828  
  1829   Now reques ts to `/to dos/42` wi ll be hand led correc tly both i n developm ent and in  productio n.
  1830  
  1831   On a produ ction buil d, and in  a browser  that suppo rts [servi ce workers ](https:// developers .google.co m/web/fund amentals/g etting-sta rted/prime rs/service -workers),
  1832   the servic e worker w ill automa tically ha ndle all n avigation  requests,  like for
  1833   `/todos/42 `, by serv ing the ca ched copy  of your `i ndex.html` . This
  1834   service wo rker navig ation rout ing can be  configure d or disab led by
  1835   [`eject`in g](#npm-ru n-eject) a nd then mo difying th e
  1836   [`navigate Fallback`] (https://g ithub.com/ GoogleChro me/sw-prec ache#navig atefallbac k-string)
  1837   and [`navi gateFallba ckWhitelis t`](https: //github.c om/GoogleC hrome/sw-p recache#na vigatefall backwhitel ist-arrayr egexp)
  1838   options of  the `SWPr eachePlugi n` [config uration](. ./config/w ebpack.con fig.prod.j s).
  1839  
  1840   When users  install y our app to  the homes creen of t heir devic e the defa ult config uration wi ll make a  shortcut t o `/index. html`. Thi s may not  work for c lient-side  routers w hich expec t the app  to be serv ed from `/ `. Edit th e web app  manifest a t [`public /manifest. json`](pub lic/manife st.json) a nd change  `start_url ` to match  the requi red URL sc heme, for  example:
  1841  
  1842   ```js
  1843     "start_u rl": ".",
  1844   ```
  1845  
  1846   ### Buildi ng for Rel ative Path s
  1847  
  1848   By default , Create R eact App p roduces a  build assu ming your  app is hos ted at the  server ro ot.<br>
  1849   To overrid e this, sp ecify the  `homepage`  in your ` package.js on`, for e xample:
  1850  
  1851   ```js
  1852     "homepag e": "http: //mywebsit e.com/rela tivepath",
  1853   ```
  1854  
  1855   This will  let Create  React App  correctly  infer the  root path  to use in  the gener ated HTML  file.
  1856  
  1857   **Note**:  If you are  using `re act-router @^4`, you  can root ` <Link>`s u sing the ` basename`  prop on an y `<Router >`.<br>
  1858   More infor mation [he re](https: //reacttra ining.com/ react-rout er/web/api /BrowserRo uter/basen ame-string ).<br>
  1859   <br>
  1860   For exampl e:
  1861   ```js
  1862   <BrowserRo uter basen ame="/cale ndar"/>
  1863   <Link to=" /today"/>  // renders  <a href=" /calendar/ today">
  1864   ```
  1865  
  1866   #### Servi ng the Sam e Build fr om Differe nt Paths
  1867  
  1868   >Note: thi s feature  is availab le with `r eact-scrip ts@0.9.0`  and higher .
  1869  
  1870   If you are  not using  the HTML5  `pushStat e` history  API or no t using cl ient-side  routing at  all, it i s unnecess ary to spe cify the U RL from wh ich your a pp will be  served. I nstead, yo u can put  this in yo ur `packag e.json`:
  1871  
  1872   ```js
  1873     "homepag e": ".",
  1874   ```
  1875  
  1876   This will  make sure  that all t he asset p aths are r elative to  `index.ht ml`. You w ill then b e able to  move your  app from ` http://myw ebsite.com ` to `http ://mywebsi te.com/rel ativepath`  or even ` http://myw ebsite.com /relative/ path` with out having  to rebuil d it.
  1877  
  1878   ### [Azure ](https:// azure.micr osoft.com/ )
  1879  
  1880   See [this] (https://m edium.com/ @to_pe/dep loying-cre ate-react- app-on-mic rosoft-azu re-c0f6686 a4321) blo g post on  how to dep loy your R eact app t o Microsof t Azure.
  1881  
  1882   ### [Fireb ase](https ://firebas e.google.c om/)
  1883  
  1884   Install th e Firebase  CLI if yo u haven’ t already  by running  `npm inst all -g fir ebase-tool s`. Sign u p for a [F irebase ac count](htt ps://conso le.firebas e.google.c om/) and c reate a ne w project.  Run `fire base login ` and logi n with you r previous  created F irebase ac count.
  1885  
  1886   Then run t he `fireba se init` c ommand fro m your pro ject’s r oot. You n eed to cho ose the ** Hosting: C onfigure a nd deploy  Firebase H osting sit es** and c hoose the  Firebase p roject you  created i n the prev ious step.  You will  need to ag ree with ` database.r ules.json`  being cre ated, choo se `build`  as the pu blic direc tory, and  also agree  to **Conf igure as a  single-pa ge app** b y replying  with `y`.
  1887  
  1888   ```sh
  1889       === Pr oject Setu p
  1890  
  1891       First,  let's ass ociate thi s project  directory  with a Fir ebase proj ect.
  1892       You ca n create m ultiple pr oject alia ses by run ning fireb ase use -- add,
  1893       but fo r now we'l l just set  up a defa ult projec t.
  1894  
  1895       ? What  Firebase  project do  you want  to associa te as defa ult? Examp le app (ex ample-app- fd690)
  1896  
  1897       === Da tabase Set up
  1898  
  1899       Fireba se Realtim e Database  Rules all ow you to  define how  your data  should be
  1900       struct ured and w hen your d ata can be  read from  and writt en to.
  1901  
  1902       ? What  file shou ld be used  for Datab ase Rules?  database. rules.json
  1903       âœ”  D atabase Ru les for ex ample-app- fd690 have  been down loaded to  database.r ules.json.
  1904       Future  modificat ions to da tabase.rul es.json wi ll update  Database R ules when  you run
  1905       fireba se deploy.
  1906  
  1907       === Ho sting Setu p
  1908  
  1909       Your p ublic dire ctory is t he folder  (relative  to your pr oject dire ctory) tha t
  1910       will c ontain Hos ting asset s to uploa ded with f irebase de ploy. If y ou
  1911       have a  build pro cess for y our assets , use your  build's o utput dire ctory.
  1912  
  1913       ? What  do you wa nt to use  as your pu blic direc tory? buil d
  1914       ? Conf igure as a  single-pa ge app (re write all  urls to /i ndex.html) ? Yes
  1915       âœ”  W rote build /index.htm l
  1916  
  1917       i  Wri ting confi guration i nfo to fir ebase.json ...
  1918       i  Wri ting proje ct informa tion to .f irebaserc. ..
  1919  
  1920       âœ”  F irebase in itializati on complet e!
  1921   ```
  1922  
  1923   Now, after  you creat e a produc tion build  with `npm  run build `, you can  deploy it  by runnin g `firebas e deploy`.
  1924  
  1925   ```sh
  1926       === De ploying to  'example- app-fd690' ...
  1927  
  1928       i  dep loying dat abase, hos ting
  1929       âœ”  d atabase: r ules ready  to deploy .
  1930       i  hos ting: prep aring buil d director y for uplo ad...
  1931       Upload ing: [==== ========== ========== ======           ] 75 %✔  host ing: build  folder up loaded suc cessfully
  1932       âœ”  h osting: 8  files uplo aded succe ssfully
  1933       i  sta rting rele ase proces s (may tak e several  minutes).. .
  1934  
  1935       âœ”  D eploy comp lete!
  1936  
  1937       Projec t Console:  https://c onsole.fir ebase.goog le.com/pro ject/examp le-app-fd6 90/overvie w
  1938       Hostin g URL: htt ps://examp le-app-fd6 90.firebas eapp.com
  1939   ```
  1940  
  1941   For more i nformation  see [Add  Firebase t o your Jav aScript Pr oject](htt ps://fireb ase.google .com/docs/ web/setup) .
  1942  
  1943   ### [GitHu b Pages](h ttps://pag es.github. com/)
  1944  
  1945   >Note: thi s feature  is availab le with `r eact-scrip ts@0.2.0`  and higher .
  1946  
  1947   #### Step  1: Add `ho mepage` to  `package. json`
  1948  
  1949   **The step  below is  important! **<br>
  1950   **If you s kip it, yo ur app wil l not depl oy correct ly.**
  1951  
  1952   Open your  `package.j son` and a dd a `home page` fiel d:
  1953  
  1954   ```js
  1955     "homepag e": "https ://myusern ame.github .io/my-app ",
  1956   ```
  1957  
  1958   Create Rea ct App use s the `hom epage` fie ld to dete rmine the  root URL i n the buil t HTML fil e.
  1959  
  1960   #### Step  2: Install  `gh-pages ` and add  `deploy` t o `scripts ` in `pack age.json`
  1961  
  1962   Now, whene ver you ru n `npm run  build`, y ou will se e a cheat  sheet with  instructi ons on how  to deploy  to GitHub  Pages.
  1963  
  1964   To publish  it at [ht tps://myus ername.git hub.io/my- app](https ://myusern ame.github .io/my-app ), run:
  1965  
  1966   ```sh
  1967   npm instal l --save g h-pages
  1968   ```
  1969  
  1970   Alternativ ely you ma y use `yar n`:
  1971  
  1972   ```sh
  1973   yarn add g h-pages
  1974   ```
  1975  
  1976   Add the fo llowing sc ripts in y our `packa ge.json`:
  1977  
  1978   ```diff
  1979     "scripts ": {
  1980   +   "prede ploy": "np m run buil d",
  1981   +   "deplo y": "gh-pa ges -d bui ld",
  1982       "start ": "react- scripts st art",
  1983       "build ": "react- scripts bu ild",
  1984   ```
  1985  
  1986   The `prede ploy` scri pt will ru n automati cally befo re `deploy ` is run.
  1987  
  1988   #### Step  3: Deploy  the site b y running  `npm run d eploy`
  1989  
  1990   Then run:
  1991  
  1992   ```sh
  1993   npm run de ploy
  1994   ```
  1995  
  1996   #### Step  4: Ensure  your proje ct’s set tings use  `gh-pages`
  1997  
  1998   Finally, m ake sure * *GitHub Pa ges** opti on in your  GitHub pr oject sett ings is se t to use t he `gh-pag es` branch :
  1999  
  2000   <img src=" http://i.i mgur.com/H UjEr9l.png " width="5 00" alt="g h-pages br anch setti ng">
  2001  
  2002   #### Step  5: Optiona lly, confi gure the d omain
  2003  
  2004   You can co nfigure a  custom dom ain with G itHub Page s by addin g a `CNAME ` file to  the `publi c/` folder .
  2005  
  2006   #### Notes  on client -side rout ing
  2007  
  2008   GitHub Pag es doesn†™t support  routers t hat use th e HTML5 `p ushState`  history AP I under th e hood (fo r example,  React Rou ter using  `browserHi story`). T his is bec ause when  there is a  fresh pag e load for  a url lik e `http:// user.githu b.io/todom vc/todos/4 2`, where  `/todos/42 ` is a fro ntend rout e, the Git Hub Pages  server ret urns 404 b ecause it  knows noth ing of `/t odos/42`.  If you wan t to add a  router to  a project  hosted on  GitHub Pa ges, here  are a coup le of solu tions:
  2009  
  2010   * You coul d switch f rom using  HTML5 hist ory API to  routing w ith hashes . If you u se React R outer, you  can switc h to `hash History` f or this ef fect, but  the URL wi ll be long er and mor e verbose  (for examp le, `http: //user.git hub.io/tod omvc/#/tod os/42?_k=y knaj`). [R ead more]( https://re acttrainin g.com/reac t-router/w eb/api/Rou ter) about  different  history i mplementat ions in Re act Router .
  2011   * Alternat ively, you  can use a  trick to  teach GitH ub Pages t o handle 4 04 by redi recting to  your `ind ex.html` p age with a  special r edirect pa rameter. Y ou would n eed to add  a `404.ht ml` file w ith the re direction  code to th e `build`  folder bef ore deploy ing your p roject, an d you’ll  need to a dd code ha ndling the  redirect  parameter  to `index. html`. You  can find  a detailed  explanati on of this  technique  [in this  guide](htt ps://githu b.com/rafr ex/spa-git hub-pages) .
  2012  
  2013   ### [Herok u](https:/ /www.herok u.com/)
  2014  
  2015   Use the [H eroku Buil dpack for  Create Rea ct App](ht tps://gith ub.com/mar s/create-r eact-app-b uildpack). <br>
  2016   You can fi nd instruc tions in [ Deploying  React with  Zero Conf iguration] (https://b log.heroku .com/deplo ying-react -with-zero -configura tion).
  2017  
  2018   #### Resol ving Herok u Deployme nt Errors
  2019  
  2020   Sometimes  `npm run b uild` work s locally  but fails  during dep loy via He roku. Foll owing are  the most c ommon case s.
  2021  
  2022   ##### "Mod ule not fo und: Error : Cannot r esolve 'fi le' or 'di rectory'"
  2023  
  2024   If you get  something  like this :
  2025  
  2026   ```
  2027   remote: Fa iled to cr eate a pro duction bu ild. Reaso n:
  2028   remote: Mo dule not f ound: Erro r: Cannot  resolve 'f ile' or 'd irectory'
  2029   MyDirector y in /tmp/ build_1234 /src
  2030   ```
  2031  
  2032   It means y ou need to  ensure th at the let tercase of  the file  or directo ry you `im port` matc hes the on e you see  on your fi lesystem o r on GitHu b.
  2033  
  2034   This is im portant be cause Linu x (the ope rating sys tem used b y Heroku)  is case se nsitive. S o `MyDirec tory` and  `mydirecto ry` are tw o distinct  directori es and thu s, even th ough the p roject bui lds locall y, the dif ference in  case brea ks the `im port` stat ements on  Heroku rem otes.
  2035  
  2036   ##### "Cou ld not fin d a requir ed file."
  2037  
  2038   If you exc lude or ig nore neces sary files  from the  package yo u will see  a error s imilar thi s one:
  2039  
  2040   ```
  2041   remote: Co uld not fi nd a requi red file.
  2042   remote:    Name: `ind ex.html`
  2043   remote:    Searched i n: /tmp/bu ild_a2875f c163b20922 5122d68916 f1d4df/pub lic
  2044   remote:
  2045   remote: np m ERR! Lin ux 3.13.0- 105-generi c
  2046   remote: np m ERR! arg v "/tmp/bu ild_a2875f c163b20922 5122d68916 f1d4df/.he roku/node/ bin/node"  "/tmp/buil d_a2875fc1 63b2092251 22d68916f1 d4df/.hero ku/node/bi n/npm" "ru n" "build"
  2047   ```
  2048  
  2049   In this ca se, ensure  that the  file is th ere with t he proper  lettercase  and thatâ €™s not ig nored on y our local  `.gitignor e` or `~/. gitignore_ global`.
  2050  
  2051   ### [Netli fy](https: //www.netl ify.com/)
  2052  
  2053   **To do a  manual dep loy to Net lify’s C DN:**
  2054  
  2055   ```sh
  2056   npm instal l netlify- cli
  2057   netlify de ploy
  2058   ```
  2059  
  2060   Choose `bu ild` as th e path to  deploy.
  2061  
  2062   **To setup  continuou s delivery :**
  2063  
  2064   With this  setup Netl ify will b uild and d eploy when  you push  to git or  open a pul l request:
  2065  
  2066   1. [Start  a new netl ify projec t](https:/ /app.netli fy.com/sig nup)
  2067   2. Pick yo ur Git hos ting servi ce and sel ect your r epository
  2068   3. Click ` Build your  site`
  2069  
  2070   **Support  for client -side rout ing:**
  2071  
  2072   To support  `pushStat e`, make s ure to cre ate a `pub lic/_redir ects` file  with the  following  rewrite ru les:
  2073  
  2074   ```
  2075   /*  /index .html  200
  2076   ```
  2077  
  2078   When you b uild the p roject, Cr eate React  App will  place the  `public` f older cont ents into  the build  output.
  2079  
  2080   ### [Now]( https://ze it.co/now)
  2081  
  2082   Now offers  a zero-co nfiguratio n single-c ommand dep loyment. Y ou can use  `now` to  deploy you r app for  free.
  2083  
  2084   1. Install  the `now`  command-l ine tool e ither via  the recomm ended [des ktop tool] (https://z eit.co/dow nload) or  via node w ith `npm i nstall -g  now`.
  2085  
  2086   2. Build y our app by  running ` npm run bu ild`.
  2087  
  2088   3. Move in to the bui ld directo ry by runn ing `cd bu ild`.
  2089  
  2090   4. Run `no w --name y our-projec t-name` fr om within  the build  directory.  You will  see a **no w.sh** URL  in your o utput like  this:
  2091  
  2092       ```
  2093       > Read y! https:/ /your-proj ect-name-t pspyhtdtk. now.sh (co pied to cl ipboard)
  2094       ```
  2095  
  2096       Paste  that URL i nto your b rowser whe n the buil d is compl ete, and y ou will se e your dep loyed app.
  2097  
  2098   Details ar e availabl e in [this  article.] (https://z eit.co/blo g/unlimite d-static)
  2099  
  2100   ### [S3](h ttps://aws .amazon.co m/s3) and  [CloudFron t](https:/ /aws.amazo n.com/clou dfront/)
  2101  
  2102   See this [ blog post] (https://m edium.com/ @omgwtfmar c/deployin g-create-r eact-app-t o-s3-or-cl oudfront-4 8dae4ce0af ) on how t o deploy y our React  app to Ama zon Web Se rvices S3  and CloudF ront.
  2103  
  2104   ### [Surge ](https:// surge.sh/)
  2105  
  2106   Install th e Surge CL I if you h aven’t a lready by  running `n pm install  -g surge` . Run the  `surge` co mmand and  log in you  or create  a new acc ount.
  2107  
  2108   When asked  about the  project p ath, make  sure to sp ecify the  `build` fo lder, for  example:
  2109  
  2110   ```sh
  2111          pro ject path:  /path/to/ project/bu ild
  2112   ```
  2113  
  2114   Note that  in order t o support  routers th at use HTM L5 `pushSt ate` API,  you may wa nt to rena me the `in dex.html`  in your bu ild folder  to `200.h tml` befor e deployin g to Surge . This [en sures that  every URL  falls bac k to that  file](http s://surge. sh/help/ad ding-a-200 -page-for- client-sid e-routing) .
  2115  
  2116   ## Advance d Configur ation
  2117  
  2118   You can ad just vario us develop ment and p roduction  settings b y setting  environmen t variable s in your  shell or w ith [.env] (#adding-d evelopment -environme nt-variabl es-in-env) .
  2119  
  2120   Variable |  Developme nt | Produ ction | Us age
  2121   :--- | :-- -: | :---:  | :---
  2122   BROWSER |  :white_che ck_mark: |  :x: | By  default, C reate Reac t App will  open the  default sy stem brows er, favori ng Chrome  on macOS.  Specify a  [browser]( https://gi thub.com/s indresorhu s/opn#app)  to overri de this be havior, or  set it to  `none` to  disable i t complete ly. If you  need to c ustomize t he way the  browser i s launched , you can  specify a  node scrip t instead.  Any argum ents passe d to `npm  start` wil l also be  passed to  this scrip t, and the  url where  your app  is served  will be th e last arg ument. You r script's  file name  must have  the `.js`  extension .
  2123   HOST | :wh ite_check_ mark: | :x : | By def ault, the  developmen t web serv er binds t o `localho st`. You m ay use thi s variable  to specif y a differ ent host.
  2124   PORT | :wh ite_check_ mark: | :x : | By def ault, the  developmen t web serv er will at tempt to l isten on p ort 3000 o r prompt y ou to atte mpt the ne xt availab le port. Y ou may use  this vari able to sp ecify a di fferent po rt.
  2125   HTTPS | :w hite_check _mark: | : x: | When  set to `tr ue`, Creat e React Ap p will run  the devel opment ser ver in `ht tps` mode.
  2126   PUBLIC_URL  | :x: | : white_chec k_mark: |  Create Rea ct App ass umes your  applicatio n is hoste d at the s erving web  server's  root or a  subpath as  specified  in [`pack age.json`  (`homepage `)](#build ing-for-re lative-pat hs). Norma lly, Creat e React Ap p ignores  the hostna me. You ma y use this  variable  to force a ssets to b e referenc ed verbati m to the u rl you pro vide (host name inclu ded). This  may be pa rticularly  useful wh en using a  CDN to ho st your ap plication.
  2127   CI | :larg e_orange_d iamond: |  :white_che ck_mark: |  When set  to `true`,  Create Re act App tr eats warni ngs as fai lures in t he build.  It also ma kes the te st runner  non-watchi ng. Most C Is set thi s flag by  default.
  2128   REACT_EDIT OR | :whit e_check_ma rk: | :x:  | When an  app crashe s in devel opment, yo u will see  an error  overlay wi th clickab le stack t race. When  you click  on it, Cr eate React  App will  try to det ermine the  editor yo u are usin g based on  currently  running p rocesses,  and open t he relevan t source f ile. You c an [send a  pull requ est to det ect your e ditor of c hoice](htt ps://githu b.com/face bookincuba tor/create -react-app /issues/26 36). Setti ng this en vironment  variable o verrides t he automat ic detecti on. If you  do it, ma ke sure yo ur systems  [PATH](ht tps://en.w ikipedia.o rg/wiki/PA TH_(variab le)) envir onment var iable poin ts to your  editor’ s bin fold er.
  2129   CHOKIDAR_U SEPOLLING  | :white_c heck_mark:  | :x: | W hen set to  `true`, t he watcher  runs in p olling mod e, as nece ssary insi de a VM. U se this op tion if `n pm start`  isn't dete cting chan ges.
  2130   GENERATE_S OURCEMAP |  :x: | :wh ite_check_ mark: | Wh en set to  `false`, s ource maps  are not g enerated f or a produ ction buil d. This so lves OOM i ssues on s ome smalle r machines .
  2131  
  2132   ## Trouble shooting
  2133  
  2134   ### `npm s tart` does n’t dete ct changes
  2135  
  2136   When you s ave a file  while `np m start` i s running,  the brows er should  refresh wi th the upd ated code. <br>
  2137   If this do esn’t ha ppen, try  one of the  following  workaroun ds:
  2138  
  2139   * If your  project is  in a Drop box folder , try movi ng it out.
  2140   * If the w atcher doe sn’t see  a file ca lled `inde x.js` and  you’re r eferencing  it by the  folder na me, you [n eed to res tart the w atcher](ht tps://gith ub.com/fac ebookincub ator/creat e-react-ap p/issues/1 164) due t o a Webpac k bug.
  2141   * Some edi tors like  Vim and In telliJ hav e a â€œsaf e writeâ€?  feature t hat curren tly breaks  the watch er. You wi ll need to  disable i t. Follow  the instru ctions in  [“Adjust ing Your T ext Editor â€?](https ://webpack .js.org/gu ides/devel opment/#ad justing-yo ur-text-ed itor).
  2142   * If your  project pa th contain s parenthe ses, try m oving the  project to  a path wi thout them . This is  caused by  a [Webpack  watcher b ug](https: //github.c om/webpack /watchpack /issues/42 ).
  2143   * On Linux  and macOS , you migh t need to  [tweak sys tem settin gs](https: //webpack. github.io/ docs/troub leshooting .html#not- enough-wat chers) to  allow more  watchers.
  2144   * If the p roject run s inside a  virtual m achine suc h as (a Va grant prov isioned) V irtualBox,  create an  `.env` fi le in your  project d irectory i f it doesn ’t exist , and add  `CHOKIDAR_ USEPOLLING =true` to  it. This e nsures tha t the next  time you  run `npm s tart`, the  watcher u ses the po lling mode , as neces sary insid e a VM.
  2145  
  2146   If none of  these sol utions hel p please l eave a com ment [in t his thread ](https:// github.com /facebooki ncubator/c reate-reac t-app/issu es/659).
  2147  
  2148   ### `npm t est` hangs  on macOS  Sierra
  2149  
  2150   If you run  `npm test ` and the  console ge ts stuck a fter print ing `react -scripts t est --env= jsdom` to  the consol e there mi ght be a p roblem wit h your [Wa tchman](ht tps://face book.githu b.io/watch man/) inst allation a s describe d in [face bookincuba tor/create -react-app #713](http s://github .com/faceb ookincubat or/create- react-app/ issues/713 ).
  2151  
  2152   We recomme nd deletin g `node_mo dules` in  your proje ct and run ning `npm  install` ( or `yarn`  if you use  it) first . If it do esn't help , you can  try one of  the numer ous workar ounds ment ioned in t hese issue s:
  2153  
  2154   * [faceboo k/jest#176 7](https:/ /github.co m/facebook /jest/issu es/1767)
  2155   * [faceboo k/watchman #358](http s://github .com/faceb ook/watchm an/issues/ 358)
  2156   * [ember-c li/ember-c li#6259](h ttps://git hub.com/em ber-cli/em ber-cli/is sues/6259)
  2157  
  2158   It is repo rted that  installing  Watchman  4.7.0 or n ewer fixes  the issue . If you u se [Homebr ew](http:/ /brew.sh/) , you can  run these  commands t o update i t:
  2159  
  2160   ```
  2161   watchman s hutdown-se rver
  2162   brew updat e
  2163   brew reins tall watch man
  2164   ```
  2165  
  2166   You can fi nd [other  installati on methods ](https:// facebook.g ithub.io/w atchman/do cs/install .html#buil d-install)  on the Wa tchman doc umentation  page.
  2167  
  2168   If this st ill doesnâ €™t help,  try runnin g `launchc tl unload  -F ~/Libra ry/LaunchA gents/com. github.fac ebook.watc hman.plist `.
  2169  
  2170   There are  also repor ts that *u ninstallin g* Watchma n fixes th e issue. S o if nothi ng else he lps, remov e it from  your syste m and try  again.
  2171  
  2172   ### `npm r un build`  exits too  early
  2173  
  2174   It is repo rted that  `npm run b uild` can  fail on ma chines wit h limited  memory and  no swap s pace, whic h is commo n in cloud  environme nts. Even  with small  projects  this comma nd can inc rease RAM  usage in y our system  by hundre ds of mega bytes, so  if you hav e less tha n 1 GB of  available  memory you r build is  likely to  fail with  the follo wing messa ge:
  2175  
  2176   >  The bui ld failed  because th e process  exited too  early. Th is probabl y means th e system r an out of  memory or  someone ca lled `kill  -9` on th e process.
  2177  
  2178   If you are  completel y sure tha t you didn 't termina te the pro cess, cons ider [addi ng some sw ap space]( https://ww w.digitalo cean.com/c ommunity/t utorials/h ow-to-add- swap-on-ub untu-14-04 ) to the m achine you ’re buil ding on, o r build th e project  locally.
  2179  
  2180   ### `npm r un build`  fails on H eroku
  2181  
  2182   This may b e a proble m with cas e sensitiv e filename s.
  2183   Please ref er to [thi s section] (#resolvin g-heroku-d eployment- errors).
  2184  
  2185   ### Moment .js locale s are miss ing
  2186  
  2187   If you use  a [Moment .js](https ://momentj s.com/), y ou might n otice that  only the  English lo cale is av ailable by  default.  This is be cause the  locale fil es are lar ge, and yo u probably  only need  a subset  of [all th e locales  provided b y Moment.j s](https:/ /momentjs. com/#multi ple-locale -support).
  2188  
  2189   To add a s pecific Mo ment.js lo cale to yo ur bundle,  you need  to import  it explici tly.<br>
  2190   For exampl e:
  2191  
  2192   ```js
  2193   import mom ent from ' moment';
  2194   import 'mo ment/local e/fr';
  2195   ```
  2196  
  2197   If import  multiple l ocales thi s way, you  can later  switch be tween them  by callin g `moment. locale()`  with the l ocale name :
  2198  
  2199   ```js
  2200   import mom ent from ' moment';
  2201   import 'mo ment/local e/fr';
  2202   import 'mo ment/local e/es';
  2203  
  2204   // ...
  2205  
  2206   moment.loc ale('fr');
  2207   ```
  2208  
  2209   This will  only work  for locale s that hav e been exp licitly im ported bef ore.
  2210  
  2211   ### `npm r un build`  fails to m inify
  2212  
  2213   Some third -party pac kages don' t compile  their code  to ES5 be fore publi shing to n pm. This o ften cause s problems  in the ec osystem be cause neit her browse rs (except  for most  modern ver sions) nor  some tool s currentl y support  all ES6 fe atures. We  recommend  to publis h code on  npm as ES5  at least  for a few  more years .
  2214  
  2215   <br>
  2216   To resolve  this:
  2217  
  2218   1. Open an  issue on  the depend ency's iss ue tracker  and ask t hat the pa ckage be p ublished p re-compile d.
  2219     * Note:  Create Rea ct App can  consume b oth Common JS and ES  modules. F or Node.js  compatibi lity, it i s recommen ded that t he main en try point  is CommonJ S. However , they can  optionall y provide  an ES modu le entry p oint with  the `modul e` field i n `package .json`. No te that ** even if a  library pr ovides an  ES Modules  version,  it should  still prec ompile oth er ES6 fea tures to E S5 if it i ntends to  support ol der browse rs**.
  2220  
  2221   2. Fork th e package  and publis h a correc ted versio n yourself
  2222  
  2223   3. If the  dependency  is small  enough, co py it to y our `src/`  folder an d treat it  as applic ation code .
  2224  
  2225   In the fut ure, we mi ght start  automatica lly compil ing incomp atible thi rd-party m odules, bu t it is no t currentl y supporte d. This ap proach wou ld also sl ow down th e producti on builds.
  2226  
  2227   ## Somethi ng Missing ?
  2228  
  2229   If you hav e ideas fo r more â€œ How Toâ€?  recipes th at should  be on this  page, [le t us know] (https://g ithub.com/ facebookin cubator/cr eate-react -app/issue s) or [con tribute so me!](https ://github. com/facebo okincubato r/create-r eact-app/e dit/master /packages/ react-scri pts/templa te/README. md)