{"id":8153,"date":"2022-06-15T09:17:06","date_gmt":"2022-06-15T02:17:06","guid":{"rendered":"https:\/\/www.jetorbit.com\/panduan\/?p=8153"},"modified":"2022-07-25T15:07:34","modified_gmt":"2022-07-25T08:07:34","slug":"deploy-aplikasi-react-js-di-cpanel","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/","title":{"rendered":"Cara Deploy Aplikasi React JS di Cpanel"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Daftar Isi Artikel<\/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:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#Mengenal_React_JS\" >Mengenal React JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#Cara_Deploy_Aplikasi_React_JS_di_Cpanel\" >Cara Deploy Aplikasi React JS di Cpanel<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#1_Login_ke_Cpanel\" >1. Login ke Cpanel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#2_Tambahkan_Homepage_ke_File_packagejson\" >2. Tambahkan Homepage ke File package.json<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#3_Buat_File_Build\" >3. Buat File Build<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#4_Upload_Project_React_ke_Cpanel\" >4. Upload Project React ke Cpanel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.jetorbit.com\/panduan\/deploy-aplikasi-react-js-di-cpanel\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>React JS merupakan salah satu framework yang di gunakan untuk mengembangkan Aplikasi front end Dengan basis runtime node.js.<\/p>\n\n\n\n<p>Jadi React JS ini sangat bermanfaat bagi anda sebagai programmer Front End.<\/p>\n\n\n\n<p>Pada panduan Kali ini kami akan membahas Cara Deploy Aplikasi React JS di Cpanel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mengenal_React_JS\"><\/span>Mengenal React JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>React JS merupakan Library javascript yang biasa di gunakan oleh programmer untuk membuat UI suatu aplikasi yang berbasis website.<\/p>\n\n\n\n<p>Simpelnya, reactJS ini merupakan suatu perpustakaan yang menyimpan banyak kode javascript tertulis, dimana ketika anda akan menggunakan nya, maka anda cukup mengambil kode tersebut<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Deploy_Aplikasi_React_JS_di_Cpanel\"><\/span>Cara Deploy Aplikasi React JS di Cpanel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Di panduan kali ini, kami menggunakan cpanel untuk Management control hosting yang di gunakan, jika anda belum memiliki hosting yang support untuk React JS, maka anda bisa memilih jetorbit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Login_ke_Cpanel\"><\/span>1. Login ke Cpanel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk login pada cpanel Anda bisa mengikuti panduan berikut untuk login pada Cpanel anda&nbsp;<a href=\"https:\/\/www.jetorbit.com\/panduan\/cara-login-ke-cpanel\/\">cara login ke cpanel.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Tambahkan_Homepage_ke_File_packagejson\"><\/span>2. Tambahkan Homepage ke File package.json<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Selanjutnya, buka Project Yang anda gunakan. Kemudian Buka File <strong>package.json <\/strong>dan tambahkan Atribut <strong>&#8220;homepage&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"423\" height=\"456\" src=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel.png\" alt=\"Cara Deploy Aplikasi React JS di Cpanel\" class=\"wp-image-8154\" srcset=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel.png 423w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-278x300.png 278w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/figure>\n\n\n\n<p>Formatnya  yang di gunakan : <strong>&#8220;homepage&#8221;: &#8220;http:\/\/domainanda.com&#8221;<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Buat_File_Build\"><\/span>3. Buat File Build<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Berikutnya buka Terminal atau CMD di dalam FOlder Project react Pada <strong>localhost<\/strong> anda, kemudian jalankan perintah berikut :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><em>npm run build<\/em><\/pre>\n\n\n\n<p>Kemudian tunggu sampai prosesnya selesai, jika sudah selesai maka akan muncul folder baru bernama <strong>&#8220;build&#8221;<\/strong><\/p>\n\n\n\n<p>Kemudian Buat Anda .ZIP kan Folder Build Tersebut<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Upload_Project_React_ke_Cpanel\"><\/span>4. Upload Project React ke Cpanel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Berikutnya anda bisa mengupload FIle .ZIP tersebut ke cpanel hosting yang anda gunakan, dan jangn lupa untuk mengekstraknya.<\/p>\n\n\n\n<p>Jika sudah, buat file baru bernama <code>.htaccess<\/code> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"817\" src=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-2-1024x817.png\" alt=\"Cara Deploy Aplikasi React JS di Cpanel\" class=\"wp-image-8155\" srcset=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-2-1024x817.png 1024w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-2-300x239.png 300w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-2-768x613.png 768w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-2.png 1113w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Masuk ke file tersebut dan tambahkan Kode berikut :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;IfModule mod_rewrite.c&gt;\n\n  RewriteEngine On\n  RewriteBase \/\n  RewriteRule ^index\\.html$ - &#091;L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteCond %{REQUEST_FILENAME} !-l\n  RewriteRule . \/index.html &#091;L]\n\n&lt;\/IfModule&gt;<\/code><\/pre>\n\n\n\n<p>Jika sudah klik Save changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"190\" src=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3-1024x190.png\" alt=\"Cara Deploy Aplikasi React JS di Cpanel\" class=\"wp-image-8156\" srcset=\"https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3-1024x190.png 1024w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3-300x56.png 300w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3-768x142.png 768w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3-1536x285.png 1536w, https:\/\/www.jetorbit.com\/panduan\/wp-content\/uploads\/2022\/06\/Cara-Deploy-Aplikasi-React-JS-di-Cpanel-3.png 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Disini langkah deploy React JS telah selesai, berikutnya anda bisa coba mengakses Domain atau subdomain yang anda gunakan tadi.<\/p>\n\n\n\n<p>Jika tidak ada kendala, maka website sudah bisa di akses.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sangat mudah untuk Deploy atau upload project react JS yang anda miliki, jika terdapat kendala silahkan bisa menghubungi kami.<\/p>\n\n\n\n<p>Demikian panduan terkait Cara Deploy Aplikasi React JS di Cpanel, semoga bermanfaat \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React JS merupakan salah satu framework yang di gunakan untuk mengembangkan Aplikasi front end Dengan basis runtime node.js. Jadi React JS ini sangat bermanfaat bagi anda sebagai programmer Front End. Pada panduan Kali ini kami akan membahas Cara Deploy Aplikasi React JS di Cpanel. Mengenal React JS React JS merupakan Library javascript yang biasa di [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":8302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[562],"class_list":["post-8153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cp","tag-cara-deploy-aplikasi-react-js-di-cpanel"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/posts\/8153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/comments?post=8153"}],"version-history":[{"count":4,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/posts\/8153\/revisions"}],"predecessor-version":[{"id":8303,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/posts\/8153\/revisions\/8303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/media\/8302"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/media?parent=8153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/categories?post=8153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/panduan\/wp-json\/wp\/v2\/tags?post=8153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}