{"id":9098,"date":"2023-02-26T15:26:55","date_gmt":"2023-02-26T15:26:55","guid":{"rendered":"https:\/\/programmingfields.com\/?p=9098"},"modified":"2023-08-22T04:32:58","modified_gmt":"2023-08-22T04:32:58","slug":"deploy-a-react-application-on-cpanel-in-a-subdirectory","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/","title":{"rendered":"How to Deploy a React Application on a cPanel in a Subdirectory"},"content":{"rendered":"\n<p>The deployment of any application on a <strong>cPanel<\/strong> is easy. But, it varies on the type of application environment and dependencies. The most tedious job is configuration inside any server based on the dependencies, whether it is <strong>Shared hosting<\/strong>, <strong>VPS<\/strong>, or <strong>AWS<\/strong>. We can <strong>host React App<\/strong> on any server. As we know for running React applications, we need<strong> Node JS<\/strong> and <strong>NPM<\/strong> to manage the dependencies of the application. When we create a build, it generates the scripts which will be running out on the server. Generally, after creating a build, it takes the path of the root folder of the project directory. When we deploy it on the server, it tries to find that path. So, mostly, if we have any primary domain on which we want to <strong>deploy React app<\/strong> then it will be deployed easily. But, in case, if you want to deploy a React application inside a sub-directory of the domain then it is not an easy job. Today, in this post, you will be understanding how to <strong>deploy React App<\/strong> in a sub-directory on cPanel.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Deploy_React_App_in_a_Sub_Directory_in_cPanel_Root_Domain\" >Deploy React App in a Sub Directory in cPanel Root Domain<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Configure_React_App_to_Host_on_a_cPanel_Sub_Directory\" >Configure React App to Host on a cPanel Sub Directory<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Update_React_Router_DOM_For_Basename_Router\" >Update React Router DOM For Basename Router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Build_React_App_to_Deploy_in_Production\" >Build React App to Deploy in Production<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/#Create_a_htaccess_File_For_Sub_Directory\" >Create a .htaccess File For Sub Directory<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This post is about how to <strong>deploy React app<\/strong> in a sub-directory on cPanel. So, for this, you need a React Application setup and a cPanel ready for deployment. You can host React app on Firebase or any free hosting as well. That, I will cover in another post.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React App<\/strong><\/li>\n\n\n\n<li><strong>cPanel\/WHM<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Once, you are ready, let&#8217;s start the deployment steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deploy_React_App_in_a_Sub_Directory_in_cPanel_Root_Domain\"><\/span>Deploy React App in a Sub Directory in cPanel Root Domain<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the very first step, we will create a sub-directory in the root domain directory. So, by default, we have the <strong>public_html <\/strong>directory for a domain that is mapped inside the <strong>cPanel<\/strong>. Now, assuming, you have a domain named <strong>example.com<\/strong> having a <strong>public_html<\/strong> root directory. But, we want to host React application in a sub-directory named <strong>app<\/strong> inside the <strong>public_html<\/strong>.<\/p>\n\n\n\n<p>Hence, we will create a sub-directory named <strong>app<\/strong> inside the <strong>public_html<\/strong> (Root domain directory). So, the URL will become <strong>example.com\/app<\/strong> for the React Application.<\/p>\n\n\n\n<p>After creating the sub-directory, we will come to the React Application for some app-level configuration.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-use-uselocation-hook-in-react-router-dom-v6\/\">How to Use Location Hook in React Router DOM V6<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configure_React_App_to_Host_on_a_cPanel_Sub_Directory\"><\/span><strong>Configure React App to Host on a cPanel Sub Directory<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At the application level, we will need to configure our sub-directory which we have created on the cPanel.<\/p>\n\n\n\n<p>In the initial step, open the project in any editor (VS Code recommended). After that, you need to navigate to the <strong>package.json <\/strong>file available in the root of the project directory.<\/p>\n\n\n\n<p>Then add an attribute named <strong>homepage<\/strong> as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">\"homepage: \"\/sub-directory\"<\/code><\/pre>\n\n\n\n<p>So, in our case, after adding the directory name (app), it will become like this.<\/p>\n\n\n\n<pre title=\"package.json\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">{\n  \"name\": \"react-blog-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"homepage\": \"\/app\",\n  \"dependencies\": {\n    ....\n    ....\n    ....\n  },<\/code><\/pre>\n\n\n\n<p>We have specified the folder name as an attribute named <strong>homepage<\/strong> with the directory name in the <strong>package.json<\/strong> object.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Update_React_Router_DOM_For_Basename_Router\"><\/span><strong>Update React Router DOM For Basename Router <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the next step, we will need to update <strong>BrowserRouter<\/strong>. As we will already have the React Router DOM for routing management for the React app.<\/p>\n\n\n\n<p>Now, we will be adding the basename attribute in <strong>&lt;Router><\/strong> component. In the basename attribute, we will pass our sub-directory name (app) as shown below.<\/p>\n\n\n\n<pre title=\"App.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from 'react';\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport { AppRouter } from '.\/components\/AppRouter';\nimport '.\/App.scss';\n\nexport const App = () =&gt; {\n  return (\n    &lt;Router basename={\"\/app\"}&gt;\n      &lt;AppRouter \/&gt;\n    &lt;\/Router&gt;\n  );\n};<\/code><\/pre>\n\n\n\n<p>The basename props will help the request to look into the specified directory as we added the app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Build_React_App_to_Deploy_in_Production\"><\/span><strong>Build React App to Deploy in Production<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the next step, we need to make a build of the application so that we can deploy it on production. For making a build, hit the below command in the terminal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm run build<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"358\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?resize=1024%2C358&#038;ssl=1\" alt=\"\" class=\"wp-image-9119\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?resize=1024%2C358&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?resize=300%2C105&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?resize=768%2C268&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?resize=1536%2C537&amp;ssl=1 1536w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/num-run-build-2.png?w=1660&amp;ssl=1 1660w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Build React App<\/strong> <strong>&#8211; Deploy React App<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_htaccess_File_For_Sub_Directory\"><\/span><strong>Create a .htaccess File For Sub Directory<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once we will deploy React app to the server, we can access the app. If you will try to access the app through the root domain followed by the directory (example.com\/app), it will return 404. It won&#8217;t be an accessible directory through the URL. So, in order to manage the redirection, you&#8217;ll need to add a simple\u00a0.htaccess\u00a0file to tell the server to fall back to our\u00a0<code>index.html<\/code>\u00a0file. This is the same configuration we would use if the application was on the server root, just with a different absolute path to our index file.<\/p>\n\n\n\n<pre title=\".htaccess\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">&lt;IfModule mod_rewrite.c&gt;\nRewriteEngine On\nRewriteBase \/app\/\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteCond %{REQUEST_FILENAME} !-l\nRewriteRule . \/app\/index.html [L]\n&lt;\/IfModule&gt;<\/code><\/pre>\n\n\n\n<p>That&#8217;s it. Now, you can refresh the page and try to access the application URL <strong>(example.com\/app)<\/strong>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The deployment of any application on a cPanel is easy. But, it varies on the type of application environment and dependencies. The most tedious job is configuration inside any server based on the dependencies, whether it is Shared hosting, VPS, or AWS. We can host React App on any server. As we know for running [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":9131,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1369],"tags":[2561,2557,2559,2560,2563,2558,2562],"yst_prominent_words":[823,1566],"class_list":{"0":"post-9098","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-build-react-app","9":"tag-deploy-react-app","10":"tag-deploy-react-app-on-cpanel","11":"tag-deploy-react-app-on-cpanel-in-a-subdirectory","12":"tag-deploy-react-app-on-server","13":"tag-host-react-app-on-cpanel","14":"tag-host-react-app-on-server","15":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/02\/deploy-react-app.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/9098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=9098"}],"version-history":[{"count":31,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/9098\/revisions"}],"predecessor-version":[{"id":10062,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/9098\/revisions\/10062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/9131"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=9098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=9098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=9098"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=9098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}