Baru-baru ini saya mempelajari cara menerapkan proyek MERN Full-stack saya dan tidak sabar untuk membantu Anda menerapkan proyek Anda juga.

Saat menerapkan proyek full-stack MERN, backend dan frontend perlu diterapkan secara terpisah. Mari kita telusuri cara menerapkan backend terlebih dahulu:

Inilah pengaturan repo yang saya sebarkan ke Render:

Saya memiliki folder klien untuk frontend dan folder server untuk backend.

Pertama dan terpenting: Mendaftar ke Render untuk mendapatkan akun gratis. Saya sarankan mendaftar melalui akun GitHub Anda sehingga dapat mengakses folder Anda lebih cepat.

Bagian belakang:

Untuk latar belakang:

1. Klik baru dan pilih Layanan Web

3. Identifikasi nama unik untuk layanan web Anda.

4. Kita bisa membiarkan 'Wilayah' sendirian

5. Tinggalkan 'Cabang' sebagai 'utama'.

6. Untuk 'Root Directory', saya menentukan 'server' karena semua informasi backend saya berada di folder ini.

7. Tinggalkan Runtime ke Node karena itulah yang kami gunakan untuk backend kami.

8. Bangun perintah, Anda dapat membiarkannya sebagai 'benang'.

9. Perintah Start, Anda dapat menempatkan 'npm start'.

10. Lalu, pastikan untuk memilih free untuk Instance Type .

11. Setelah itu, klik tombol 'advanced':

Setelah mengklik tombol, Anda akan mendapatkan lebih banyak pilihan yang diisi di bagian bawah halaman.

12. Klik 'Tambahkan Variabel Lingkungan':

Tambahkan variabel lingkungan yang disebut 'MY_MONGO_URL' dan rekatkan URL koneksi MongoDB Anda ke nilainya.

Langkah ini memberi tahu Render cara terhubung ke database MongoDB Anda.

13. Kemudian klik 'Buat Layanan Web'.

Kemudian log konsol harus diisi dengan memberi tahu Anda bahwa itu mulai mengkloning dari file GitHub Anda.

Setelah beberapa kali dijalankan, log harus menyatakan "terhubung ke db && mendengarkan di port ###".

Menguji apakah Backend berfungsi:

Cara untuk menguji apakah Anda tahu apakah backend Anda diterapkan adalah mengklik hyperlink yang disediakan di kanan atas. Ini akan menunjukkan kesalahan yang mirip dengan ini:

Jika Anda pergi ke hyperlink di bagian akhir, tambahkan 'api/(titik akhir untuk rute Anda)' ke string kueri, maka Anda akan melihat informasi database Anda dalam format JSON.

Et voila, backend kami telah diterapkan. Sekarang untuk menyelesaikan semuanya, mari terapkan frontend kita.

Paling depan:

Untuk tampilan depan:

1. Klik 'Baru' dan pilih 'Situs Statis' dari dropdown.

4. Identifikasi nama unik untuk itu

5. Biarkan Cabang sebagai 'utama'.

6. Untuk 'Root Directory', ketikkan 'client'.

7. Bangun perintah — pembuatan benang

8. Untuk 'Publish directory', ketik 'build'.

9. Klik 'Buat Situs Statis' dan halaman baru akan muncul dengan log konsol. Di sisi kiri, cari 'Pengalihan/Penulisan Ulang'.

10. Setelah itu, buat dua rule.

Aturan pertama yang ada di atas adalah menulis ulang '/ api/*' dalam kode Anda ke backend yang baru diterapkan.

Aturan kedua adalah menulis ulang '/*' ke file 'index.html'.

Setelah itu, itu harus mencoba untuk menyebarkan lagi dan pesannya harus menyatakan "mengunggah bangunan ..." dan "situs Anda aktif".

Beri tahu saya jika Anda memiliki pertanyaan atau kesulitan. Apa cara lain yang dapat Anda gunakan untuk menerapkan aplikasi MERN full-stack?

Silakan hubungi saya di LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/