mucahid
.dev
  • Home
  • About
  • Projects
  • Blog
  • Media
  • Contact
  • Links
en

Creating a UI Library & Github Actions & Rules, Tests and Version Management

Written by Mucahid Yazar on November 17, 2021

instagramlinkedincodepenmail
Creating a UI Library & Github Actions & Rules, Tests and Version Management
repository-pattern
github
git
ui-library
version-control

Son 1 ayd─▒r npm paketleri ve buradaki y├Ânetim ve best practiselerle alakal─▒ okumalar ve denemeler yap─▒yordum. Hatta bunlar─▒ yaparken bir tanede kendime ait icomoon-generator ad─▒nda bir libraryde geli┼čtirdim. Bu librarynin ne i┼č yapt─▒─č─▒na niye olu┼čturdu─čuma daha sonra de─činece─čim. Fakat ┼čimdi g├Ârd├╝─č├╝m, ├Â─črendi─čim ve ├žal─▒┼čt─▒─č─▒m bu ┼čeyleri uygulanan best practiselerle birlikte burada size anlatmaya ├žal─▒┼čaca─č─▒m.

What will we see?

1. Create a Github Repo
2. Creating the Project
3. Storybook
4. Prettier
5. Eslint
6. Button Components with Typescript
7. styled-components
8. prop-types
9. API Design
10. Composition API
11. Tests (jest Settings)
12. Tests (@testing-library/react Settings)
13. Tests
14. Module Formats
15. Typescript Declarations
16. husky
17. semantic-release
18. Github Environment Variable
19. Github Actions

Get Started

Step 1: Create a Github Repo

Github ├╝zerinde ui-library ad─▒nda bir repository olu┼čturdum. Ve olu┼čtururken┬á.gitignore ve Readme.md dosyalar─▒n─▒da eklemesini istiyorum.

Step 2: Creating the Project

npx create-react-app ui-libraryÔÇŐÔÇöÔÇŐtemplate typescript

Yukar─▒da ki kodu ├žal─▒┼čt─▒rarak create-react-app ile typescriptli bir react projesi olu┼čturuyoruz.

Sonra olu┼čturdu─čumuz github reposu ile bu olu┼čturdu─čumuz projeyi senkronize ediyoruz. Sonra da a┼ča─č─▒daki gibi package.json dosyam─▒z─▒ kendimize ve olu┼čturdu─čumuz repositorye g├Âre bilgilerini d├╝zenliyoruz.

https://medium.com/media/4317426eb7cc26a2ee98a3789641af29/href

Daha sonra root dizinimize a┼ča─č─▒da ki ÔÇťtsconfig.jsonÔÇŁ dosyas─▒n─▒ ekliyoruz.

https://medium.com/media/e8745d33f1f279381458c029e3cd6060/href

Sonra a┼ča─č─▒da ki gibi file-structure olu┼čturduktan sonra,

ÔÇťButtonÔÇŁ component─▒m─▒ olu┼čturuyorum.

https://medium.com/media/7dbdf1af63c8544f69daf25683f30676/hrefhttps://medium.com/media/5f08b730415ea268672f450b85e76cdc/hrefhttps://medium.com/media/a3d996f1a96317c483e123bdc2a1bbe6/href

Step 3: Storybook

Ve ┼čimdi de Storybook entegrasyonumuzu yapaca─č─▒z. Bunun i├žni tek yapmam─▒z gereken a┼ča─č─▒da ki kodu ├žal─▒┼čt─▒rarak projemize storybookÔÇÖu entegre┬áetmek.

npx sb init

Kurulumla birlikte gelen ÔÇťstoriesÔÇŁ klas├Âr├╝n├╝ proje d─▒┼č─▒ndaki bir dizine ta┼č─▒y─▒n veya silin. Ta┼č─▒rsan─▒z daha sonra bu ├Ârneklere bak─▒p kopyalar ├žekebilirsiniz veya direk silip documentationlarlada ilerleyebilirsiniz.

Sonra ÔÇťstoriesÔÇŁ klasor├╝ne gelip ÔÇťintroduction.stories.mdxÔÇŁ ad─▒nda dosya olu┼čturuyoruz ve a┼ča─č─▒dakileri i├žine yap─▒┼čt─▒r─▒yoruz.

import { Meta, Description } from ÔÇś@storybook/addon-docs/blocksÔÇÖ;
import README from ÔÇś../../README.mdÔÇÖ;
<Meta title=ÔÇŁExample/IntroductionÔÇŁ />
<Description>{README}</Description>

Ve daha sonra ÔÇťButton.stories.tsxÔÇŁ story dosyas─▒n─▒ olu┼čturup a┼ča─č─▒da ki kod blogunu ekliyoruz.

https://medium.com/media/1ff5721485859179538e8739cf354441/href

Bu y├╝klemelerden sonra hata al─▒rsan─▒z┬á.storybook dosyas─▒ndaki main.js e gelip a┼ča─č─▒da ki typescript blogunu┬áekleyin.

https://medium.com/media/771d50804bf463bdbc6af9f28dd0c2db/href

Step 4: Prettier

─░lk ├Ânce prettieri a┼ča─č─▒daki gibi y├╝kl├╝yoruz.

yarn add -D prettier

Ve┬á.prettierrc.json ad─▒nda dosya olu┼čturup a┼ča─č─▒daki bir tane ayar─▒ ekliyorum. Siz daha fazla prettier ayar─▒ burada projeniz i├žin ayarlayabilirsiniz tabi ki┬áde.

https://medium.com/media/9ef175d0c84bb36ab7756c4c5f4826c6/href

Ve package.jsona gelip a┼ča─č─▒da ki 2 tane scripti ekliyoruz. Bunlar;

- format, prettiere g├Âre dosyalar─▒n formatlanmas─▒n─▒ d├╝zeltilmesini sa─čl─▒yoruz.
- lint:format, her┼čeyin bu formatta oldu─čunun teyitini yap─▒yoruz.

https://medium.com/media/c16d200883838179e5a5bf2751fc14eb/href

Step 5: Eslint

Eslint ilede javascript yaz─▒m kurallar─▒n─▒ set edece─čiz. A┼ča─č─▒daki paketleri ├Âncelikle y├╝kl├╝yoruz.

npm installÔÇŐÔÇöÔÇŐsave-dev eslint eslint-config-prettier eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

or

yarn add -D eslint eslint-config-prettier eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

Sonra ÔÇť.eslintrcÔÇŁ ad─▒nda bir dosya olu┼čturup i├žine a┼ča─č─▒dakileri yap─▒┼čt─▒r─▒yoruz.

https://medium.com/media/acdc5875e94663acd02964eaa0ea53e8/href

Bu config dosyası;

-root, config dosyas─▒n─▒n, root config dosyas─▒ oldu─čunu s├Âyler.
-parser, typescriptli eslint rulelar─▒n─▒ parse etmesini s├Âyler.
-recommend edilen eslint ayarlar─▒ tan─▒mlan─▒r.
-react ve react hookslar─▒n─▒n eslint recommended kurallar─▒ set edilir.
-prettier i├žin eslint ayarlar─▒n─▒ set┬áeder.

Bu eslint kurallar─▒ typescriptlerle componentlar─▒m─▒z─▒ tan─▒mlamam─▒z─▒ zorunlu tutaca─č─▒ i├žin, Button component─▒m─▒ a┼ča─č─▒da ki gibi d├╝zenliyorum.

https://medium.com/media/1b67fdb6a088c9b9f6ffdfd3c854bec4/href

A┼ča─č─▒da da ÔÇťlintÔÇŁ ad─▒nda yeni bir script tan─▒mlar─▒z. B├Âylece eslint ile ayarlad─▒─č─▒m─▒z ayarlarla yazd─▒─č─▒m─▒z javascript kolar─▒n─▒n kurallara uyup uymad─▒─č─▒n─▒z denetleriz.

https://medium.com/media/36b914cd98783a1bfba72f775341f8d2/href

Step 6: Button Components with Typescript

┼×imdi de k├╝t├╝phanemizin ilk ger├žek par├žas─▒ Button component─▒n─▒ ger├žek olarak olu┼čtural─▒m.

Button component─▒m─▒z─▒ React.forwardRef ile sar─▒yoruz ve generator olarak HTMLButtonElement veriyoruz ve bu buradaki elementin bir HTMLButtonElementi olaca─č─▒n─▒ s├Âyl├╝yor ve 2. Argument olarak da bu generatore propslarin almas─▒ gereken attribute kurallar─▒ vererek propslar─▒ s─▒n─▒rl─▒yoruz ve onu da React.ComponentsPropsWithoutRef ile <ÔÇÖbuttonÔÇÖ> olmas─▒n─▒ s├Âyl├╝yoruz.

https://medium.com/media/732c82394e17bc543817840385545028/href

Step 7: styled-components

Componentlar─▒m─▒z─▒ olu┼čturmak i├žinde styled-components k├╝t├╝phanesinden faydalanaca─č─▒m─▒z i├žin a┼ča─č─▒daki kodla ├Âncelikle y├╝kl├╝yoruz.

yarn add -D styled-components @types/styled-components polished
or
npm install --save-dev styled-components @types/styled-components polished

Sonra src alt─▒nda utils ad─▒nda klas├Âr olu┼čturup i├žinde de, colors.ts veya styles.ts ad─▒nda dosyalar─▒m─▒z─▒ olu┼čturup, a┼ča─č─▒da ki de─či┼čkenleri tan─▒ml─▒yoruz.

https://medium.com/media/038878892f569253836e549f35dc333c/href

Daha sonra Button.tsx klas├Âr├╝ne gelip yukar─▒da ki style.ts dosyas─▒n─▒ tan─▒ml─▒yoruz ve bu butonu export ediyoruz ve Button.tsx i├žinde kullan─▒yoruz.

https://medium.com/media/806b89576d0ba2d6d2ea750beef5bdc5/href

Daha sonra Button.tsx dosyam─▒z da style.ts den gelen styled-component ile olu┼čturdu─čum Button de─či┼čkenini component gibi kullan─▒yorum ve defaultProps tan─▒ml─▒yorum.

https://medium.com/media/0372f8106b8ab4554116234447cb1b36/href

Step 8: prop-types

Prop kontrollerini asl─▒nda typescript ile zaten yap─▒yoruz ama birde ekstra bir k├╝t├╝phane ile de yapabiliyoruz. Biz bunu da ekstradan propslar─▒ kuralland─▒rmak, s─▒n─▒rland─▒rmak i├žin kullanaca─č─▒z. ├ľnce a┼ča─č─▒daki gibi mod├╝l├╝ y├╝kl├╝yoruz.

npm install --save-dev prop-types
or
yarn add -D prop-types

https://medium.com/media/20eb1aeb6f17bf7bf1deb2fca34feab5/href

Step 9: API Design

UI librarylerinde 2 farkl─▒ API design, tasar─▒m ┼čekli vard─▒r. Birisi Traditional API yani Geleneksel API, bir di─čeri Compound API yani Bile┼čik API. Bunlar aras─▒nda ki farklar a┼ča─č─▒da ki┬ágibidir.

Step 10: Composition API

Yeni nesil UI libraryleri genellikle bu y├Ântemi kullanmay─▒ tercih ederler. Bu y├Ântem hem daha kontrol edilebilir hem de daha esnektir kullan─▒m a├ž─▒s─▒ndan.

─░lk ├Ânce src alt─▒nda ÔÇťFieldÔÇŁ ad─▒nda bir klas├Âr ve i├žinde bir style.ts dosyas─▒ olu┼čturup a┼ča─č─▒da ki kodlar─▒ i├žinde tan─▒ml─▒yoruz.

https://medium.com/media/a3e5c0ffcb3addb3ab51c16ea2203fb1/href

Daha sonra bu ÔÇťFieldÔÇŁ klas├Âr├╝ i├žinde ÔÇťFieldContextÔÇŁ ad─▒n da bir context tutaca─č─▒z. Burada createContext hooksu ile context olu┼čturup form alanlar─▒nda bu contextProvider─▒n─▒ kullanaca─č─▒z.

https://medium.com/media/d770c9eec2eb157bbdb9a8fde841ca17/href

Ve ayr─▒ca bir altta ki ÔÇťFieldÔÇŁ component─▒m─▒zda kullanaca─č─▒m─▒z unique id utilsini, utils klas├Âr├╝ alt─▒nda useUniqueID.ts dosyas─▒ i├žinde a┼ča─č─▒daki gibi olu┼čturuyoruz. Tabi ├Ânce bunu yapmam─▒z─▒ sa─člayacak olan nanoid librarysini y├╝kl├╝yoruz.

npm install --save-dev nanoid
or
yard add -D nanoid

https://medium.com/media/d6f04186f5bec463330d8aaf87a7cedc/href

Daha sonra yukar─▒da ki ÔÇťContextProviderÔÇŁ─▒ ÔÇťInputÔÇŁ, ÔÇťLabelÔÇŁ gibi alanlari i├žine koyaca─č─▒m─▒z bir ÔÇťField.tsxÔÇŁ tan─▒mlayaca─č─▒z.

https://medium.com/media/fbe05d9c9a43c86c835430a25173a866/href

Daha sonra ÔÇťInputÔÇŁ ve ÔÇťLabelÔÇŁ componentlar─▒m─▒z─▒ olu┼čturaca─č─▒z.

https://medium.com/media/cf3663f3fccbd533265f21971d5f338b/hrefhttps://medium.com/media/0909d2396763eb27fcdf6ea1dac2a344/href

Daha sonra ÔÇťInput.stories.tsxÔÇŁ ad─▒nda yeni bir story dosyas─▒ olu┼čturup asa─č─▒da ki gibi ÔÇťFieldÔÇŁ ve i├žine g├Âmd├╝─č├╝m├╝z ÔÇťInputÔÇŁ ve ÔÇťLabelÔÇŁ─▒ ├ža─č─▒rarak burada kullanabiliyor olaca─č─▒z.

https://medium.com/media/a557a3e077e869bd8f572fda5bc65183/href

Ve son olarak da gelin yine Field klas├Âr├╝ alt─▒nda bir di─čer form eleman─▒m─▒z Textarea componentimizi olu┼čtural─▒m.

https://medium.com/media/fe59d67fa34511967de6b38218d4c17e/href

Field.tsx dosyam─▒zda da gerekli alanlara a┼ča─čd─▒a ki gibi TextareaÔÇÖ─▒ ekliyoruz.

https://medium.com/media/df7b6271bfdf908d9512a8a7eca7673b/href

Ve son olarak da Textarea.stories.tsx dosyas─▒n─▒ olu┼čturup a┼ča─č─▒da ki kodlar─▒ g├Ânderiyoruz.

https://medium.com/media/48d39e0b1794b3d403aca4b5b70e43b3/href

Ve art─▒k Button ve Form bile┼čenlerine sahip bir UI k├╝t├╝phanemiz haz─▒r diyebiliriz┬á:)

Step 11: Tests (Jest Settings)

─░lk ├Ânce gerekli kurulumlar─▒ a┼ča─č─▒da ki gibi yap─▒yoruz.

npm install --save-dev jest ts-jest @types/jest react-is
or
yarn add -D jest ts-jest @types/jest react-is

Daha sonra packaga.json i├žinde test ad─▒nda bir script olu┼čturaca─č─▒z a┼ča─č─▒da ki gibi. ┼×uana kadar olan t├╝m scriptlerimizde bu kadar┬ázaten.

https://medium.com/media/97ac7bb56b3a9ad05238b84e6f921b41/href

Daha sonra root dizininde jest.config.js ad─▒dna dosya olu┼čturup a┼ča─č─▒da ki ayarlar─▒ i├žine yaz─▒yoruz.

https://medium.com/media/f7c2aadd4e2933857941b09e5fd9f507/href

Step 12: Tests (@testing-library/react Settings)

Yine a┼ča─č─▒da ki kurulumlar─▒ ilk olarak ger├žekle┼čtiriyoruz.

npm install --save-dev @testing-library/react @testing-library/jest-dom
or
yarn add -D @testing-library/react @testing-library/jest-dom

Daha sonra ÔÇťjest-setup.tsÔÇŁ ad─▒nda dosya olu┼čturup a┼ča─č─▒da ki 2 importu i├žine g├Ânderiyoruz. Bunlarda react testleri i├žin styled-component uyumlulu─čunu ve react i├žin jest-domÔÇÖu aktif ediyor bizim┬ái├žin.

https://medium.com/media/8f6e60f1aec818286c6a749e5b00587a/href

tsconfig.json i├žine de e─čer ekli de─čilse a┼ča─č─▒daki sat─▒r─▒ ekliyoruz.
ÔÇťincludeÔÇŁ: [ÔÇťsrc/**/*ÔÇŁ, ÔÇť./jest-setup.tsÔÇŁ]

Step 13: Tests

Daha sonra yeri size kalm─▒┼č ama ben Button component klas├Âr├╝ i├žinde Button.spec.ts ad─▒nda bir dosya olu┼čturup Button componentimizin testlerini yap─▒yoruz.

https://medium.com/media/14eb0fce15f5675e2d95cd9274c661af/href

Field testleri i├žin useUniqueID ad─▒nda bir mock utilse ihtiyac─▒m olaca─č─▒ i├žin a┼ča─č─▒da ki gibi utils klas├Âr├╝ alt─▒nda, __mocks__ klas├Âr├╝ olu┼čturup i├žinde ÔÇťuseUniqueID.tsÔÇŁ ad─▒nda dosya olu┼čturup a┼ča─č─▒daki mock utili olu┼čturuyorum.

https://medium.com/media/fe9b180171bd904d31ef3e881af0b949/href

Daha sonrada ÔÇťField.spec.tsÔÇŁ ad─▒nda test dosyam─▒z─▒ olu┼čturup a┼ča─č─▒da ki testleri yaz─▒yoruz.

https://medium.com/media/abe1e1c9b05f5755a5f42d06befb59f3/href

Step 14: Module Formats

Bu a┼čamada ise olu┼čturdu─čumuz ui librarymizi babel ve @rollup librarylerini kullan─▒p compressleyip dist ├ž─▒kt─▒s─▒n─▒ alaca─č─▒z.

├ľnce a┼ča─č─▒daki gerekli libraryleri kuruyoruz.

npm install @babel/runtime
npm install --save-dev @babel/preset-env @babel/preset-typescript @babel/preset-react @babel/plugin-transform-runtime babel-plugin-styled-components
or
yarn add @babel/runtime
yarn add -D @babel/preset-env @babel/preset-typescript @babel/preset-react @babel/plugin-transform-runtime babel-plugin-styled-components

┼×imdide┬á.babelrc dosyas─▒ olu┼čturup a┼ča─č─▒da ki kodlar─▒ yap─▒┼čt─▒r─▒yoruz.

https://medium.com/media/b781a3d505293316b7437ff4d2dc94df/href

Ve ┼čimdide rollup paketlerini y├╝kl├╝yoruz. Bunlar build timeda kullan─▒lacak paketler oldu─ču i├žin devDependencies olarak ekleyebiliriz.

npm install --save-dev rollup rollup-plugin-delete rollup-plugin-node-externals @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve
or
yarn add -D rollup rollup-plugin-delete rollup-plugin-node-externals @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve

Ve rollup.config.js dosyas─▒ olu┼čturup a┼ča─č─▒da ki ayarlar─▒ yerle┼čtiriyoruz.

https://medium.com/media/1e9df70ebdf9aa57113bfd494731724b/href

Step 15: Typescript Declarations

Daha sonra tsconfig.build.json ayarlar─▒m─▒z─▒ a┼ča─č─▒da ki gibi yap─▒yoruz.

Bu tan─▒mlamalarla da index.d.ts gibi typescript rulelar─▒n─▒ set eden dosyalar─▒ build olarak dist ├ž─▒kt─▒ klas├Âr├╝m├╝ze kopya olarak alaca─č─▒z.

Daha sonra ÔÇť/root/srcÔÇŁ alt─▒nda ÔÇťindex.tsÔÇŁ dosyas─▒ olu┼čturup bundle edilecek t├╝m dosyalar─▒ burada export ediyoruz.

https://medium.com/media/b3cfbbcc58d4dfd9c78022e4e05f5d80/href

Daha sonra package.json dosyam─▒za a┼ča─č─▒daki ÔÇťmainÔÇŁ, ÔÇťmoduleÔÇŁ ve ÔÇťsideEffectsÔÇŁ k─▒s─▒mlar─▒n─▒da ekliyoruz ve scriptlerimizin son halide a┼ča─č─▒da ki┬ágibidir.

https://medium.com/media/0136ea5ef312f5e162c8a0bb2720f7e2/href

Ve daha sonra a┼ča─č─▒da ki kodlar─▒ s─▒rayla ├žal─▒┼čt─▒r─▒p kontrol edip buildi ald─▒─č─▒m─▒z─▒ g├Âr├╝yoruz.

npm run format
npm run format:lint
npm run build

Step 16: husky

Husky ile ise githuba commit g├Ândermeden veya pushlamadan ├Ânceki ├žal─▒┼čmas─▒ gereken actionlar─▒ komut olarak verece─čiz. ├ľrne─čin her commit ├Ânceki eslint checki yapmas─▒n─▒ istiyorum ve e─čer eslint hatas─▒ varsa commiti kabul etmesini istemiyorum. ─░lk ├Ânce eslint hatalar─▒n─▒ giderdikten sonra tekrar gelip commit atmas─▒n─▒ ve tekrar denetleyerek hata yoksa commitini g├Ândermesini istiyorum gibi.

─░lk ├Ânce a┼ča─č─▒da ki kodla ÔÇťhuskyÔÇŁi y├╝kl├╝yoruz.

npm install husky --save-dev
or
yarn add -D husky

Ve daha sorna a┼ča─č─▒da ki kodla git hookslar─▒n─▒ aktif ediyoruz.
npx husky install

Kurulumdan sonra git hookslar─▒n─▒ otomatik etkinle┼čtirmek i├žinde a┼ča─č─▒da ki kodu set ediyoruz.
npm set-scrpit prepare ÔÇťhusky┬áinstallÔÇŁ

Ve ┼čimdi de pre-commit ile commitlerden ├Ânce ├žal─▒┼čt─▒r─▒lmas─▒ gereken scriptleri set ediyoruz a┼ča─č─▒da ki gibi.
npx husky add┬á.husky/pre-commit ÔÇťnpm run lint && npm run format:lint && npm run┬átestÔÇŁ

Ve ┼čimdide push ├Ânceki olan pre-push daki k─▒sm─▒ ayarl─▒yoruz.

npx husky add┬á.husky/pre-push ÔÇťnpm run lint && npm run format:lint && npm run┬átestÔÇŁ

Ve bu kadar ┼čimdi de─či┼čiklikleri tekrar githuba pushlayabiliriz.

Step 17: semantic-release

Ve art─▒k son ad─▒mlar─▒m─▒zdan birisi olan semantic bir ┼čekilde release ├ž─▒kmaya geldik diyebiliriz. Burada yapaca─č─▒m─▒z ayarlarla semantic olarak version ve tag alabilece─čiz, change log kay─▒tlar─▒m─▒z otomatik tutulacak ve commit mesajlar─▒m─▒z─▒ daha d├╝zg├╝n bir ┼čekilde tutabilece─čiz.

─░lk ├Ânce a┼ča─č─▒da her zaman yapt─▒─č─▒m─▒z gibi gerekli libraryleri y├╝kl├╝yoruz.

yarn add -D semantic-release @semantic-release/changelog @semantic-release/git commitizen cz-conventional-changelog
or
npm install --save-dev semantic-release @semantic-release/changelog @semantic-release/git commitizen cz-conventional-changelog

Sonra a┼ča─č─▒da ki release, repository alan─▒n─▒ ve yeni 2 scriptimizi package.jsona ekleyelim.

https://medium.com/media/fb81467c9a845adae1cc54acba830c71/href

Art─▒k commitlerimizi git add yapt─▒ktan sorna npm run commit diyerek ├žal─▒┼čt─▒rd─▒ktan sonra commitizen packagenin standartlar─▒na g├Âre g├Ânderece─čiz. Ve pushlad─▒ktan sonra github actionslar semantic-release paketiyle birlikte automation i┼člemini otomatik olarak┬áyapacak.

Step 18: Github Environment Variable

├ľnce Github actionslar─▒nda kullan─▒lmak ├╝zere ilk ba┼čta NPM_TOKEN ad─▒nda bir env─▒ronment variable tan─▒mlamam─▒z gerekiyor github repomuza. Bu tokeni almak i├žin npme gidip bir tane auyomation i├žin token olu┼čturuyoruz ve a┼ča─č─▒daki gibi olu┼čturdu─čumuz ui librarysinin github reposunun ayarlar─▒nda ki Secret k─▒sm─▒nda, NPM_TOKEN name olacak ┼čekilde npmden ald─▒─č─▒m─▒z token ile burada yeni bir environment variable tan─▒ml─▒yoruz.

Github-actionslara ge├žmeden ├Ânce son olarakda ui-library olan package ismimizi unique bir npm package ismi se├žerek de─či┼čtiriyoruz. Npm k├╝t├╝phanesine girerek se├žti─činiz paket ismini kontrol edin. Ve privateyide false yap─▒yoruz ├ž├╝nk├╝ free npm ├╝yeli─čiyle private npm packageleri y├╝kleyemiyoruz. Bizimkisi de free oldu─ču i├žin public bir npm k├╝t├╝phanesi olu┼čturuyoruz.

https://medium.com/media/f669438b417eabdee9a87611714157cf/href

Step 19: Github Actions

Ve ┼čimdi t├╝m ayarlar─▒m─▒z─▒ yapt─▒─č─▒m─▒za g├Âre s─▒ra olu┼čturdu─čumuz libraryi npme publish etmeye geldi. Npm publish i┼čini github actionslarla otomatik bir ┼čekilde yapaca─č─▒z. S├╝re├ž ┼ču ┼čekilde i┼čleyecek. Biz bir commit g├Ânderdi─čimiz de yani githuba push etti─čimiz de githubda a┼ča─č─▒da yazd─▒─č─▒m─▒z ci actionu ├žal─▒┼č─▒p npm release ve semantic versioning automationunu bizim i├žin┬áyapacak.

Bunun i├žin tek yapmam─▒z gereken a┼ča─č─▒daki dizine release veya istediginiz bir dosya ad─▒┬á.yml ┼čeklinde bir dosya olu┼čturmak ve a┼ča─čd─▒a ki kodlar─▒ oraya yazmak. Yorumlu sat─▒rdaki test k─▒sm─▒n─▒ bilerek b─▒rakt─▒m isterseniz oradaki gibi ikinci bir job daha ekleyip kullanabilirsiniz.
/root/.github/workflows/release.yml

https://medium.com/media/e0fc5b9220dd0709d6b17b9b327c625b/href
Comments

6 Comments

BOOST YOUR FRONTEND CAREER

THE FRONTEND DEVELOPER