Deploy, re-deploy to surge and common errors
Tags: deploy, hosting, surge
Published: 2023-01-31 07:39:43

Github pages এ ডেপলয় করা easier. কিন্তু একটা বড় limitation হলঃ **private repository ডেপলয় করা অত ইজি না।** কি easy? তাহলে private repository ডেপলয় করে দেখান… It’s your task 😀  Netlify তে deploy করাও খুব easy. কিন্তু **মাঝেমধ্যেই কোনও reason ছাড়াই দেখা যায় netlify তে ডেপলয় হয় না।** চলুন এদের একটা **alternative** খুঁজে বের করি। 

You can try **[<u>Surge</u>](https://surge.sh/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xymsyfnss2x6s3etdmnk.JPG)

Let’s have a look it’s **features of the free plan**:

- Provides 404.html page functionality
- Unlimited websites and APIs
- Custom domain feature
- Easy to deploy via CLI
- Unlimited websites
- Time saving deployment

**[<u>Let’s get started with Surge</u>](https://surge.sh/help/getting-started-with-surge)**

## Deploy to Surge:
আপনাকে just কয়েকটা easier steps follow করতে হবে। Then done.

**Step - 1:** সবার প্রথমে আপনার পিসি/ ল্যাপটপ / ডেক্সটপ এ **[<u>Node.js</u>](https://nodejs.org/en/)** এর recent version install করা থাকতে হবে।

**Step - 2:** এরপর আপনার command prompt নিচের command টি দিন

```
npm install --global surge
```

**Step - 3:** এখন just একটা command. 

```
Surge
```

**Points to be noted for this command:**

1. এই command টি দেওয়ার পর **শুধু প্রথম বার যখন আপনি ডেপলয় করছেন আপনার email and password সেট করতে হবে**, যেন আপনার PC তে Surge signed in/ logged in হয়। নিচের মত করে email দিয়ে তারপর enter press করবেন ( যেই ইমেইল দিয়ে সাইন ইন করতে চাচ্ছেন )। 

2. তারপর password দিবেন ( Password দেওয়ার পর আপনার মনে হতে পারে password লিখলাম কিন্তু **স্ক্রীন এ কিছুই দেখাচ্ছেনা, black হয়ে আছে। তাহলে কি password ঠিকমত লিখা হয়নি?** না, এরকম কিছুই না। একটু protected রাখার জন্য ওদের password enter এর সিস্টেম টা এরকম। ) আপনি just ঠিকঠাক একটা password লিখে enter press করুন।

3. এখন আপনার project path specify করে দিতে হবে। মানে আপনি কোন project টা ডেপলয় করছেন আপনার pc তে সেটার located path টা ঠিকমত enter করতে হবে।

4. তারপর একটা random ডোমেইন আপনাকে suggest করা হবে। কিছুটা এরকমঃ
 
**something**.surge.sh -> এই something লিখা part টুকু আপনার ইচ্ছেমত আপনি যেকোনো নামে customize করতে পারবেন। For example: **phero**.surge.sh  আর যদি কোনও customization না চান তাহলে যেভাবে আছে, সেভাবেই রেখে দিন। **It will be your final website link. **

তারপর enter press করুন। 

Bingo! That’s all!!. It will take a while if you have **a stable net connection.** 👍

## Update your deployed site to Surge:

Enter just one command 

```
Surge
```

Here follow **points 3 & 4 of deploy to surge section above**. ☝️ এখানে আপনি প্রথম বার সাইট এর জন্য যেই url তৈরি করেছিলেন, সেটাই লিখে দিতে পারেন। [ নোটঃ চাইলে অন্য কোনও নতুন url ও সেট করতে পারেন। তখন নতুন url এ থাকবে updated site টা। আগের url এ থাকবে আগের ste টা। বেশি উল্টাপাল্টা মনে হলে ignore this note part 😁 ]

**আপনি যদি এই বার বার project update করার সময় নতুন করে url সেট করার ঝামেলা থেকে মুক্তি পেতে চান, তাহলে just একটা লাইন লিখতে হবে আপনাকে এবং এটা একবার লিখলেই হবে। **

```
echo your_URL > CNAME
```

For my case: 

```
echo mealdb.surge.sh > CNAME
```

এই লাইন টা লিখলে আপনার প্রোজেক্ট ফোল্ডার এ একটা ফাইল তৈরি হবে CNAME হিসেবে। যেটার মধ্যে শুধু URL name টা saved হয়ে থাকবে। 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7h0ppmioou9j8dph69s.JPG)

তারপর আপনি যতবার ডেপলয় করতে যাবেন URL আর আপনাকে টাইপ করতে হবেনা। Auto filled হয়ে যাবে। 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15ad10gsvibo8ncka2z5.JPG)


## Some common errors with Surge deployment:

**Error - 1:** আপনার unstable net connection এর জন্য ডেপলয় হতে অনেকটা টাইম নিতে পারে, আবার অনেকসময় কিছুটা টাইম নেওয়ার পর নিচের error গুলো throw করতে পারেঃ

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owx76bm4wo54t0jh85bw.JPG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/409z8cbysx6h2blzx6wx.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vghkg8yt4raw4ndexkeb.jpg)

**Error - 2:** আপনার html file এর নাম যদি index.html এর পরিবর্তে অন্য কিছু হয়, তাহলে নিচের মত একটা 404 খেয়ে যাবেন। 😛 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r813i8d9vd2vygybkqqv.JPG)

তাই 404 থেকে বাঁচতে হয় html file এর নাম **index.html রাখুন**। অথবা site url এর শেষে একটা **slash দিয়ে html file এর নাম টা বসিয়ে দিন**। 
**For example:** 
**My main url :** _chayti.surge.sh_
**My html file name :** _home.html_
**So, my actual site url will be :** _chayti.surge.sh/home.html_

**Error - 3:** এখন আপনি ভাবতেই পারেন, এতক্ষন random site url , custom site url অনেক কিছু শুনলাম, তাহলে random হোক / custom হোক, সেই url টা already কারো না কারো published হতেই পারে। **তাহলে আমি যখন url link ডেপলয় করব সেটা অন্য কারো সাথে cross connected/ error ঘটাতে পারে।** 
😃 . 
এখানেই ত মজা। Surge জিনিসটা অনেক technically handle করেছে। **এরকম যদি হয় already অন্য কারো published url এ আপনি আপনার site deploy করতে চাচ্ছেন, তখন সুন্দরমত এই error টা খেয়ে বসে থাকবেন** 😅. **So, the url name must be unique. Otherwise আপনি ডেপলয়ই করতে পারবেন না।** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4zwczaz7b1lh88m3d1d.jpg)

## How to deploy your react project to surge:

এখানেও সব কিছু আগের মতই, হাল্কা একটু difference আছে, সেটা হলঃ আপনাকে একটা build folder তৈরি করতে হবে, তারপর, cd build করে সেই build directory তে যেতে হবে, তারপর শুধু সেই build folder ডেপলয় করলেই হবে surge এ। 

```
npm run build
cd dist
surge
```

_~Let’s_code_your_career!_
_~Happy_deployment!!_ 😀
_~Happy_coding!!!_