Are you a developer struggling to find time to complete all the tasks in your backlog. Don't worry, and you are not alone. Been a Product Manager, Consultant, and a founder eats a huge chunk of my day, leaving a tiny window to do actual software development. But the good thing came out of this is I started automating all the repetitive tasks in development flow. Even it might take a bit of time initially to set up it will save a lot of time in long run.
This post will cover how we can use NPM to automate repetitive dev tasks, especially in JS environments like React, Angular, and React Native. Imagine working on a project with more than 100 components. How good you will feel if we can create components using an npm task inside the project. This way, it will save time and helps to maintain consistency throughout the project. And of course, you can approach this in various ways. Such as
- Create and template file type on the code editor.
- Use a plugin that gives snippets for the code editor.
The way I see it is when you work with multiple different teams on different projects, it is always useful to have isolated project standards that can be easily adjustable for the whole team.
Now to the actual task at hand. I want to create a React component, js module generator that does the following functions.
- Create and component folder with KebabCase naming( user can enter any texts with words separated by spaces. Ex "user info => UserInfo").
- Copy component files from the template folder to the above folder, rename the file and update the file's content like the name and CSS import.
- Repeat the same process the CSS file and test file.
Couple of minutes later..........
I felt like creating an NPM package that we can install in any js project will be useful for years to come. So I went ahead and did that instead of writing an individual script. But if you want to see how to do the above tasks, please jump into this code.
Now let's see how to use this tool.
- Install the package in your project using
npm i react-react-native-component-node-module-templates --save-dev
2. Initiate the template setup process
3. Run the component generator
npm run gen
- Select the tech stack of the project (only on the first run, delete the config.json to change this)
- Select the template type
- Select the location you want it
- Enter the Module name
Now let's see how to customise a template of your own to use in your projects.
- Create a folder inside developer-templates folder with the repo type (only if you don't have what you need) ex: react
- Create a child folder with the template files type ex: component-ts, component-js
- Create user-input-map.json file indicating what the values should user input and how they will get replaced.
"label":"UserInput1", // Will used in the input prompt
"replacingText" : "ModuleName", // What to look for in the template fiels
"replacingCaseTypes": 1 , // See Supported replacingCaseTypes
"replacingLocations": [1,2,3] // Where to replace see Supported replacingLocations
- file names
- folder names
- inside files
I know there are a lot more you can add to this. But for this posts purpose let's stop there.
Feel free to submit any improvements to this Github Repo