ΠΊΠ°ΠΊ Π·Π°Π΄Π΅ΠΏΠ»ΠΎΠΈΡΡ react ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° netlify
ΠΠ°ΠΊ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Netlify
Apr 1, 2019 Β· 5 min read
Π― Π½Π°ΡΡΡ Π²Π°Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠ΅ ΠΈ Ρ
ΠΎΡΡΠΈΠ½Π³Ρ React ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ Netlify.
Netlify β ΡΡΠΎ ΡΠ΅ΡΠ²ΠΈΡ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΠΈ ΡΠ±ΠΎΡΠΊΠΈ, ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°ΠΌΠΈ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Netlify ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΡΠΎΡΡΡΡ
ΠΈ Π±ΡΡΡΡΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Π Netlify Π΅ΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ°ΡΠΈΡ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, Π°Π²ΡΠΎΡΠΈΠ·ΡΠ΅ΠΌΡΡ Π½Π° Netlify Π»ΡΠ±ΡΠΌ ΠΈΠ· Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² (Github, Gitlab, Bitbucket, Π°Π΄ΡΠ΅Ρ ΠΏΠΎΡΡΡ) Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Ρ ΠΎΠ΄Π°.
ΠΠ°ΡΠ½Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ±ΠΎΡΠΊΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π’Π°ΠΊ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ. Π Π½Π΅ΠΉ Π±ΡΠ΄ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π΄Π»Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠ΅ΠΉ ΡΡΠ΅Π΄Π΅.
ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Netlify.
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅
Π Netifly Π² ΡΠ΅ Π΄ΠΎ Π±Π΅Π·ΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΏΡΠΎΡΡΠΎ β ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ Π² ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (ΠΊΡΠ°ΠΉΠ½Π΅Π΅ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅). Π’Π°ΠΊ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΠΎ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ URL.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Netlify β ΡΡΠΎ ΡΠΊΡΠ°Π½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ Π² Netlify.
Netlify CLI
Π’Π°ΠΊΠΆΠ΅ Π² Netifly Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΠΌΠ΅Π½Π½ΠΎ ΡΡΠΈΠΌ ΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΈ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ CLI Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ. ΠΠ»Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠΈΡΡΡΡ, ΡΡΠΎ ΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°ΡΡΡΡ Π½Π° Netlify ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Netlify CLI.
ΠΠ°ΠΆΠΌΠ΅ΠΌ Authorize. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΠ»Π΅Π΄ΡΠΉΡΠ΅ ΡΠΊΠ°Π·Π°Π½ΠΈΡΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ
1. Π ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅: β This folder isnβt linked to a site yet. What would you like to do?β (ΠΡΠ° ΠΏΠ°ΠΏΠΊΠ° Π΅ΡΠ΅ Π½Π΅ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΠΊ ΡΠ°ΠΉΡΡ. Π§ΡΠΎ ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ?) ΠΠ΄Π΅ΡΡ CLI ΡΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ, Ρ ΠΎΡΠΈΡΠ΅ Π»ΠΈ Π²Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ ΠΊ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ ΠΈΠ»ΠΈ ΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ, ΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Create & configure a new site (Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ).
2. ΠΠ΄Π΅ΡΡ Π½Π°ΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°. Π― ΡΠΊΠ°Π·ΡΠ²Π°Ρ portfolio on netlify (ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅).
3. Π’Π΅ΠΏΠ΅ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ Π°ΠΊΠΊΠ°ΡΠ½Ρ Netlify Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π― Π²ΡΠ±ΠΈΡΠ°Ρ my account (Abhishek Jakhar), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²ΠΎΠΉ.
4. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΡΠΈ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠ΅ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ. ΠΠ΅ΡΠ°ΡΠ°Π΅ΠΌ build ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Enter.
5. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΉΡ. Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°ΡΡΡΡ Π½Π° ΡΠ΅ΡΠ½ΠΎΠ²ΠΎΠΌ URL. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΠ΅ URL Π² Π±ΡΠ°ΡΠ·Π΅Ρ.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ ΠΈ Π²ΠΈΠ΄ΠΈΠΌ Π½Π°Π΄ΠΏΠΈΡΡ: βIf everything looks good on your draft URL, take it to live with the β prod flagβ (ΠΡΠ»ΠΈ Π² ΡΠ΅ΡΠ½ΠΎΠ²ΠΎΠΌ URL Π²ΡΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Ρ ΠΎΡΠΎΡΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π±ΠΎΡΡΡ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ΅Π· ΡΠ»Π°ΠΆΠΎΠΊ β prod).
ΠΠ»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π² ΡΠ°Π±ΠΎΡΡΡ ΡΡΠ΅Π΄Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈΠ· ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅:
ΠΠ°Ρ ΠΎΠΏΡΡΡ ΠΏΡΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΡΡ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ, ΡΠΎ Π΅ΡΡΡ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ, Π½ΠΎ ΡΠΆΠ΅ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π΄Π²Π° URL. Unique Deploy URL (Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ URL ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ), ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ URL Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ, ΠΈ Live URL (ΡΠ΅Π°Π»ΡΠ½ΡΠΉ URL), Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ° ΠΈ Π΅Π³ΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΠΈ, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π°Π΄ΡΠ΅Ρ ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ. Π’ΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΡΡ ΡΠ°Π·Π²Π΅ΡΡΠΊΡ, ΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ URL, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ Π²Π΅ΡΡΠΈΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Live URL Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ URL.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Netlify Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π·Π°ΡΠΈΡΠ°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΠ΅ΡΠ΅Π· HTTPS.
ΠΡΠΈΠ±ΠΊΠ° Page Not Found
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ°ΡΡΡΡΡ React Router, ΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π΄ΠΈΡΠ΅ΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π·Π°ΠΌΠ΅Π½Ρ Π΄Π»Ρ URL. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΠ° 404.
ΠΠ°ΡΡΡΠΎΠΈΡΡ ΠΏΠ΅ΡΠ΅Π°Π΄ΡΠ΅ΡΠ°ΡΠΈΡ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π·Π°ΠΌΠ΅Π½Ρ Π² Netlify ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΉΠ» Π² ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π°Π·Π²Π°ΡΡ Π΅Π³ΠΎ _redirects. ΠΠ½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°ΠΌΠ΅Π½Ρ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ URL Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΠΉΠ» index.html, Π° Π½Π΅ Π²ΡΠ΄Π°Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ 404.
How to deploy a React application to Netlify
by Abhishek Jakhar
How to deploy a React application to Netlify
Iβm going to teach you how to deploy and host your React app with Netlify.
Netlify is a service that automates builds, deployments and manages your websites. Itβs one of the fastest and easiest deployment solutions these days.
Netlify offers a free plan. So first, we will log in to Netlify using any one of the options(Github, Gitlab, Bitbucket, Email) given on the login page.
Left(Login Page) Center(Authorization) Right(Netlify Online App)
We will start by creating a build of our application by running this command:
So, now our build folder will get generated which will contain all the production-ready files.
Now, there are two ways to deploy our application to Netlify.
Drag & Drop
Netifly has made it so easy that we have to just drag and drop our build folder into their online app (Rightmost image above), and our application will get deployed to a live URL.
Note: Netlify online app is the screen which appears after you have logged into your netlify account.
Netlify CLI
Netifly also provides a command line interface that lets you deploy your app straight from the command line. Thatβs what we will do now.
So first, weβll install the CLI using the following command:
Now, weβre ready to deploy it. To deploy the application we have to make sure that weβre in the project folder and then we will run this command:
We might get a pop-up window which will ask us to log in with Netlify and grant access to the Netlify CLI.
Pop-Up window asking you to log in with Netlify and grant access to the Netlify CLI
Now, weβll click Authorize. Now that weβre authorized, we can follow the command line prompts to deploy the app.
Command Line Prompts
2. It gives us the option to give our site a name. Iβll type portfolio on netlify (You can type any available name which you like).
3. Now it will ask for the Netlify account which you want to use, so I will select my account (Abhishek Jakhar), you can select yours.
4. Now, as deploy path, we need to specify our project’s build directory which contains the assets for deployment. So, we will type build there and press enter.
5. Now, our site will get created and will be deployed to a draft URL first, which we can view by copying and pasting the URL in the browser.
So to make our app live, weβll run the command shown on the command line
It will ask us one more time to specify the deploy path for the live build which again is our build folder.
Now, in the console output, we get two URLs. A Unique Deploy URL, which represents the unique URL for each individual deployment, and a Live URL which always displays your latest deployment.
So each time you update your website and deploy it, youβre going to get a unique URL for that deployment. Basically, if we deploy multiple times we will be having multiple unique URLs so that you can point users to a specific version of your application. But the live URL always displays your latest changes at the same URL.
Note: Netlify automatically secures your site over HTTPS for free.
Page Not Found Error
If youβre publishing an app that uses a router like React Router youβll need to configure redirects and rewrite rules for your URLs. Because when we click on any navigation item to change the page (route) and refresh the browser, we get a 404 error page.
So Netlify makes configuring redirects and rewrite rules for your URLs really easy. Weβll need to add a file inside the build folder of our app named _redirects. Inside the file, we need to include the following rewrite rule.
This rewrite rule is going to serve index.html file instead of giving a 404, no matter what URL the browser requests.
The _redirects file inside the build folder containing redirect rule
That’s all there is to it. On netlify.com you can see your site settings. There you can do stuff like set up a custom domain or connect the site to a GitHub repository.
I hope youβve found this post informative and helpful. I would love to hear your feedback!
Thank you for reading!
If this article was helpful, tweet it.
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Donations to freeCodeCamp go toward our education initiatives and help pay for servers, services, and staff.
ΠΠ°ΠΊ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Netlify
Π― Π½Π°ΡΡΡ Π²Π°Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠ΅ ΠΈ Ρ
ΠΎΡΡΠΈΠ½Π³Ρ React ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ Netlify.
Netlify β ΡΡΠΎ ΡΠ΅ΡΠ²ΠΈΡ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΠΈ ΡΠ±ΠΎΡΠΊΠΈ, ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°ΠΌΠΈ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Netlify ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΡΠΎΡΡΡΡ
ΠΈ Π±ΡΡΡΡΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Π Netlify Π΅ΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ°ΡΠΈΡ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, Π°Π²ΡΠΎΡΠΈΠ·ΡΠ΅ΠΌΡΡ Π½Π° Netlify Π»ΡΠ±ΡΠΌ ΠΈΠ· Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² (Github, Gitlab, Bitbucket, Π°Π΄ΡΠ΅Ρ ΠΏΠΎΡΡΡ) Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Ρ ΠΎΠ΄Π°.
ΠΠ°ΡΠ½Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ±ΠΎΡΠΊΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π’Π°ΠΊ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ. Π Π½Π΅ΠΉ Π±ΡΠ΄ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π΄Π»Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠ΅ΠΉ ΡΡΠ΅Π΄Π΅.
ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Netlify.
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅
Π Netifly Π²ΡΠ΅ Π΄ΠΎ Π±Π΅Π·ΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΏΡΠΎΡΡΠΎ β ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ Π² ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (ΠΊΡΠ°ΠΉΠ½Π΅Π΅ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅). Π’Π°ΠΊ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΠΎ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ URL.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Netlify β ΡΡΠΎ ΡΠΊΡΠ°Π½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ Π² Netlify.
Netlify CLI
Π’Π°ΠΊΠΆΠ΅ Π² Netifly Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΠΌΠ΅Π½Π½ΠΎ ΡΡΠΈΠΌ ΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΈ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ CLI Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ. ΠΠ»Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠΈΡΡΡΡ, ΡΡΠΎ ΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°ΡΡΡΡ Π½Π° Netlify ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Netlify CLI.
ΠΠ°ΠΆΠΌΠ΅ΠΌ Authorize. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΠ»Π΅Π΄ΡΠΉΡΠ΅ ΡΠΊΠ°Π·Π°Π½ΠΈΡΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ
1. Π ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅: βThis folder isnβt linked to a site yet. What would you like to do?β (ΠΡΠ° ΠΏΠ°ΠΏΠΊΠ° Π΅ΡΠ΅ Π½Π΅ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΠΊ ΡΠ°ΠΉΡΡ. Π§ΡΠΎ ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ?) ΠΠ΄Π΅ΡΡ CLI ΡΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ, Ρ ΠΎΡΠΈΡΠ΅ Π»ΠΈ Π²Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ ΠΊ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ ΠΈΠ»ΠΈ ΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ, ΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Create & configure a new site (Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΡ).
2. ΠΠ΄Π΅ΡΡ Π½Π°ΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°. Π― ΡΠΊΠ°Π·ΡΠ²Π°Ρ portfolio on netlify (ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅).
3. Π’Π΅ΠΏΠ΅ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ Π°ΠΊΠΊΠ°ΡΠ½Ρ Netlify Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π― Π²ΡΠ±ΠΈΡΠ°Ρ my account (Abhishek Jakhar), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²ΠΎΠΉ.
4. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΡΠΈ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠ΅ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ. ΠΠ΅ΡΠ°ΡΠ°Π΅ΠΌ build ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Enter.
5. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΉΡ. Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°ΡΡΡΡ Π½Π° ΡΠ΅ΡΠ½ΠΎΠ²ΠΎΠΌ URL. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΠ΅ URL Π² Π±ΡΠ°ΡΠ·Π΅Ρ.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ ΠΈ Π²ΠΈΠ΄ΠΈΠΌ Π½Π°Π΄ΠΏΠΈΡΡ: βIf everything looks good on your draft URL, take it to live with the β prod flagβ (ΠΡΠ»ΠΈ Π² ΡΠ΅ΡΠ½ΠΎΠ²ΠΎΠΌ URL Π²ΡΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Ρ ΠΎΡΠΎΡΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π±ΠΎΡΡΡ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ΅Π· ΡΠ»Π°ΠΆΠΎΠΊ β prod).
ΠΠ»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π² ΡΠ°Π±ΠΎΡΡΡ ΡΡΠ΅Π΄Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈΠ· ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅:
ΠΠ°Ρ ΠΎΠΏΡΡΡ ΠΏΡΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΡΡ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ, ΡΠΎ Π΅ΡΡΡ ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ, Π½ΠΎ ΡΠΆΠ΅ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π΄Π²Π° URL. Unique Deploy URL (Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ URL ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ), ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ URL Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·Π²Π΅ΡΡΠΊΠΈ, ΠΈ Live URL (ΡΠ΅Π°Π»ΡΠ½ΡΠΉ URL), Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ° ΠΈ Π΅Π³ΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΠΈ, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π°Π΄ΡΠ΅Ρ ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ. Π’ΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΡΡ ΡΠ°Π·Π²Π΅ΡΡΠΊΡ, ΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ URL, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ Π²Π΅ΡΡΠΈΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Live URL Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ URL.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Netlify Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π·Π°ΡΠΈΡΠ°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΠ΅ΡΠ΅Π· HTTPS.
ΠΡΠΈΠ±ΠΊΠ° Page Not Found
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ°ΡΡΡΡΡ React Router, ΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π΄ΠΈΡΠ΅ΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π·Π°ΠΌΠ΅Π½Ρ Π΄Π»Ρ URL. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΠ° 404.
ΠΠ°ΡΡΡΠΎΠΈΡΡ ΠΏΠ΅ΡΠ΅Π°Π΄ΡΠ΅ΡΠ°ΡΠΈΡ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π·Π°ΠΌΠ΅Π½Ρ Π² Netlify ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΉΠ» Π² ΠΏΠ°ΠΏΠΊΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π°Π·Π²Π°ΡΡ Π΅Π³ΠΎ _redirects. ΠΠ½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°ΠΌΠ΅Π½Ρ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ URL Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΠΉΠ» index.html, Π° Π½Π΅ Π²ΡΠ΄Π°Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ 404.
3 ways to deploy React apps to Netlify
December 29, 2020 6 min read 1690
Over the past few years, Netlify has easily worked its way into the hearts and minds of many developers. Some developers consider Netlify to be the best thing thatβs ever happened to them when it comes to software development and deployment.
Netlify prides itself on being the fastest way to build amazing sites. It can be a serious boon to your productivity. Netlify has a popular tagline that can serve as an anchor for this tutorial:
βJust git push to deploy worldwide.β
Prerequisites
The goal here is to take an in-depth look at deploying React apps using Netlify. To follow along with this tutorial, youβll need a working knowledge of the following:
What does Netlify have to offer?
Aside from the fact that most of its features are absolutely free, Netlify also eases deployments by providing the following:
Preparing the React application for deployment
There are three major ways for deploying applications to Netlify that weβll be highlighting today.
Before we dive into the specifics of each method, letβs touch on some generic steps that apply across all the different deployment methods.
Creating a React app
In the terminal, weβll run the following command:
The above command installs all the packages required to create a simple React application alongside some static files, thereby giving us a base to work with.
For this tutorial, weβll be deploying this sample app as is. Please feel free to make as many changes as you want to your sample application.
Create a build directory
Next, weβll want to create a build of our application in a production-ready build folder.
To accomplish this, letβs run the command below:
This command generates a build folder that represents a minified version of the entire application, containing everything we would need to deploy the application.
Now that we have our React app ready to be deployed, we can push this app to our version control of choice. In this case, weβll choose Github.
Version control with Github
There are so many version control systems out there, but for the sake of this tutorial, weβll focus on the Github version control system. Follow the guide here to get started with Github.
Weβll create a Github repository with any name we want. Then, weβll push our React app to the Github repo as shown in the image below. You can find my sample repo here.
Once we are done with this, we can dive deep into the different methods for deploying our app to Netlify.
3 methods for deploying React applications to Netlify
Method 1: Netlify UI
This method is best suited for developers who would rather deploy and configure applications manually using the Netlify user interface rather than using the command line terminal.
Connect Netlify account with Github account
If you do not have a Netlify account already, you can create a free one here.
Weβre going to log into Netlify with our already created Github account and follow the prompts to authorize Netlify Auth:
After authorizing Netlify Auth, we are redirected to our Github teams page. Next, weβll need to create a New Site from Git, as shown below:
Authorize Netlify to access repositories
Still on the create a new site page, we would be prompted to authorize Netlify to access the Github repositories. We can choose to give Netlify access to the entire Github account, or we can give Netlify access to a specific repository by clicking on the βConfigure Netlify on GitHubβ button at the bottom of the page.
Build options & deploy
After selecting the repository where the React application is hosted and choosing the deployment branch from the step above, we specify the basic build settings required to deploy the site.
Although this page comes pre-populated with the build step, please check that it conforms with the command that builds your application.
Upon successful deployment, we can preview our site with the test domain it returns.
Configuring site domain
Once we have previewed our React app deployment and feel good about how it looks, we can now configure a proper domain to serve our application. In the Deploys tab, we see details of site deployment. Thatβs where we register the subdomain we would like to use for our React application.
If we want to use a preregistered domain, Netlify will want us to verify that the domain is ours. Weβll click on set up a custom domain from the image above. This prompts us to verify our custom domain before Netlify can configure it.
Once this is successfully verified, we can access our application on the configured domain.
Netlify drag and drop
This method is pretty similar to the first method described above. However, the drag and drop feature is unique in that it utilizes the online app feature. It is specifically suited for super fast deployments.
Log in to your Netlify account
We can follow the first step of the first method above to connect our Github account to our Netlify account. However, weβll see that in this instance we are greeted with a blank page as shown below. This is what we refer to as the online app feature.
We will not be creating a new site from git like we did in the first method.
Drag and drop
Since we have our React app with an up-to-date build folder, all we have to do is drag the build folder into the blank space above. This black space is otherwise known as the online app. Netlify does the deployment magic for us.
Configuring site domain
This follows the same approach as configuring the site domain in the first method described above.
Netlify CLI
This method is for developers who are more comfortable running deployments from the command line terminal as opposed to using the UI or the drag and drop feature
Install Netlify CLI
Installing the Netlify CLI is very quick and easy. Itβs as easy as running an npm install command as shown below:
Authorize CLI
After installing the CLI, we navigate into our working directory and run the following commands to authorize our Netlify CLI against the Netlify account:
Note: Ensure that pop-up is not blocked in the browser window for redirects.
Running the Netlify deploy command will redirect us to a browser window requesting authorization for the Netlify CLI:
Deploy application
Now that the CLI has adequate permissions to access the Netlify account, we can go ahead and deploy the application.
There are a few command line prompts that weβll want to go through together. We can navigate the prompts by using the arrow keys on your device.
CLI prompt 1: This folder isnβt linked to a site yet. What would you like to do?
This is the first prompt after authorizing the app. It wants to know if we want to deploy this application to a pre-existing site, or to a new site. In this case, we are deploying to a new site, so we select βCreate & configure a new siteβ.
CLI prompt 2: Choose a site name (optional)
We could decide to configure the site details from here, or leave it blank so that Netlify gives us a random name. Regardless of the option you go with here, you can always update it later.
From the image above, we can see how Netlify beautifully generates a custom domain URL from the site name.
However, even though we have a url, we are not done with the deployment just yet.
CLI prompt 3: Deploy path
Since we are running the netlify deploy command in our React app working directory, our deployment path is our build folder. As a result, weβll just need to specify the path to our build directory in response to the prompt.
This is necessary, as only the build folder contains the production-ready files needed to deploy the application.
Now we have a URL we can test with.
Note: If the URL redirects to a webpage that throws a Page Not found error, this is an issue that has to do with an incorrect build file. Please run the netlify deploy command again and update the build file accordingly.
Deploy application to production
After testing with the website draft URL, we take our application live by running the command from our output above:
Once again, we would be required to specify the deploy path, which is the path to our build directory. After successful deployment, we get an updated website URL.
Two important things to note are the Unique deploy URL and the live URL, as shown above.
The Unique deploy URL represents the URL specific to each deployment.
The Live URL is the production website URL.
We can now access our React application from the Live URL.
Conclusion
Deploying React apps and other applications with Netlify is a seamless process, owing largely to the platformβs easy to use features.
Once the preferred deployment method is chosen and the requirements are met (e.g installing the CLI, if CLI is our preferred method), you can typically deploy your app to Netlify in under 60 seconds, all things being equal.
I hope you enjoyed creating and deploying a React application with me. Do let me know in the comment section.
Full visibility into production React apps
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps β start monitoring for free.