آموزش ساخت پروژه express با استفاده از express-generator

در این مطلب یاد میگیریم که چطور یک پروژه express رو با استفاده از express-generator راه اندازی کنیم و با سرعت بیشتری ساختار پروژه‌های خودمون رو بسازیم.

همونطور که اطلاع دارید Express یک فریم‌ورک برای Node.js هست و به دلیل سادگی که داره خیلی بین توسعه‌دهندگان معروف شده و جایگاه خاصی داره. اما زمانی که میخواید یک پروژه جدید رو به وجود بیارید، باید کدها و فایلهای اولیه زیادی رو به وجود بیارید و به همین دلیل مدت زمان زیادی ممکنه تلف بشه. چون باید تنظیمات مورد نظر رو انجام بدین و View engine رو مشخص کنید و موارد دیگه از جمله Routing و Error handling و ... رو مشخص کنید.

به همین دلیل افراد زیادی پروژه‌های starter زیادی رو تولید کرده و در اختیار دیگران قرار دادند تا دیگه نیاز نباشه برای شروع هر پروژه همه این کارها رو تکرار کنیم. خود Express یک ابزار بنام express-generator رو در اختیار توسعه‌دهندگان قرار داده که با استفاده از اون میتونین در command line، ساختار پروژه‌های خودتون رو به خوبی تنظیم کرده و به وجود بیارید.

شروع کار با express-generator

استفاده از این ابزار خیلی راحت و آسونه. شما در ابتدا باید express-generator رو بصورت سراسری یا global در سیستم خودتون نصب کنید تا در همه جای سیستم به اون در command line دسترسی داشته باشید. برای اینکار دستور npm install express-generator -g را در command line اجرا کنید.

با نصب این ابزار شما میتونین در هر جایی که هستید، دستور express رو در Command line اجرا کنید و پروژه‌های مورد نظرتون رو بسازید. در ابتدا برای اینکه ببینیم این دستور چه ویژگی‌هایی داره میتونیم express --help رو تایپ کرده و enter بزنیم. خروجی بصورت زیر خواهد بود:

    --version        output the version number
-e, --ejs            add ejs engine support
    --pug            add pug engine support
    --hbs            add handlebars engine support
-H, --hogan          add hogan.js engine support
-v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    --no-view        use static html instead of view engine
-c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
    --git            add .gitignore
-f, --force          force on non-empty directory
-h, --help           output usage information

2 مورد از بین موارد بالا بیشتر از بقیه مورد استفاده قرار میگیرن:

• -v یا --view : با استفاده از این ویژگی میتونین view engine مورد نظر خودتون رو برای پروژه در نظر بگیرید. مقدار پیش فرض برای این ویژگی jade یا همون pug هست.
• -c یا --css : با استفاده از این ویژگی میتونین مشخص کنید که برای stylesheet از چه زبانی میخواید استفاده کنید. مقدار پیش فرض css خالص هست.

ساخت پروژه با مقادیر پیش فرض

اگر شما در مسیر مورد نظرتون دستور express myapp رو اجرا کنید، یک دایرکتوری به نام myapp ساخته میشه و فایلها و پوشه‌های مورد نظر برای پروژه در اون قرار میگیره. در این حالت چون هیچ option رو مشخص نکردیم، پس همه چیز بصورت پیش فرض در نظر گرفته میشن:

حالا اگر وارد پوشه myapp بشید، خواهید دید که ساختار پروژتون ساخته شده است. خب من مقادیر پیش فرض رو نمیخوام و میخوام برای view از ejs و برای stylesheet هم از sass استفاده کنم. برای اینکار باید دستور express --view=ejs --css=sass --git myapp رو اجرا میکنم:

با استفاده از --git فایل .gitignore رو به وجود میاریم. خب همونطور که در پایین تصویر بالا میبینید، راهنمایی کرده که چه کارهایی رو برای ادامه انجام بدین. در ابتدا cd myapp رو میزنیم تا وارد دایرکتوری پروژه بشیم و بعد از اون npm install یا yarn install رو میزنیم تا پیش‌نیازهای پروژه نصب بشن و در نهایت هم دستور SET DEBUG=myapp:* & npm start رو میزنیم تا پروژه مورد نظر اجرا بشه و بتونین خروجی اون رو در مرورگر مشاهده کنید.

حالا اگر وارد آدرس localhost:3000 در مرورگر بشید، خروجی برنامه رو خواهید دید. خب دیدید که چقد راحت میتونین با این ابزار کار کنید.

بررسی ساختار پروژه

express-generator پروژه شما رو با 4 دایرکتوری میسازه و شما میتونین چیزهای دیگه‌ای رو به اون اضافه کنید. حالا این دایرکتوری‌ها رو با هم بررسی میکنیم:

• bin : این دایرکتوری یک فایل اجرا شدنی که با استفاده از اون برنامتون اجرا میشه رو در خودش قرار داده. شما خیلی کار با اون ندارید و زمانی که npm start میزنید همه کارها انجام میشه.
• public : این دایرکتوری یکی از حساسترین‌ها هست چون هر چیزی که درون اون قرار بدین در دسترسی همه قرار میگیره و باید حواستون به مسائل امنیتی باشه و چیزهای مهم رو در اون قرار ندین. در این پوشه مواردی مثل فایلهای javascript و css و تصاویر و فونتها و ... رو قرار میدیم.
• routes : در این پوشه فایلهای مربوط به مسیرهای پروژه رو قرار میدیم. express-generator در ابتدا 2 مسیر بنام index.js و users.js رو برای نمونه قرار داده و شما میتونین چیزهای دیگه‌ای که نیاز دارید رو بسازید.
• views : در این پوشه هم view یا چیزهایی که کاربر مشاهده میکنه رو با استفاده از view engine که مشخص کردید به وجود میارید. با استفاده از متد render میتونین این view‌ها رو در مواقع مورد نظرتون رندر کنید و به کاربر نمایش بدین.

در فایل app.js هم ماژولهای مورد نظر وارد شده و همه پوشه‌های بالا به ترتیب مورد استفاده قرار گرفتن و تنظیمات پروژه قرار داده شده است.

نتیجه گیری

دیدیم که با استفاده از ابزار express-generator میتونیم به راحتی ساختار اولیه پروژه رو به وجود بیاریم و دیگه نیاز نیست همه اینکارها رو برای هر پروژه جدید تکرار کنیم و وقتمون رو هدر بدیم. این ابزار چون توسط خود تیم express ساخته شده است، استاندارد هست و با خیال راحت میتونین از اون استفاده کنید.

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.