راه اندازی وب سرور محلی توسط Live Server و Express

افزونه Live Server یکی از محبوب‌ترین و پرکاربردترین افزونه‌های ویرایشگر VS Code است که توسط Ritwick Dey توسعه داده شده و تاکنون بیش از ۵۰ میلیون بار دانلود شده است. این افزونه یک سرور محلی (Local Development Server) با قابلیت بارگذاری خودکار (Live Reload) برای صفحات استاتیک و داینامیک راه‌اندازی می‌کند. یعنی هر بار که فایل HTML، CSS یا JavaScript خود را ذخیره کنید، مرورگر بدون نیاز به Refresh دستی، تغییرات را بلافاصله نمایش می‌دهد. این ویژگی برای طراحان و توسعه‌دهندگان وب که مدام در حال ویرایش و بررسی خروجی هستند، صدها ساعت در ماه صرفه‌جویی زمانی ایجاد می‌کند.

نصب Live Server در VS Code بسیار ساده است. کافی است وارد بخش Extensions در VS Code شوید (کلید میانبر Ctrl+Shift+X)، عبارت «Live Server» را جستجو کنید و روی Install کلیک کنید. بعد از نصب، برای اجرای سرور کافی است روی فایل HTML کلیک راست کرده و گزینه «Open with Live Server» را انتخاب کنید، یا از نوار پایین VS Code روی دکمه «Go Live» کلیک کنید. سرور به‌طور پیش‌فرض روی پورت ۵۵۰۰ اجرا می‌شود و آدرس http://127.0.0.1:5500 را در مرورگر باز می‌کند. همچنین می‌توانید پورت، مرورگر پیش‌فرض و سایر تنظیمات را از طریق فایل settings.json سفارشی‌سازی کنید.

یکی از مزایای مهم Live Server این است که نه‌تنها برای فایل‌های HTML ساده، بلکه برای پروژه‌های CSS Framework مثل Bootstrap، پروژه‌های JavaScript خالص و حتی فایل‌های JSON هم به‌خوبی کار می‌کند. این افزونه از پروتکل WebSocket برای ارتباط بین سرور و مرورگر استفاده می‌کند که باعث می‌شود Live Reload بسیار سریع و بدون تأخیر باشد. نکته مهم اینکه Live Server برای فایل‌های PHP یا پروژه‌هایی که نیاز به پردازش سمت سرور دارند مناسب نیست و برای آن موارد باید از XAMPP، Laragon یا PHP Built-in Server استفاده کرد. اما برای یادگیری HTML و CSS، نمونه‌سازی سریع (Prototyping) و پروژه‌های Frontend خالص، Live Server بهترین و سریع‌ترین انتخاب است.

افزونه Live Server:

با راه‌اندازی سرور محلی، هر تغییری که در کدهای خود اعمال کنید، به صورت زنده در مرورگر شما نمایش داده می‌شود بدون نیاز به بارگذاری مجدد صفحه. این قابلیت شما را قادر می‌سازد تغییرات خود را به سرعت پیاده‌سازی کنید و نتیجه را در لحظه مشاهده کنید. بالا آمدن روی یک پورت مشخص، این افزونه را قادر به اجرای صفحات وب در یک محیط محلی می‌کند و به شما امکان می‌دهد به راحتی و بهینه تر توسعه دهید.

پیشنهاد ویژه: برنامه نویسی بلاکچین

برای نصب افزونه Live Server در ویژوال استودیو کد، مراحل زیر را دنبال کنید:

1. در قسمت نوار کناری، روی Extensions کلیک کنید.
2. در کادر جستجو، Live Server را تایپ کنید.
3. روی Install کلیک کنید.
4. منتظر بمانید تا نصب کامل شود.

5.بر روی دکمه Go Live در نوار وضعیت کلیک کنید تا سرور را روشن یا خاموش کنید.

صفحه مورد نظر با پورت مثلا 5500 در مرورگر شما باز می شود.

6.تغییرات مورد نظر خود را در سند HTML ایجاد کنید و بدون نیاز به رفرش صفحه، تغییرات را در مرورگر مشاهده کنید.

پس از بستن و باز کردن سند HTML، برای نمایش صفحه در مرورگر، می‌توانید به جای کلیک بر روی Go live، روش‌ زیر را انجام دهید:

7.در سند HTML راست کلیک و گزینه Open With Live Server را انتخاب کنید.

تغییراتی که در سند ایجاد می کنید، به طور خودکار در مرورگر شما نمایش داده می شود. دیگر نیازی به رفرش صفحه ندارید.

ویژگی های افزونه

• یک سرور لایو برای توسعه سریع همراه با رفرش خودکار مرورگر
• شروع یا توقف سرور تنها با یک کلیک از نوار وضعیت
• باز کردن فایل اچ تی ام ال در مرورگر از منوی اکسپلورر
• پشتیبانی از حذف برخی فایل ها از فرآیند تشخیص تغییرات
• کنترل با کلیدهای میانبر
• امکان تنظیم شماره پورت، ریشه سرور و مرورگر پیش فرض
• پشتیبانی از هر نوع مرورگر (مثال: فایرفاکس نایتلی) با استفاده از دستورات پیشرفته
• پشتیبانی از اتصال دیباگ کروم
• امکان اتصال از طریق شبکه بی سیم (مثل اتصال با موبایل)
• امکان استفاده از نام میزبان دلخواه (لوکال هاست یا ۱۲۷.۰.۰.۱)
• امکان تنظیم تگ پشتیبان برای قابلیت لایو ریلود (به صورت پیش فرض تگ بادی یا هد)
• پشتیبانی از فایل های اس وی جی
• پشتیبانی از https
• پشتیبانی از پراکسی
• فعال بودن قابلیت cors
• پشتیبانی از محیط های چند ریشه
• پشتیبانی از هر نوع فایل حتی صفحات داینامیک با استفاده از افزونه لایو سرور برای وب

در صورتی که به برنامه نویسی بلاکچین علاقه مند هستید می توانید از پکیج آموزش برنامه نویسی بلاکچین استفاده کنید.