Membangun Aplikasi React Full-Stack

Implementasi

• Buat aplikasi React baru

  Cara termudah untuk membuat aplikasi React adalah dengan perintah create-react-app. Pasang paket ini menggunakan perintah berikut di prompt perintah atau terminal Anda:

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  Copy
• Inisialisasi repositori GitHub

  Pada langkah ini, Anda akan membuat repositori GitHub dan commit kode Anda ke repositori. Anda akan memerlukan akun GitHub untuk menyelesaikan langkah ini. Jika Anda tidak memiliki akun, daftar di sini.

  a. Buat repo GitHub baru untuk aplikasi Anda.
  

  

  b. Buka terminal baru dan navigasikan kembali ke folder root aplikasi Anda, misalnya, amplifyapp.

  c. Penggunaan create-react-app akan menginisialisasi repo git dan membuat commit awal secara otomatis. Jika Anda mencoba melakukan deployment aplikasi React yang ada di mana git belum diinisialisasi, pastikan untuk memasukkan perintah berikut sebelum melanjutkan:

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  Copy

  d. Jika Anda belum pernah menggunakan GitHub di komputer, ikuti langkah-langkah ini sebelum melanjutkan untuk mengizinkan koneksi ke akun Anda.
  

  Dorong aplikasi ke repo GitHub baru dengan menjalankan perintah berikut di antarmuka baris perintah Anda:

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  Copy
• Masuk ke Konsol Manajemen AWS

  Buka Konsol Manajemen AWS di jendela peramban baru agar panduan langkah demi langkah ini selalu terbuka. Saat layar dimuat, masukkan nama pengguna dan kata sandi Anda untuk memulai. Ketikkan Amplify di bilah pencarian, lalu pilih AWS Amplify untuk membuka konsol layanan.
  

  

• Men-deploy aplikasi Anda dengan AWS Amplify

  Di langkah ini, Anda akan menghubungkan repositori GitHub yang baru saja Anda buat ke layanan AWS Amplify. Langkah ini akan memungkinkan Anda untuk membangun, menyebarkan, dan menghosting aplikasi Anda di AWS.

  a. Di konsol layanan AWS Amplify, pilih Mulai yang ada di bawah Hosting Amplify.
  

  

  b. Pilih GitHub sebagai layanan repositori dan pilih Berikutnya.

  

  c. Autentikasi menggunakan GitHub dan kembali ke konsol Amplify. Pilih repositori dan cabang utama yang Anda buat sebelumnya, lalu pilih Berikutnya.
  

  

  d. Terima pengaturan pembangunan default dan pilih Berikutnya.

  

  e. Tinjau detail akhir dan pilih Simpan dan deploy.
  

  

  f. AWS Amplify kini akan membangun kode sumber Anda dan melakukan deployment aplikasi Anda di https://...amplifyapp.com.
  

  

  g. Setelah pembangunan selesai, pilih thumbnail untuk melihat aplikasi web Anda aktif dan berfungsi. 

  

• Deploy perubahan kode secara otomatis

  Di langkah ini, Anda akan membuat beberapa perubahan pada kode yang menggunakan editor teks Anda dan mendorong perubahan tersebut ke cabang utama aplikasi Anda.

  a. Edit src/App.js dengan kode di bawah ini dan simpan.
  

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello from V2</h1>
        </header>
      </div>
    );
  }
  
  export default App;

  Code snippet copied

  Copy

  b. Dorong perubahan ke GitHub di prompt perintah (Windows) atau terminal (macOS) untuk memulai build baru secara otomatis: 

  git add .
  git commit -m “changes for v2”
  git push origin main

  Code snippet copied

  Copy

  c. Setelah pembangunan selesai, pilih thumbnail di konsol AWS Amplify untuk melihat aplikasi yang diperbarui.