Introduction to NPM
NPM (node package manager) is the world's largest registry, which has millions of packages that enable the developers to collaborate and help each other to build and develop projects An NPM package is a reusable piece of code that you can download and install into your projects, encapsulating functionality or as dependencies to install and use the functionality, for example, installing readline module in javascript to access input from terminal where these packages that can be easily shared across different projects or even with the community at large.
What Are npm Starter Commands?
npm starter commands are specialized scripts that automate the initialization of projects. They provide a shortcut to set up a project with predefined configurations, dependencies, and folder structures. Imagine sparing yourself with the manual steps and complexities of project initialization.
About project
The create-react-tailwindcss
is an npm-based starter command that simplifies the process of setting up a react project with tailwind CSS. I came up with the idea for "create-react-tailwindcss" when I was learning MERN stack with Tailwind CSS as a beginner. Setting up projects with Tailwind CSS was a repetitive task. So, I created this npm package to automate the setup process. Now, developers can focus more on their actual code and less on the hassle of configuring each new project.
Who can use it?
Beginners: Streamline setup and focus on learning React-Tailwind CSS.
Programmers/Developers: Quickly initiate projects, saving time on repetitive configurations for React with Tailwind CSS.
Why to use it?
Efficient Start: Avoid repetitive configuration tasks and quickly initiate new projects.
Time Saver: Speeds up the initial setup, letting you focus more on development tasks.
Performance
Note: The time taken for installation is compared between installing with my package and installing without it and the time taken will also depend on internet speed and storage of respective drives.
Using my package with 5 mbps internet speed
On average, the installation process using the specified method is expected to take 2-3 minutes with internet speed of 5 mbps.
Building process
Prerequisites to build
Nodejs (from 18.0.0)
Npm
Commander
-
Understanding about
- Javascript
- nodejs
- react-tailwindcss
Folder structure
.
└── main folder/
├── node_modules
├── index.js
├── package-lock.json
├── package.json
├── Readme.md
└── LICENSE
Note: The above folder structure defined is after installing the all dependencies and packages.
Initialization of project and installing all dependencies
Start by initializing the project folder
Step 1:
Create package .json
npm init
Changes in package.json
{
"name": "create-react-tailwindcss",
"version": "1.0.2",
"description": "",
"main": "index.js",
"bin": {
"create-react-tailwindcss": "./index.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"npx",
"npm",
"react",
"tailwindcss",
"vite",
"react-tailwindcss"
],
"author": "",
"license": "ISC",
"dependencies": {
"commander": "^11.1.0"
}
}
Install commander
commander
is a Node.js library for creating command-line interfaces with ease. It simplifies the process of defining and parsing command-line options, making it straightforward to build powerful and user-friendly command-line applications.
npm install commander
Step 2: core logic
The fundamental functionality of the package is built in JavaScript within the index.js
file, encapsulating the core logic for the npm package.
// Define a function to create a React project with Tailwind CSS using Vite
function createReactTailwindCSSVite(projectName) {
// Resolve the absolute path for the project
const projectPath = resolvePath(projectName);
// Check if the directory already exists
if (directoryExists(projectPath)) {
printError(`Error: Directory "${projectName}" already exists.`);
exit(1);
}
// Display a message indicating the creation of a new React project with Tailwind CSS using Vite
print(`Creating a new React project with Tailwind CSS using Vite: ${projectName}`);
// Execute commands to set up the React project and install dependencies
executeCommand(`npx create-vite ${projectName} --template react`, { stdio: 'inherit' });
executeCommand(`cd ${projectPath} && npm install -D tailwindcss@latest postcss@latest autoprefixer@latest`, { stdio: 'inherit' });
executeCommand(`cd ${projectPath} && npx tailwindcss init -p`, { stdio: 'inherit' });
// Update index.css with Tailwind CSS styles
const indexPath = joinPath(projectPath, 'src', 'index.css');
const newIndexContent = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`;
updateFileContent(indexPath, newIndexContent);
// Update tailwind.config.js with the Tailwind CSS configuration
const configPath = joinPath(projectPath, 'tailwind.config.js');
const newConfigContent = `
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
`;
updateFileContent(configPath, newConfigContent);
// Display a message indicating the successful completion of the setup
print('Setup completed successfully!');
}
// Define a function to update the content of a file
function updateFileContent(filePath, newContent) {
try {
writeFile(filePath, newContent);
print(`File ${filePath} updated successfully.`);
} catch (error) {
printError(`Error updating file ${filePath}: ${error.message}`);
}
}
Step 3:
To convert index.js
as executable file use
chmod +x index.js
Step 4:
Test locally using npm link
in the main package folder and create a new folder
Folder structure for testing
.
└── main folder/
├── project package
└── testing folder
Step 5:
Use to run
npx create-react-tailwindcss <project-name>
Get Started - in usage
Note: for understanding more about project visit my github repo link -https://github.com/virumons/RVT-NPM.
Thank you for Reading :)
Top comments (0)