Introducing JATAYU !
Anunirva
Posted on September 24, 2021
JATAYU 🦅
Jatayu is a command line interface (CLI) tool which helps to generate production ready hand-made React templates for the App (web-app) or Library (components) development. 🚀
See npm package details here here
See Repo here here
What is the purpose of JATAYU ? 💁
Did you ever tried setting up your own react
environment without create-react-app
? Then you know the pain behind it. Adding testing support | webpack | typescript | docker
will just increases that pain. 😪
JATAYU
is that pain killer 💊. If you want to have custom template setup for your react web app or component library without the need of CRA or it's alternatives, JATAYU
to the rescue. 🥳
We provide you the skeleton template structure and sky is the limit for it's tuning.
At its very core JATAYU
offers below described templates with both Typescript & Javascript support as template supporting languages and Docker setup (for web apps).
1.React Component Library
2.React Web App
3.React Web App with Redux
4.React Web App with Redux Toolkit
5.React Web App with Context
When you choose any one of the above projects, we provide you the ready-made template structure.
Features
Template Type/Support | Webpack | Testing (@testing-library) | Storybook | Typescript | State Management | Lint | Build | Docker |
---|---|---|---|---|---|---|---|---|
React Component Library | ✅ | ✅ | ✅ | ✅ | No | ✅ | ✅ | No |
React Web App | ✅ | ✅ | No | ✅ | ✅ | ✅ | ✅ | ✅ |
React Web App with Redux | ✅ | ✅ | No | ✅ | ✅ | ✅ | ✅ | ✅ |
React Web App with Redux Toolkit | ✅ | ✅ | No | ✅ | ✅ | ✅ | ✅ | ✅ |
React Web App with Context API | ✅ | ✅ | No | ✅ | ✅ | ✅ | ✅ | ✅ |
Installation 🔨
Use the package manager npm to install jatayu globally.
npm install -g jatayu
Usage ⚠️ ✅
After installation, create an empty directory anywhere you want and type jatayu
in the terminal of the newly created folder. Voila! you will be prompted to answer two basic questions go ahead and answer them !
1. Please enter directory name where your react template will reside
2. Please select template type (Use arrow keys)
React Component Library
React Web App
React Web App with Redux
React Web App with Redux Toolkit
React Web App with Context
3. Please select template support
Javascript(JS)
Typescript(TS)
4. Do you want to add docker to the Template ? (if you select app template)
Yes
No
Enter the directory name where you want to setup
react app and select the type of project
you want.
Steps after installing the project 📌
If you select Web App or Library template without Docker support:
Now cd
to the newly created folder by jatayu
and do npm install. It's good to update your newly created node_modules
by npm outdated
you will get list of outdated node_modules
, update them by npm update
.
Start the template by npm run start
(if you have chosen webapp template) or npm run storybook
(if it is library template)
cd `your-newly-created-folder`
npm install
run -> npm run start (if you have chosen webapp template)
or
npm run storybook (if it is library template)
If you chose to add Docker to the App template
cd `your-newly-created-folder`
dev-run -> docker compose up --build (starts dev server, please navigate to http:localhost:5200 to see your App up and rolling!)
build -> docker compose -f docker-compose.prod.yml up --build (to build and run on dist folder, please navigate to http:localhost:1337 to see your App up and rolling!)
What's next in the store?
We have plans to make JATAYU
library/framework independent. So that JATAYU
can offer custom templates to Angular, Vue, Svelte etc.
Upcoming templates:
React with GraphQL
Full stack MERN combo (MongoDB+Express+React+Node)
Screenshots 💣
Screenshots of the flow
Enter directory name
Select template type
Select template supporting language type
Need docker support?
Successful template creation without docker
Successful template creation with docker
Enough with the theory, let's see Jatayu in action 💣
I want to setup React Web App with Redux, let's find out how Jatayu helps us!
I will chose my directory as hello
select React Web App with Redux template with Typescript support.
Project Templates:
Expannded view:
Install all the dependencies by npm install
command in the terminal and then
without docker support
Run the template by npm run start
(broswer open with localhost:5203)
with docker support
Run the template by docker compose up -d --build
(Open broswer with localhost:5200)
Always make sure the ports defined in the docker-compose.yml file and npm start script file are always same.
License 🦔
Feedback 📣
If you have any feedback, please reach out to us at manoj.gangavarapuu@gmail.com
Posted on September 24, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.