SolidStart، Netlify و Forms – DEV Community

دختر من به دنیای دستبندسازی وارد شده است، و اکنون او در ماموریتی است تا با خلاقیت های دست ساز خود اینترنت را تسخیر کند و شاید حتی برخی از سفارشات را دریافت کند. فکر می‌کردم این فرصت خوبی است که به SolidStart سر بزنم و یک سایت الکترونیکی کامل (و در عین حال بسیار ساده لوحانه) با آن بسازم.

شاید تعجب کنید که چرا SolidStart را انتخاب کردم. خوب، من به طور خاص تحت تأثیر SolidJS هستم و معتقدم که این فریم ورک جایگزین قانع‌کننده‌ای برای سایر فریم ورک‌های UI، عمدتاً React، ارائه می‌دهد. با این حال، این یک بحث جداگانه است.

با انگیزه فراوان و زیر نظر فرزند شیرین و در عین حال سخت‌گیرم، جلسات کدنویسی آخر شب خود را شروع کردم، بدون اینکه از چالش‌های جذاب (یا بهتر است بگویم «ناامیدکننده») که در انتظارم بود، بی‌اطلاع بودم.

کنجکاو هستید که بدانید چگونه بر آن موانع غلبه کردم؟ خوب، شما در حال درمان هستید. فقط به خواندن ادامه دهید…

سلام! برای محتوای بیشتر مانند آنچه می خواهید بخوانید، بررسی کنید @mattibarzeev در توییتر 🍻

ابتدا اجازه دهید کمی پس زمینه تنظیم کنیم

SolidStart؟

SolidStart یک متا فریمورک است (من این اصطلاح را ابداع نکردم، نگاه کنید) که شانه به شانه مواردی مانند NextJS، SvelteKit و Remix است. وقتی صحبت از ساده‌سازی فرآیند توسعه برنامه‌های کاربردی وب قوی می‌شود، بازی را تغییر می‌دهد. آن را به عنوان راه حلی برای جمع آوری بدون زحمت اجزای ضروری مانند مسیریابی، احراز هویت و سایر ویژگی هایی که اغلب تکراری و پیش پا افتاده در نظر می گیرند، در نظر بگیرید.

نتلیفای؟

Netlify پلتفرمی است که به توسعه دهندگان کمک می کند محتوای وب خود را به صورت کارآمد و سریع منتشر کنند. از راه‌حل‌های میزبانی کارآمد گرفته تا یکپارچه‌سازی یکپارچه با پایگاه کد، گردش‌های کاری اتوماسیون، مدیریت ارسال فرم و APIهای قدرتمند، Netlify شما را تحت پوشش قرار داده است و سپس برخی از آن‌ها.

نکته بسیار هیجان انگیز این است که نتلیفای اخیراً از Rayn Corniato، مغز متفکر SolidJS، به عنوان یکی از کارمندان خود استقبال کرده است، بنابراین همه اینها به خوبی جمع شده است 🙂

استقرار SolidStart در Netlify

من سایت را با مسیرهای تودرتو و آنچه شما دارید ایجاد کرده‌ام و به نقطه‌ای رسیده‌ام که می‌خواهم آن را مستقر کنم و جریان «خرید» را بررسی کنم.
من از گزینه استقرار Github Netlify استفاده می کنم، که شامل اعطای دسترسی به Netlify به یک مخزن Github خاص است. در این تنظیمات، من یک دستور را تعریف می کنم، معمولاً یک اسکریپت npm مانند npm run build، که مصنوعات سایت را تولید می کند. علاوه بر این، دایرکتوری توزیع را مشخص می کنم.

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

این در اکثر موارد معمولی به خوبی کار می کند، اما SolidStart کمی متفاوت است.
ببینید، دایرکتوری “dist” حاوی هیچ فایل HTML نیست و هیچ توابع لبه ای که درخواست های سایت را رسیدگی می کند، ندارد. این بدان معناست که اگر به Netlify فهرست خارج از جعبه “dist” را به عنوان دایرکتوری توزیع بدهیم، سایت کار نخواهد کرد.

خوشبختانه راه حلی برای آن وجود دارد – یک پلاگین Vite به نام solid-start-netlify.
اگرچه هنوز تجربی بودم، اما متوجه شدم که این کار را برای من انجام داد. شما از آن به صورت زیر در vite.config.js خود استفاده می کنید:

import netlify from 'solid-start-netlify';
...


export default defineConfig({
    plugins: [
        solid({
            adapter: netlify({edge: true}),
        }),
    ],
});

با تنظیم آداپتور مانند این، Vite اکنون یک دایرکتوری توزیع جدید به نام “netlify” ایجاد می کند و در آن اعلان توابع لبه را خواهید یافت که Netlify می تواند با آن کار کند تا به محتوای سایت پاسخ دهد.
اینجاست netlify محتوای دایرکتوری:

اکنون می توانید Netlify را طوری تنظیم کنید که دایرکتوری “netlify” را به عنوان دایرکتوری توزیع انتخاب کند و همانطور که انتظار می رود کار می کند.

فرم های SolidStart در Netlify ارسال می شود

Netlify یک ویژگی جالب ارائه می دهد که مدیریت ارسال فرم را ساده می کند. نحوه کار به این صورت است: با حاشیه نویسی فرم خود به عنوان مدیریت شده توسط Netlify، Netlify را فعال می کنید تا به طور خودکار فرم را تجزیه و تحلیل کند، داده های لازم را استخراج کند و با دقت به موارد ارسالی گوش دهد. پس از ارسال فرم، می توانید به راحتی به داده ها در یک بخش اختصاصی در کنسول مدیریت Netlify خود دسترسی داشته باشید.

اما باز هم وقتی صحبت از SolidStart می شود فرق می کند 🙂
در اینجا 2 چالش وجود دارد – اولین مورد به طور خاص به SolidStart (یا SolidJS برای آن موضوع) مربوط نمی شود، اما این یک مشکل کلی است که Netlify با فرم های تولید شده JS دارد.

وقتی می‌گویم فرم‌های تولید شده JS، منظور هر فرمی است که با استفاده از JS تولید می‌شود (بدیهی است که به معنای JSX نیز هست). ببینید، وقتی از netlify خواسته می شود تا فرم خاصی را بررسی کند، انتظار دارد که یک نشانه گذاری واقعی باشد، بنابراین می تواند آن را طی کند و فیلدهای مختلفی را که ارسال می شود استخراج کند.
با فرم تولید شده JS نمی تواند این کار را انجام دهد (با این حال، من معتقدم این چیزی است که آنها اکنون یا در آینده نزدیک روی آن کار می کنند)، بنابراین ما باید از یک راه حل برای آن استفاده کنیم.

راه حل این است که یک فایل html ایجاد کنید که فرمی را داشته باشد، نامی که می خواهید، و با همان فیلدهایی که فرم JSX دارد. در اینجا یک مثال برای تگ فرم یک فرم html معمولی آورده شده است:

<form name="checkout" netlify netlify-honeypot="bot-field" hidden>
...

“netlify” به Netlify می گوید که این فرم را بررسی کند. من چنین فایلی را ایجاد کردم و آن را در فهرست “عمومی” قرار دادم.
گام بعدی این است که فرم JSX خود را برداریم و یک فیلد ورودی مخفی به آن اضافه کنیم که یک فیلد “form-name” را با مقداری به همان نامی که فرم html “معمولی” داده‌ایم به ارسال اضافه می‌کند.
بنابراین اگر نام فرم “عادی” خود را “پرداخت” گذاشتیم، باید این فیلد را به فرم JSX خود اضافه کنیم:

<input type="hidden" name="form-name" value="checkout" />

اکنون Netlify می تواند فرم html معمولی را بررسی کرده و آن را با فیلدهای آن ثبت کند. در اینجا می توانید اطلاعات بیشتری در مورد این رویکرد بخوانید.

چالش دوم کمی پیچیده تر است و متاسفانه مستند نیست (بنابراین امیدوارم پس از جستجوی کوتاه این منبع را پیدا کرده باشید) –
من دوست دارم یک onSubmit پاسخ تماس برای فرم من، زیرا من می خواهم قبل از ارسال آن به سرور، برخی از داده ها را دستکاری کنم، بنابراین این را اضافه می کنم:

<form onSubmit={handleSubmit}>

و با توجه به اسناد، این چیزی است که شما باید در پاسخ به تماس انجام دهید:

const handleSubmit = (event) => {
event.preventDefault();


const myForm = event.target;
const formData = new FormData(myForm);


fetch('/', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: new URLSearchParams(formData).toString(),
});
};

ما جمع می‌شویم تا داده‌ها را تشکیل دهیم و یک درخواست POST به مسیر ریشه انجام دهیم.
اما این فرم را ارسال نمی کند… چرا؟

دلیل آن این است که مسیر ریشه یا هر مسیر SolidStart دیگری برای آن موضوع، توسط یک تابع edge مدیریت می‌شود و ارسال فرم به مسیری که توسط یک تابع edge مدیریت می‌شود، مدیریت ارسال فرم Netlify را فلج می‌کند.

خب پس چیکار کنیم؟ ما فرم را به مسیری ارسال می کنیم که می دانیم ثابت است، مانند … فرم html “معمولی” که قبلا استفاده کرده ایم (در فهرست عمومی است و بنابراین در دسترس است). با تغییر نقطه پایانی POST به آن فایل مشکل حل شد!

برای جمع بندی

• Netlify نمی داند که چگونه فرم های تولید شده JS را خارج از جعبه بازرسی کند
• اطمینان حاصل کنید که یک فرم html معمولی با نام و تمام فیلدهای فرم JSX در فهرست عمومی موجود است.
• ورودی مخفی را در فرم JSX خود اضافه کنید که فیلد “form-name” را با مقدار نامی که فرم html “معمولی” داده اید تعریف می کند.
• شما نمی توانید یک فرم مدیریت شده Netlify را به نقطه پایانی ارسال کنید که توسط یک تابع لبه مدیریت می شود
• هنگام ارسال، مطمئن شوید که نقطه پایانی که به آن ارسال می کنید توسط توابع لبه کنترل نمی شود

امیدوارم این به شما کمک کند، و اگر از راه‌های دیگر یا بهتری برای رسیدن به آن آگاه هستید، مطمئن شوید که در نظرات زیر با بقیه به اشتراک می‌گذارید 🙂

سلام! برای محتوای بیشتر مانند آنچه که اخیراً خواندید، بررسی کنید @mattibarzeev در توییتر 🍻