{"id":14908,"date":"2023-07-01T11:45:30","date_gmt":"2023-07-01T10:45:30","guid":{"rendered":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?p=14908"},"modified":"2023-07-01T11:45:32","modified_gmt":"2023-07-01T10:45:32","slug":"steps-to-deploy-react-application-on-shared-hosting-cpanel","status":"publish","type":"post","link":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/","title":{"rendered":"Steps to Deploy React Application on Shared Hosting (cPanel)?"},"content":{"rendered":"\n<p>React is one of the most used Front end libraries. There are many other options for deploying React apps; shared hosting is one of the excellent ways to start a new project.<\/p>\n\n\n\n<p>As it&#8217;s one of the affordable ways, but not the easiest, to deploy a React app as a developer.<\/p>\n\n\n\n<p>In this article, we&#8217;ve made your job easy. We will understand the steps to how you can deploy a react app on <a href=\"https:\/\/www.milesweb.co.uk\/hosting\/shared-hosting\" target=\"_blank\" rel=\"noreferrer noopener\">shared hosting<\/a>.<\/p>\n\n\n\n<p>Generally, React App on your local machine runs on localhost: localhost: port.<\/p>\n\n\n\n<p>First, to deploy the React app on shared hosting, you must replace the local address with your domain name.<\/p>\n\n\n\n<p>Step 1: Replace The Local Host With The Domain Name<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"296\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\" alt=\"Replace The Local Host With The Domain Name\" class=\"wp-image-14909\" srcset=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png 474w, https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name-300x187.png 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/figure>\n\n\n\n<p>In the package.json file of your react app, add a new property &#8220;homepage&#8221;:&#8221;<a href=\"http:\/\/yourdomain.com\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">http:\/\/yourdomain.com<\/a>&#8220;<\/p>\n\n\n\n<p>The next step is to build the App.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Building The App Using npm Run Build<\/h2>\n\n\n\n<p>Your project directory will create a build folder containing all the static files for a project. You need an FTP with your hosting address to upload the app to your hosting address.<\/p>\n\n\n\n<p>In FTP (FileZilla), on Local Site, open the build directory of React App; on the remote site, open the domain directory. Your hosting account will always have the domain directory with the same name as the domain if you have named it differently.<\/p>\n\n\n\n<p>Then, copy everything from the build directory to the domain directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/domain-directory.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"236\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/domain-directory.png\" alt=\"domain directory\" class=\"wp-image-14910\" srcset=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/domain-directory.png 602w, https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/domain-directory-300x118.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">.htaccess File Configuration<\/h2>\n\n\n\n<p>The most crucial part is the .htaccess configuration; this file has all the configurations of which file to serve when anyone visits the domain if you have followed the above steps correctly.<\/p>\n\n\n\n<p>If so, then copy and paste into your .htaccess\u00a0<\/p>\n\n\n\n<p><strong>Please Note:<\/strong><\/p>\n\n\n\n<p>Note: .\/index.html when your index.html and .htaccess are in different folders, then:<\/p>\n\n\n\n<p>.\/abcfolder\/index.html.<\/p>\n\n\n\n<p>You will get to see the output given below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/output.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"311\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/output.png\" alt=\"output \" class=\"wp-image-14911\" srcset=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/output.png 602w, https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/output-300x155.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><\/figure>\n\n\n\n<p>This is how you can successfully deploy React applications on shared hosting.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is one of the most used Front end libraries. There are many other options for deploying React apps; shared hosting is one of the excellent ways to start a new project. As it&#8217;s one of the affordable ways, but not the easiest, to deploy a React app as a developer. In this article, we&#8217;ve [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[2979,130],"class_list":["post-14908","post","type-post","status-publish","format-standard","placeholder-for-hentry","category-cpanel-hosting-faq","tag-deploy-react-application","tag-shared-hosting"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Steps to Deploy React Application on Shared Hosting (cPanel)?<\/title>\n<meta name=\"description\" content=\"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Steps to Deploy React Application on Shared Hosting (cPanel)?\" \/>\n<meta property=\"og:description\" content=\"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Hosting FAQs by MilesWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-01T10:45:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-01T10:45:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\" \/>\n<meta name=\"author\" content=\"Nehal Khatri\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nehal Khatri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/\",\"name\":\"Steps to Deploy React Application on Shared Hosting (cPanel)?\",\"isPartOf\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\",\"datePublished\":\"2023-07-01T10:45:30+00:00\",\"dateModified\":\"2023-07-01T10:45:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/0241ea191f60975839d956b6952e0a1d\"},\"description\":\"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\",\"contentUrl\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png\",\"width\":474,\"height\":296,\"caption\":\"Replace The Local Host With The Domain Name\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Steps to Deploy React Application on Shared Hosting (cPanel)?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\",\"name\":\"Web Hosting FAQs by MilesWeb\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/0241ea191f60975839d956b6952e0a1d\",\"name\":\"Nehal Khatri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/736396ef8d8bdecec53ce8851058903e?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/736396ef8d8bdecec53ce8851058903e?s=96&d=blank&r=g\",\"caption\":\"Nehal Khatri\"},\"description\":\"Nehal is an ardent content writer. She's passionate about crafting content that's simple but adds value. Her insatiable interest in writing has allowed her to explore her skills. She is adept and can write for different types of content formats.\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/nehal-khatri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Steps to Deploy React Application on Shared Hosting (cPanel)?","description":"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/","og_locale":"en_GB","og_type":"article","og_title":"Steps to Deploy React Application on Shared Hosting (cPanel)?","og_description":"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.","og_url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/","og_site_name":"Web Hosting FAQs by MilesWeb","article_published_time":"2023-07-01T10:45:30+00:00","article_modified_time":"2023-07-01T10:45:32+00:00","og_image":[{"url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png","type":"","width":"","height":""}],"author":"Nehal Khatri","twitter_misc":{"Written by":"Nehal Khatri","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/","name":"Steps to Deploy React Application on Shared Hosting (cPanel)?","isPartOf":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage"},"image":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png","datePublished":"2023-07-01T10:45:30+00:00","dateModified":"2023-07-01T10:45:32+00:00","author":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/0241ea191f60975839d956b6952e0a1d"},"description":"In this guide, we will understand the steps to deploy a react application on shared hosting using cPanel.","breadcrumb":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#primaryimage","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png","contentUrl":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2023\/07\/replace-local-host-with-domain-name.png","width":474,"height":296,"caption":"Replace The Local Host With The Domain Name"},{"@type":"BreadcrumbList","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/steps-to-deploy-react-application-on-shared-hosting-cpanel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/"},{"@type":"ListItem","position":2,"name":"Steps to Deploy React Application on Shared Hosting (cPanel)?"}]},{"@type":"WebSite","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/","name":"Web Hosting FAQs by MilesWeb","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/0241ea191f60975839d956b6952e0a1d","name":"Nehal Khatri","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/736396ef8d8bdecec53ce8851058903e?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/736396ef8d8bdecec53ce8851058903e?s=96&d=blank&r=g","caption":"Nehal Khatri"},"description":"Nehal is an ardent content writer. She's passionate about crafting content that's simple but adds value. Her insatiable interest in writing has allowed her to explore her skills. She is adept and can write for different types of content formats.","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/nehal-khatri\/"}]}},"views":75,"_links":{"self":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/14908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/comments?post=14908"}],"version-history":[{"count":1,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/14908\/revisions"}],"predecessor-version":[{"id":14912,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/14908\/revisions\/14912"}],"wp:attachment":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/media?parent=14908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/categories?post=14908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/tags?post=14908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}