8 இலவச React ஆப் ஹோஸ்டிங் சேவைகள்1 min read
Reading Time: 9 minutesஎனவே நீங்கள் React பயன்பாட்டை உருவாக்கியுள்ளீர்கள், ஆனால் அதை எப்படி அல்லது எங்கு ஹோஸ்ட் செய்வது என்பது உங்களுக்குத் தெரியவில்லை. இந்தக் கட்டுரையில், 8 இலவச React ஹோஸ்டிங் சேவைகள் மூலம் நாங்கள் உங்களை அழைத்துச் செல்வோம், நாங்கள் எவ்வாறு பயன்படுத்தினோம் என்பதைக் காண்பிப்போம் இந்த React பயன்பாடு ஒவ்வொன்றையும் பயன்படுத்தி, செயல்பாட்டில் நாங்கள் கற்றுக்கொண்டதைச் சொல்லுங்கள்.
எங்கள் பயன்பாட்டை Figma ஐப் பயன்படுத்தி உருவாக்கினோம் Anima சொருகி, செயல்பாடு, பதிலளிக்கக்கூடிய நடத்தை மற்றும் பணக்கார மீடியாவைச் சேர்க்க எங்களுக்கு அனுமதித்தது முழு UI க்கும் dev-ready React குறியீட்டை ஏற்றுமதி செய்யவும். வடிவமைத்து வரிசைப்படுத்த எங்களுக்கு ஒரு நாள் பிடித்தது.
உங்கள் React பயன்பாட்டை இலவசமாக எங்கு ஹோஸ்ட் செய்வது
React போன்ற கூறு அடிப்படையிலான கட்டமைப்புகளின் எழுச்சிக்கு நன்றி, சர்வர்லெஸ் ஹோஸ்டிங் தீர்வுகள் அதிகரித்து வருகின்றன. Amazon AWS, Microsoft Azure மற்றும் Google Cloud ஆகியவை தற்போது ஆதிக்கம் செலுத்தும் தளங்களாக உள்ளன. இருப்பினும், குறைந்த முயற்சி தேவைப்படும் அர்ப்பணிப்புள்ள ஃப்ரண்ட்எண்ட் ஹோஸ்டிங் சேவைகளை நோக்கி வளர்ந்து வருகிறது, மேலும் எந்த நேரத்திலும் உங்களை இயக்க முடியும்-மேலும் பெரும்பாலானவை CI/CD அடங்கும். நாங்கள் சோதித்த 8 இலவச React ஆப் ஹோஸ்டிங் சேவைகள் இதோ:
1. நெட்லிஃபை
2. Vercel
3. AWS பெருக்கி
4. ஃபயர்பேஸ்
7. விடாது
8. எழுச்சி
இந்த இலவச React பயன்பாட்டு ஹோஸ்டிங் சேவைகளை இன்னும் விரிவாகப் பார்க்கலாம், மேலும் ஒவ்வொன்றையும் பயன்படுத்தி React பயன்பாட்டை எவ்வாறு பயன்படுத்தினோம் என்பதை விளக்குவோம்.
நெட்லிஃபை
பின்னணி
Netlify 2014 இல் நிறுவப்பட்டது மற்றும் இது தொடக்கத்தில் இருந்து நிலையான வலைத்தளங்களை ஹோஸ்ட் செய்வதில் கவனம் செலுத்தியது. அதன் தாராளமான இலவச அடுக்கு காரணமாக இது நிறைய டெவலப்பர்களை ஈர்த்தது. இரண்டு வருடங்கள் கீழே, Netlify மிகவும் பிரபலமான JAMstack மற்றும் நிலையான வலைத்தள ஹோஸ்ட்களில் ஒன்றாக வளர்ந்தது.
எப்படி பயன்படுத்துவது
- வெறுமனே, நீங்கள் GitHub உடன் பதிவு செய்யலாம் அல்லது உள்நுழைவீர்கள். உங்கள் சுயவிவரத்தில் உள்ள களஞ்சியங்களை நீங்கள் அணுகலாம் மற்றும் அவற்றை விரைவாக வரிசைப்படுத்தலாம் என்பதை இது உறுதி செய்கிறது.
- உள்நுழைந்ததும், “புதிய தளத்தைச் சேர்” என்பதைக் கிளிக் செய்து, “ஏற்கனவே உள்ள திட்டத்தை இறக்குமதி செய்” என்பதைத் தேர்ந்தெடுக்கவும்.

- உங்கள் வழங்குநராக GitHub என்பதைக் கிளிக் செய்யவும்.

- “வங்கி-இணையதளம்” அல்லது உங்கள் திட்டத்தின் பெயர் எதுவாக இருந்தாலும் அதைத் தேர்ந்தெடுக்கவும்.

- வரிசைப்படுத்தல் அமைப்புகளை நன்றாக மாற்றவும் (எங்கள் இணையதளத்தில், இயல்புநிலைகள் சரியாக வேலை செய்யும்), பின்னர் “தளத்தை வரிசைப்படுத்து” என்பதைக் கிளிக் செய்யவும்.

- பயன்படுத்தப்பட்டதும், பொது URL இல் அதைப் பார்க்கலாம், அதை நீங்கள் உலகத்துடன் பகிர்ந்து கொள்ளலாம். ஆமாம்!

இதோ Netlify இல் பயன்படுத்தப்பட்ட நேரடி பயன்பாடு.
நன்மை தீமைகள்
Netlify அமைப்பதும் வரிசைப்படுத்துவதும் எளிதானது, நாங்கள் இங்கு சோதித்த வேகமான சேவைகளில் இதுவும் ஒன்றாகும். ஒரு தீங்கு என்னவென்றால், உங்களுக்கு கூட்டுப்பணியாளர்கள் மற்றும்/அல்லது குழு தேவைப்பட்டால், நீங்கள் கட்டணத் திட்டத்திற்கு மேம்படுத்த வேண்டும்.
Vercel
பின்னணி
Vercel (முதலில் Zeit என அறியப்பட்டது) 2015 இல் நிறுவப்பட்டது மற்றும் விரைவில் புகழ் பெற்றது. இணையதளங்களை உருவாக்குவதற்கான பிரபலமான React கட்டமைப்பான Next.js இன் பராமரிப்பாளர்கள். அவர்கள் வணிகம் அல்லாத வலைத்தளங்களுக்கு இலவச அடுக்கு மற்றும் சேவையகமற்ற செயல்பாடுகளுக்கு தங்கள் எட்ஜ் நெட்வொர்க்கைப் பயன்படுத்துவதற்கான வழிகளை வழங்குகிறார்கள்.
எப்படி பயன்படுத்துவது
- GitHub உடன் உள்நுழையவும் அல்லது பதிவு செய்யவும்.

- “புதியதைச் சேர்…” கீழ்தோன்றும் என்பதைக் கிளிக் செய்து, “திட்டம்” என்பதைத் தேர்ந்தெடுக்கவும்.

- “வங்கி-இணையதளம்” அல்லது உங்களுக்குப் பிடித்த React திட்டத்தைத் தேர்வு செய்யவும்.

- வரிசைப்படுத்தல் அமைப்புகளுக்கான இயல்புநிலைகளுடன் சென்று “வரிசைப்படுத்து” என்பதைக் கிளிக் செய்தோம்.

- சிறிது நேரம் கழித்து, நாங்கள் வலைத்தளத்தை வரிசைப்படுத்தினோம்.

இதோ நேரடி URL.
நன்மை தீமைகள்
Vercel வரிசைப்படுத்தல் செயல்முறையின் நிறுவல் பகுதியை தற்காலிகமாக சேமிக்க சிறிது நேரம் தேவைப்படுகிறது, ஆனால் அதன் பிறகு, இது வேகமான சேவைகளில் ஒன்றாகும். நீங்கள் அழுத்தும் ஒவ்வொரு கிளைக்கும் முன்னோட்ட வரிசைப்படுத்தல்களை இது காட்டுகிறது மற்றும் கேச்சிங் காரணமாக விரைவாகச் செய்கிறது.
AWS பெருக்கி
பின்னணி
AWS என்பது கிளவுட் தயாரிப்புகளின் மிகப்பெரிய தொகுப்பாகும், மேலும் அவற்றில் சிலவற்றைப் பெறுவதற்கான எளிதான வழியாக ஆம்ப்லிஃபை விளம்பரப்படுத்தப்படுகிறது. AWS ஆம்ப்ளிஃபை மூலம், AWS இல் முழு-ஸ்டாக் பயன்பாடுகளை விரைவாக உருவாக்கலாம், அனுப்பலாம் மற்றும் ஹோஸ்ட் செய்யலாம், AWS சேவைகளின் அகலத்தைப் பயன்படுத்துவதற்கான நெகிழ்வுத்தன்மையுடன்.
எப்படி பயன்படுத்துவது
- AWS இல் பதிவு செய்யவும் அல்லது உள்நுழையவும், பின்னர் AWS ஆம்ப்ளிஃபை எனத் தேடி “தொடங்கு” என்பதைக் கிளிக் செய்யவும்.
- GitHub ஐத் தேர்ந்தெடுத்து அதை அங்கீகரிக்கவும் (நான் அதை “வங்கி-இணையதளம்” ரெப்போவிற்கு மட்டுமே அனுமதித்தேன்).

- “சமீபத்தில் புதுப்பிக்கப்பட்ட களஞ்சியங்கள்” பிரிவில் ரெப்போவைத் தேர்ந்தெடுக்கவும்.
- உருவாக்க அமைப்பில், நாம் மாற்ற வேண்டும் அடிப்படை டைரக்டரி எங்கள் பயன்பாடு இருக்க வேண்டும் மாவட்டம் அப்படி:
பின்னர், உருவாக்க அமைப்புகள் இப்படி இருக்க வேண்டும்:
- உருவாக்க அமைப்பில், நாம் மாற்ற வேண்டும் அடிப்படை டைரக்டரி எங்கள் பயன்பாடு இருக்க வேண்டும் மாவட்டம் அப்படி:
- அடுத்த கட்டத்தில், “சேமி மற்றும் வரிசைப்படுத்து” என்பதைக் கிளிக் செய்யவும்.

- சிறிது நேரம் கழித்து, இணையதளம் வரிசைப்படுத்தப்பட்டு பயன்படுத்த தயாராக இருக்கும்.

மேலும் நாங்கள் வாழ்கிறோம்! இதோ URL.
நன்மை தீமைகள்
நீங்கள் திருத்த வேண்டும் அடிப்படை டைரக்டரி வரிசைப்படுத்தல் விவரக்குறிப்பில் – இது பெட்டிக்கு வெளியே அங்கீகரிக்கப்படவில்லை. UI சற்று சிக்கலானதாக உணர்கிறது, ஆனால் இது தனிப்பட்ட விருப்பம். AWS ஆம்ப்ளிஃபைக்கு ஒரு பெரிய சாத்தியம் உள்ளது, ஏனெனில் பல AWS இணைய சேவைகள் கைக்கு எட்டும் தூரத்தில் உள்ளன.
ஃபயர்பேஸ்
பின்னணி
Firebase என்பது Google சேவையாகும், இது நிகழ்நேர சேமிப்பக தளமாக அறியப்படுகிறது. ஆனால் இது நிலையான வலைத்தளங்கள் மற்றும் Express.js மைக்ரோ சர்வீஸ்கள் அல்லது APIகளுக்கான ஹோஸ்டிங் விருப்பத்தையும் கொண்டுள்ளது, மேலும் உங்கள் குழு பணிபுரியும் கிளைகளுக்கான URLகளின் முன்னோட்டத்தை ஆதரிக்கிறது. Netlify, Vercel மற்றும் பிறவற்றைப் போலவே, இது CDN நெட்வொர்க்கில் பயன்படுத்தப்பட்ட உள்ளடக்கத்தை வழங்குகிறது.
எப்படி பயன்படுத்துவது
- நிறுவவும் ஃபயர்பேஸ்-கருவிகள் உடன் npm install -g firebase-tools.
- உடன் Firebase இல் உள்நுழைக ஃபயர்பேஸ் உள்நுழைவு. நீங்கள் உள்நுழைந்ததும், இது போன்ற ஒரு செய்தியைப் பார்க்க வேண்டும்:
- திட்டக் கோப்பகத்திற்குச் சென்று இயக்கவும் ஃபயர்பேஸ் துவக்கம், நீங்கள் இதைப் போன்ற ஒன்றைப் பார்க்க வேண்டும்:
ஃபயர்பேஸ் ஹோஸ்டிங்கிற்கான கோப்புகளை விருப்ப GitHub Action deploys மூலம் உள்ளமைப்பதற்கான விருப்பத்தைத் தேர்வு செய்யவும். பின்னர், நீங்கள் CLI இலிருந்து நேரடியாக ஒரு திட்டத்தை உருவாக்கலாம் அல்லது Firebase UI ஐப் பயன்படுத்தி அதைச் செய்து பின்னர் இணைக்கலாம். நாங்கள் கட்டளை வரியில் இருந்து திட்டத்தை உருவாக்கினோம், இதன் விளைவாக வரும் கேள்விகளுக்கு நாங்கள் இவ்வாறு பதிலளித்தோம்: - பின்னர், ஓடு ஃபயர்பேஸ் வரிசைப்படுத்தல் உண்மையில் இருந்து கோப்புகளை வரிசைப்படுத்த மாவட்டம்அடைவு. கோப்பகம் காணவில்லை என்றால், இயக்குவதை உறுதிசெய்க npm ரன் உருவாக்கம் முதலில் கோப்புகளை உருவாக்க வேண்டும். தி ஃபயர்பேஸ் வரிசைப்படுத்தல் கட்டளை கீழே உள்ள உதாரணத்திற்கு ஒத்த வெளியீட்டை உருவாக்க வேண்டும்:

இப்போது உங்களால் முடியும் இணையதளத்தைப் பார்க்கவும் URL இல் வழங்கப்பட்டது. ஆமாம்!
நன்மை தீமைகள்
Firebase மிகவும் எளிமையானது, ஆனால் அதை உங்கள் திட்டப்பணியில் அமைக்கும்போது, நீங்கள் பதிலளிக்க வேண்டிய கேள்விகள் சற்று குழப்பமானவை. அதிர்ஷ்டவசமாக, மேலே உள்ள பிரிவில் உங்களுக்கான பதில்களை நாங்கள் அளித்துள்ளோம், ஆனால் தொடர்வதற்கு முன் அவர்களுக்கு உண்மையான Firebase அம்சங்களைப் புரிந்து கொள்ள வேண்டும். இது தவிர, Firebase விரைவாக வரிசைப்படுத்தப்பட்டு, பயன்படுத்தப்பட்ட கோப்புகளை நீங்கள் முன்னோட்டமிடக்கூடிய URL ஐ உருவாக்க முடியும். நீங்கள் CLI உடன் GitHub அதிரடி வரிசைப்படுத்துதல்கள் மூலம் அதை எளிதாக தானியக்கமாக்கலாம், இது சுத்தமாக உள்ளது.
GitHub பக்கங்கள்
பின்னணி
GitHub பக்கங்கள் சில காலமாக உள்ளது, மேலும் இது GitHub இலிருந்து நேரடியாக ஆவணங்கள் அல்லது தனிப்பட்ட இணையதளத்தை வெளியிட எளிதான வழியாகும். நிலையான உள்ளடக்கத்திற்கு இது மிகவும் அழகாக இருக்கிறது மற்றும் குறைந்த முதலீட்டில் எளிய தளங்களை வரிசைப்படுத்த பலர் இதைப் பயன்படுத்துகின்றனர். உங்கள் திட்டம் பொது மற்றும் ஒரு வலைத்தளத்தை ஹோஸ்ட் செய்வதற்கான விரைவான மற்றும் மலிவான வழியாக இருந்தால் அதைப் பயன்படுத்துவது இலவசம்.
எப்படி பயன்படுத்துவது
நீங்கள் திருத்த வேண்டும் என்பதை நினைவில் கொள்ளவும் App.jsx நாம் எங்கே அழைக்கிறோம் திசைவி மற்றும் சேர்க்க அடிப்படை பெயர் ரெப்போ பெயருடன் பொருந்த வேண்டும். எனவே இது எப்படி App.jsx பார்க்க வேண்டும்:
நாம் மாற்ற வேண்டும் அடிப்படை பெயர் ஏனெனில் GitHub பக்கங்கள், இந்தப் படிவத்தின் `https://GITHUB_USERNAME.gitlab.io/REPO_NAME` இன் URL க்கு இணையதளத்தை வரிசைப்படுத்தும். இதற்கான அடிப்படைப் பெயரை அமைக்காமல் இணையதளம் சரியாக இயங்காது react-router-dom.
- குறியீடு மாறிய பிறகு, நாம் நிறுவ வேண்டும் gh-பக்கங்கள் தொகுப்பு:

- மற்றும், ஒரு சேர்க்கவும் முன்கூட்டியே பயன்படுத்து மற்றும் ஏ வரிசைப்படுத்து ஸ்கிரிப்ட் pack.json:

- பின்னர், நாங்கள் வெறுமனே ஓடுகிறோம் npm ரன் வரிசைப்படுத்தல். அது தூண்டும் npm ரன் உருவாக்கம் மற்றும் அது பயன்படுத்தும் gh-பக்கங்கள் உள்ளடக்கங்களை வெளியிட மாவட்டம் GitHub இல் ஒரு தனி கிளைக்கு அழைக்கப்படும் gh-பக்கங்கள்.
- இறுதியாக, என்பதை சரிபார்க்கவும் gh-பக்கங்கள் கீழே உள்ளதைப் போன்ற GitHub பக்கங்களுக்குப் பயன்படுத்தப்படுகிறது:

இதோ நேரடி URL.
நன்மை தீமைகள்
உங்கள் பயனர்பெயரில் இருந்து வேறுபட்ட திட்டப்பணியை நீங்கள் பயன்படுத்தினால், அது GitHub இல் உள்ள எங்கள் இலவச டொமைனில் உள்ள துணை அடைவில் வரிசைப்படுத்தப்படும். பின்னர், துணை அடைவுக்குள் இருப்பதன் தர்க்கத்தை ஆதரிக்க கூடுதல் குறியீட்டை எழுத வேண்டும்.
இது எங்களின் பயன்பாட்டில் தொடர்ச்சியான வரிசைப்படுத்தலை ஆதரிக்காது, ஆனால் நீங்கள் அதை அமைக்கலாம். அமைத்தவுடன், மாற்றங்களை வரிசைப்படுத்த இது விரைவானது.
GitLab பக்கங்கள்
பின்னணி
GitHub ஐப் போலவே, GitLab அதன் சொந்த ஹோஸ்டிங் தீர்வைக் கொண்டுள்ளது, மேலும் அவர்கள் அதை GitLab பக்கங்கள் என்று அழைக்கிறார்கள். நான் அவர்களுக்கு கொடுக்க வேண்டும், GitHub பக்கங்களை விட GitLab பக்கங்களுக்கு தொடர்ச்சியான வரிசைப்படுத்தலை அமைப்பது எளிது.
எப்படி பயன்படுத்துவது
- GitLab இல் பதிவு செய்யவும் அல்லது உள்நுழையவும்
- உங்களிடம் ஏற்கனவே GitLab இல்லை என்றால், அதில் ஒரு ரெப்போவைச் சேர்க்கவும். உங்களால் முடியும் நான் அங்கு சேர்த்ததை முட்கரண்டி
GitHub பக்கங்களைப் போலவே, நீங்கள் திருத்த வேண்டும் App.jsx நாம் எங்கே அழைக்கிறோம் திசைவி மற்றும் சேர்க்க அடிப்படை பெயர் ரெப்போ பெயருடன் பொருந்த வேண்டும். எனவே இதுதான் இறுதி மாற்றம்:
நாம் மாற்ற வேண்டும் அடிப்படை பெயர் ஏனெனில் GitLab பக்கங்கள் இந்தப் படிவத்தின் URLக்கு இணையதளத்தை வரிசைப்படுத்தும்: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. இதற்கான அடிப்படைப் பெயரை அமைக்காமல் இணையதளம் சரியாக இயங்காது react-router-dom. - நீங்கள் திட்டத்தைத் திருத்தி GitLab க்கு அனுப்பியதும், Settings > Pages என்பதற்குச் சென்று, GitLab பக்கங்களுக்கு ரெப்போவை வரிசைப்படுத்த நான்கு-படி வழிகாட்டியுடன் நீங்கள் வரவேற்கப்படுவீர்கள்.

- வழிகாட்டியின் முதல் படி உருவாக்க படத்தை உள்ளிட வேண்டும். Node.js LTSஐப் பயன்படுத்துவோம்.

- அடுத்து, முன் கட்ட கட்டளையை உள்ளிடுவோம். தி npm ci இங்கே போதுமானதாக இருக்கும்.

- இப்போது உருவாக்க படிக்கு. நாம் கடந்து செல்ல வேண்டும் — –dist-dir பொது ஏனெனில் GitLab பக்கங்கள் இணையத்தளத்தை உருவாக்க எதிர்பார்க்கின்றன பொது அடைவு. நீங்கள் வேறு எந்த கோப்பகத்திலிருந்தும் தப்பிக்க முடியாது, மன்னிக்கவும்.

- புதிதாக உருவாக்கப்பட்டதை உறுதிசெய்க .gitlab-ci.yml உங்கள் வலைத்தளத்தை எவ்வாறு வரிசைப்படுத்துவது என்பதை GitLab க்கு கூறும் கோப்பு.

- இப்போது, ரெப்போவின் CI/CD -> பைப்லைன்ஸ் பகுதிக்குச் சென்று, புதிதாக சேர்க்கப்பட்ட பைப்லைன் செயல்பாட்டைக் கவனிக்கவும்.

- சிறிது நேரம் கழித்து, பைப்லைன் வேலை முடிவடையும் மற்றும் இணையதளம் GitLab பக்கங்களில் வரிசைப்படுத்தப்படும்.
இதோ விளைவு.
நன்மை தீமைகள்
தொகுப்புகள் நிறுவுவது மெதுவாக உள்ளது, மேலும் அதைச் செயல்படுத்த கூடுதல் குறியீட்டைச் சேர்க்க வேண்டும், ஆனால் வழிகாட்டி வரிசைப்படுத்த நான்கு படிகளுடன் மிகவும் உள்ளுணர்வுடன் உள்ளது.
விடாது
பின்னணி
ரெண்டர் என்பது 2019 இல் தொடங்கப்படும் தொகுதியில் ஒரு புதிய குழந்தை. இது எல்லோரும் தங்கள் சேவைகளை (நிலையான இணையதளங்கள் உட்பட) பயன்படுத்துவதை சீர்குலைக்க முயற்சிக்கிறது. இதுவரை, அவர்கள் நன்றாக இருக்கிறார்கள் மற்றும் எண்ணிக்கையில் வளர்ந்து வருகின்றனர்.
எப்படி பயன்படுத்துவது
- ரெண்டரில் பதிவு செய்யவும் அல்லது உள்நுழையவும்.
- “புதிய” பொத்தானை அழுத்தி, “நிலையான தளம்” என்பதைத் தேர்ந்தெடுப்பதன் மூலம் புதிய நிலையான வலைத்தளத்தை உருவாக்கவும்.

- நீங்கள் பயன்படுத்த விரும்பும் ரெப்போவைத் தேர்ந்தெடுக்கவும்.

- வைத்திருங்கள் நூல்; நூல் கட்ட உருவாக்க அமைப்பில் கட்ட கட்டளை. துரதிருஷ்டவசமாக, இது வேலை செய்யாது npm ci; npm ரன் உருவாக்கம் மற்ற சேவைகளைப் போலவே. “வெளியீடு கோப்பகத்தை” என மாற்றவும் மாவட்டம் மற்றும் “நிலையான தளத்தை உருவாக்கு” என்பதைக் கிளிக் செய்யவும்.

- சிறிது நேரம் கழித்து, ரெண்டர் குறியீட்டை வரிசைப்படுத்தும்.

இதோ ரெண்டரிலிருந்து நேரடி URL.
நன்மை தீமைகள்
இது மிகவும் வேகமானது, ஆனால் `npm ci` மற்றும் `npm run build` கட்டளைகளுடன் எங்கள் திட்டத்திற்கு இது சரியாக வேலை செய்யாது. `நூல்` மட்டுமே வேலை செய்கிறது.
எழுச்சி
பின்னணி
எழுச்சி சில காலமாக உள்ளது. மட்டையின் வலதுபுறம், அவர்களின் சேவை பயன்படுத்த எளிதானது மற்றும் உங்கள் நிலையான வலைத்தளத்தை வரிசைப்படுத்த ஒன்று அல்லது இரண்டு கட்டளைகளை மட்டுமே எடுக்கும். இது இலவசம், ஆனால் 30$/மாதம் கட்டணத் திட்டத்தை வழங்குகிறது. கருவியின் ஸ்டோயிசம் தான் அதை பிரகாசிக்கச் செய்கிறது. சிக்கலான அமைப்பு தேவையில்லை, `சர்ஜ்` ஐ நிறுவி, `சர்ஜ்` மூலம் இயக்கவும்.
எப்படி பயன்படுத்துவது
- தயார் செய்ய, இயக்கவும் npm ரன் உருவாக்கம் நிலையான கோப்புகளை உள்ளே உருவாக்க மாவட்டம் அடைவு. தி எழுச்சி வரிசைப்படுத்துவதற்கு அவற்றைப் பயன்படுத்தும்.
- ஓடவும் npm நிறுவல் –உலகளாவிய எழுச்சி
- பின்னர், ஓடு எழுச்சி.
கவனிக்க வேண்டிய சில விஷயங்கள்:
நீங்கள் அதை இயக்குவது இது முதல் முறை என்றால், நீங்கள் Surge உடன் ஒரு கணக்கை உருவாக்க வேண்டும். கவலைப்பட வேண்டாம், இது எளிதானது. உங்கள் மின்னஞ்சல் மற்றும் விரும்பிய கடவுச்சொல்லை உள்ளிடவும்.
பின்னர், “திட்டத்தை” உள்ளிடுமாறு கேட்கப்படுவீர்கள், இது பாதையாக இருக்க வேண்டும் மாவட்டம் அடைவு. நீங்கள் இணைக்கலாம் மாவட்டம் நீங்கள் வரிசைப்படுத்தும் ரெப்போவுக்குள் நீங்கள் எழுச்சியுடன் ஓடினால் உங்களுக்கு வழங்கப்பட்ட பாதைக்கு.
பின்னர், உங்கள் வலைத்தளத்தின் எதிர்கால URL ஐ உள்ளிடவும். தனித்துவமான ஒன்றை முயற்சிக்கவும், ஏனெனில் என்ன எழுச்சி வழங்கப்பட்டது எனக்கு வேலை செய்யவில்லை.
URL உள்ளீட்டிற்குப் பிறகு, தி எழுச்சி இலிருந்து உள்ளடக்கங்களை வரிசைப்படுத்தும் மாவட்டம் குறிப்பிட்ட URL க்கு மேல். எனக்கு கிடைத்தது இதோ:
நன்மை தீமைகள்
இது விரைவானது மற்றும் எளிமையானது மற்றும் நீங்கள் ஒரு தனி இடைமுகத்தை ஏற்க வேண்டிய அவசியமில்லை – ஆனால் உங்கள் பயன்பாட்டிற்கு கிடைக்கக்கூடிய URL ஐ பரிந்துரைக்க முடியவில்லை.
ஒவ்வொரு ஹோஸ்டிங் சேவைக்கும் பயன்படுத்த வேண்டிய நேரம்
எங்கள் முதல் 3 இலவச React ஹோஸ்டிங் சேவைகள்
- நெட்லிஃபை
- Vercel
- எழுச்சி
முக்கிய எடுப்புகள்
இந்த இலவச React ஆப்ஸ் ஹோஸ்டிங் சேவைகள் ஒவ்வொன்றையும் சோதித்த பிறகு, Netlify தான் சிறந்ததாக இருக்கும் என்று நினைக்கிறோம். இது உங்களுக்குத் தேவையான பல அம்சங்களுடன் விரைவான வரிசைப்படுத்தல்களை வழங்குகிறது. அதற்குப் பிறகு, Vercel, இது நிறைய அம்சங்களைக் கொண்டுள்ளது மற்றும் ஆரம்ப வரிசைப்படுத்தலுக்குப் பிறகு மிகவும் விரைவானது. பின்னர், எங்களிடம் Surge உள்ளது, இது ஒரு குறைந்தபட்ச வரிசைப்படுத்தல் கருவியாகும், நீங்கள் மேம்படுத்த முடிவு செய்தால் மிகவும் மலிவாக இருக்கும்.

Figma
Adobe XD
Blog











பின்னர், உருவாக்க அமைப்புகள் இப்படி இருக்க வேண்டும்:


ஃபயர்பேஸ் ஹோஸ்டிங்கிற்கான கோப்புகளை விருப்ப GitHub Action deploys மூலம் உள்ளமைப்பதற்கான விருப்பத்தைத் தேர்வு செய்யவும். பின்னர், நீங்கள் CLI இலிருந்து நேரடியாக ஒரு திட்டத்தை உருவாக்கலாம் அல்லது Firebase UI ஐப் பயன்படுத்தி அதைச் செய்து பின்னர் இணைக்கலாம். நாங்கள் கட்டளை வரியில் இருந்து திட்டத்தை உருவாக்கினோம், இதன் விளைவாக வரும் கேள்விகளுக்கு நாங்கள் இவ்வாறு பதிலளித்தோம்:



நாம் மாற்ற வேண்டும் 









