Готов и работещ с Netlify, Airtable и React

Готов и работещ с Netlify, Airtable и React

Ако искате безплатен и сравнително лесен стек за бързо изграждане и внедряване на портфолио проекти, Netlify, Airtable и React са страхотно трио. В момента използвам тези инструменти, за да създам Cascara, уеб приложение за намиране на местни независими кафенета. Тъй като не можах да намеря добър урок за това как да настроя тези три инструмента да работят заедно, пиша един.

Използвам тези инструменти за изграждане на безсървърни уеб приложения, защото те са лесни за използване и са или напълно безплатни за използване, или имат безплатни нива — перфектната комбинация за програмист, направо завършил колежа. Тъй като вашето уеб приложение се мащабира, може да искате да преминете към по-стабилна архитектура, но ако учите и искате да създавате страхотни неща безплатно – нека го направим.

Преглед

Netlify е универсална услуга, която предоставя хостинг за статични сайтове с автоматично внедряване от GitHub, променливи на средата, функции без сървър, страхотен локален сървър за разработка и много други. Има страхотен потребителски интерфейс и документация, което го прави удобен за начинаещи. Ще трябва да се регистрирате за акаунт, за да започнете.

Airtable е друг многофункционален инструмент, който има страхотна визуална система от бази данни, която автоматично генерира специфичен за проекта API за вас. Може да се използва и като инструмент за управление на проекти. Отново ще трябва да се регистрирате за акаунт.

React е популярна Javascript рамка със страхотна документация, която улеснява организирането на уеб компоненти. Бихте могли да замените React с друга рамка по ваше предпочитание или да се придържате към ванилен JS, но открих, че React го прави много по-лесен за стартиране и работа (Ако не сте запознати с React, това е страхотен въвеждащ урок) .

Създаване на среда за разработка

Ще използваме Netlify Dev за локално разработване на нашата машина и ще обслужваме както нашия уебсайт, така и нашите lamda функции. „Ето страхотен урок“ за подробен поглед върху функциите на Netlify Dev.

Използвам Visual Studio Code като мой текстов редактор, но вие можете да използвате каквото искате.

Създайте папка с името на вашия проект и отидете до тази директория в терминала. След това стартирайте create-react-app, за да настроите шаблонно React приложение.

npx create-react-app .

Сега инсталирайте Airtable и Netlify Dev към вашия проект. Това е и когато бихте инсталирали всякакви библиотеки от предния край (обикновено използвам Bootstrap).

npm i netlify-cli -g
npm i airtable

Netlify Dev автоматично открива javascript рамки и използва техните скриптове, за да изпълнява локални компилации на вашето приложение. За да настроите това, ще трябва да добавите файл netlify.toml към основната директория на вашия проект, който изглежда идентичен с този:

[build]
   publish = "build"
   functions = "functions"

Сега ще трябва да настроите GitHub хранилище за вашия проект. След като направите първия ангажимент, свържете вашето репо с вашия акаунт в Netlify:

netlify init

Сега вашата среда трябва да е готова за работа. Просто бягай

netlify dev

за да стартирате сървъра и да отворите localhost в уеб браузър. Докато изграждате компоненти на вашия преден край, сайтът ще се презареди горещо, за да ги покаже. Можете също да използвате console.log() по всяко време, за да отпечатате на терминала във вашия текстов редактор.

Свързване към Airtable чрез функции без сървър

Функциите без сървър са митохондриите на вашето уеб приложение — те могат да се използват за извършване на CRUD операции, достъп до API на трети страни и обработка на плащания с услуги като Stripe и PayPal. „Това е страхотен урок“ за основите на ламбда функциите.

За да направите запитване към вашата база данни Airtable с функция без сървър, ще трябва да извлечете вашия ID на базата Airtable и ключ за API, които могат да бъдат намерени в секцията „Удостоверяване“ на API на Airtable на вашата база. Съхранявайте тези променливи заедно с основния URL адрес като променливи на средата в секцията „Настройки за внедряване“ на вашия акаунт в Netlify.

Тези променливи на средата вече ще бъдат инжектирани във вашата среда, когато стартирате netlify dev, което ви позволява да имате достъп до тях във вашите lamda функции. Сега нека станем функционални!

netlify functions:create functionName

Тази команда ще създаде нова директория и файл за вашата функция в директорията /functions/. Можете да избирате от няколко различни функционални шаблона, но като цяло ще започна с основния шаблон Hello World.

Сега сте готови да напишете всяка логика, която трябва да изпълните с вашата база данни. Ето основно описание на функция без сървър с Airtable:

Вашите функции се обслужват на URL адрес localhost:8888/.netlify/functions/functionName/functionName.js/. Можете лесно да тествате вашите HTTP заявки с Postman, като правите обаждания до този адрес, докато вашият Netlify Dev сървър работи.

Когато функцията ви връща очакваната информация, можете да получите достъп до отговора във вашия преден край, като направите HTTP заявка в React, подобна на тази:

const myFunction = async () =>
   await (await fetch('/.netlify/functions/my-function/my-function.js')).json();

Внедряване на вашето приложение

Netlify поддържа автоматично внедряване чрез GitHub, което ви позволява да контролирате версиите на цялото си приложение и да въведете A/B тестване. Тъй като вече свързахме вашето GitHub хранилище с вашия Netlify акаунт, трябва да сте готови! Всеки път, когато натискате към GitHub, ще бъде изградена и внедрена нова версия на вашия сайт.

Ако ви е харесал този урок и вашата компания случайно наема служители, моля, свържете се с мен! Търся първата си работа след колежа.