{"id":6993,"date":"2019-05-10T21:28:06","date_gmt":"2019-05-10T21:28:06","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=6993"},"modified":"2019-05-10T21:28:06","modified_gmt":"2019-05-10T21:28:06","slug":"react-and-serve","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-and-serve\/","title":{"rendered":"React and serve"},"content":{"rendered":"<p>During development of our React application, we&#8217;ll be using something like<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nyarn start\r\n<\/pre>\n<p>When we&#8217;re ready to deploy our application, we&#8217;ll use<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nyarn build\r\n<\/pre>\n<p>Which, in the case of React Typescript, will <em>transpile<\/em> to JavaScript and package files ready for deployment.<\/p>\n<p>We can also serve the files within the build folder using the <em>serve<\/em> application.<\/p>\n<p><strong>Installing serve<\/strong><\/p>\n<p>To install serve, execute <\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nyarn global add serve\r\n<\/pre>\n<p>This will add <em>server<\/em> to the global location. Normally (without the global command) packages etc. are installed local to the folder you&#8217;re working in. In the case of <em>global<\/em> packages, these will be installed in C:\\Users\\{username}\\AppData\\Roaming\\npm\\bin on Windows. <\/p>\n<p>To check the location on your installation run <\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nyarn global bin\r\n<\/pre>\n<p><strong>Running serve on our build<\/strong><\/p>\n<p>Once <em>serve<\/em> is installed we can run it using<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nserve -s build\r\n<\/pre>\n<p><em>Note: Obviously if the global location is not in your path you&#8217;ll need to prefix the command with the previously found location<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>During development of our React application, we&#8217;ll be using something like yarn start When we&#8217;re ready to deploy our application, we&#8217;ll use yarn build Which, in the case of React Typescript, will transpile to JavaScript and package files ready for deployment. We can also serve the files within the build folder using the serve application. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,242],"tags":[],"class_list":["post-6993","post","type-post","status-publish","format-standard","hentry","category-react","category-yarn"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=6993"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6993\/revisions"}],"predecessor-version":[{"id":7019,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6993\/revisions\/7019"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=6993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=6993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=6993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}