Create dan deploy react js di github

Cara sederhana install dan deploy react js pada github

by Maggie Appleton

Pada tutorial ini, kita akan membuat react-app dan melakukan deploy ke gh-pages (github). Sebelum memulai, pastikan sudah install node.js dan create-react-app.

Untuk tutorial install node.js bisa dilihat disini https://phoenixnap.com/kb/install-node-js-npm-on-windows dan untuk install create-react-app bisa dilihat disini https://makandracards.com/reactjs-quick/52419-install-reactjs-windows . Jika sudah, lakukan cek version node js dengan menuliskan node --version pada cmd. kemudian cek juga npm --version dan create-react-app --version pada cmd.

hasil cek version

1. Buat react-app baru dengan mengetikkan create-react-app nama-aplikasimu di cmd.
2. Setelah create-react-app selesai dibuat, masuk ke folder react-app dengan cd nama_aplikasimu dan jalankan npm start .

create-react-app

hasil create-react-app

3. Setelah react-app berhasil dibuat dan dijalankan. Login ke akun github dan buat repository baru.

create new repo buat deploy

4. Kemudian push react-app yang sudah kita buat ke repo github dengan menjalankan syntax dibawah ini pada cmd (pastikan masuk ke folder react appmu dulu)

init dan push react-app ke github

5. Pastikan push berhasil dengan merefresh repository dan akan berisi file seperti ini :

repo create-and-deploy

6. setelah push berhasil, install gh pages dengan menjalankan syntax npm install gh-pages --save-dev pada cmd (pastikan berada di folder react-app)

npm install gh-pages — save-dev

7. Kemudian buka react-appsmu di text-editor favoritmu :)) ex : vs-code dan buka file package.json serta tambahkan , homepage yang mengarah ke repomu dengan format “https://username.github.io/namarepo”. Tambahkan juga predeploy dan deploy pada bagian scripts seperti gambar dibawah

code dari gambar step 7

8. Lanjutkan dengan mengubah private pada package.json menjadi false dan lakukan push lagi ke repomu.

- git add .
- git commit -m "hahahihi"
- git push -u origin master

9. Terakhir jalankan npm run deploy (pastikan cmd berada pada folder react-app) dan jika berhasil react-app-mu dapat diakses dengan link usernamemu.github.io/nama_repomu ex : spindyzel.github.io/create-and-deploy coba akses di hp masing-masing.

create-and-deploy

10. Sekian bay thankyu :*