{"id":16532,"date":"2020-08-25T15:34:20","date_gmt":"2020-08-25T08:34:20","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=16532"},"modified":"2024-11-06T09:05:24","modified_gmt":"2024-11-06T02:05:24","slug":"deploy-react-js-di-cpanel-hosting","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/deploy-react-js-di-cpanel-hosting\/","title":{"rendered":"Deploy React JS Application Di cPanel Hosting"},"content":{"rendered":"\n

React JS adalah salah satu framework yang digunakanuntuk mengembangkan frontend apps dengan runtime berbasis NodeJS. Pada panduan ini, kami akan berbagi cara upload atau deploy React JS di cPanel hosting. <\/p>\n\n\n\n\n\n

Sebelum membahas cara deploy React JS di cPanel, terlebih dahulu kami akan mengulas sedikit tentang apa itu react js. Berikut informasi selengkapnya.<\/p>\n\n\n\n

Apa itu React JS<\/h2>\n\n\n\n

React JS adalah framework yang menggunakan runtime NodeJS untuk mengembangkan frontend application. React JS sangat cocok digunakan untuk membuat landing page, static page, hingga progressive web apps.<\/p>\n\n\n\n

Pada hal ini, React JS berperan sebagai User Interface yang digunakan untuk mengatur layout atau design website, agar nantinya dapat ditampilkan pada desktop atau mobile view. Informasi selengkapnya tentang react JS bisa Anda baca pada artikel Apa itu React JS?<\/a><\/p>\n\n\n\n

Pada panduan kali ini, kami akan membahas tentang cara melakukan deploy hasil build React JS app ke cPanel hosting <\/a>Rumahweb. Panduan kali ini tidak membahas tetang deployment backend appication melainkan hanya deploy React JS di NodeJS.<\/p>\n\n\n\n

Deploy React JS di cPanel<\/h2>\n\n\n\n

Berikut langkah-langkah deploy react js di cPanel<\/em> :<\/p>\n\n\n\n

1. Edit file package.json dari project react yang digunakan, lalu tambahkan script berikut:<\/p>\n\n\n\n

\"homepage\": \"https:\/\/namadomainkalian.com\/\",<\/em><\/pre>\n\n\n\n
Hasil edit :<\/p>\n\n\n\n
\"image<\/figure>\n\n\n\n
Note:
Sesuaikan dengan nama domain \/ subdomain yang akan digunakan.<\/em><\/p>\n\n\n\n
2. Buka terminal \/ cmd di dalam folder project react pada localhost kalian, lalu run command:<\/p>\n\n\n\n
npm run build<\/em><\/pre>\n\n\n\n
3. Tunggu sampai hsail build selesai. Akan muncul folder baru yaitu “build” .<\/p>\n\n\n\n
\"proses<\/figure>\n\n\n\n
4. Cek kelengkapan isi folder “build” tersebut.<\/p>\n\n\n\n
5. Silahkan buat ZIP archive dari isi folder “build”.<\/p>\n\n\n\n
\"folder<\/figure>\n\n\n\n
6. Upload dan extract zip file ke dalam folder document root di cPpanel hosting yang digunakan.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
7. Buat file .htaccess di dalam folder dokumen root yang digunakan.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
8. Lalu isikkan script berikut:<\/p>\n\n\n\n
RewriteEngine On
RewriteBase \/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . \/index.html [L]<\/em><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
9. Silahkan coba akses url domain \/ subdomain yang digunakan. Jika tidak ada kendala, akan muncul website hasil build react app.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selesai, sangat mudah dan simple untuk deployment frontend react app di cPanel hosting Rumahweb.<\/p>\n\n\n\n
Untuk kedepanya Anda dapat mengembangkan dengan mengkoneksikan git repository untuk melakukan remote edit script, agar tidak perlu buka cPanel untuk edit konten website react yang digunakan.<\/p>\n\n\n\n
Demikian panduan deploy React JS Application Di cPanel Hosting Rumahweb<\/span>, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
React JS adalah salah satu framework yang digunakanuntuk mengembangkan frontend apps dengan runtime berbasis NodeJS. Pada panduan ini, kami akan berbagi cara upload atau deploy React JS di cPanel hosting. Sebelum membahas cara deploy React JS di cPanel, terlebih dahulu kami akan mengulas sedikit tentang apa itu react js. Berikut informasi selengkapnya. Apa itu React […]<\/p>\n","protected":false},"author":331,"featured_media":16550,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[695],"tags":[1537],"class_list":{"0":"post-16532","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cpanel","8":"tag-react-js"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2020\/08\/Deploy-React-JS-Application-Di-cPanel-Hosting-Rumahweb.jpg","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-4iE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/16532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/331"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=16532"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/16532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/16550"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=16532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=16532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=16532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}