DEV Community: Leopold

Create-react-app or Vite ?

Leopold — Tue, 11 Oct 2022 20:47:34 +0000

Hey there,

I am not too familiar with vite but I've explored a bit and as of today there are many developers promoting the use of vite instead of create-react-app to build React projects.
The main argument in favor of vite is that it is blazing fast compared to CRA.
I feel more and more concerned by the growing adoption of vite instead of CRA since I'm building Reactirator and I consider to add support for vite and maybe choose it as the default choice.

In order to take the best possible choice, I'm questionning the community.
So what is your preference, vite or Create-react-app ? Whats are the reasons ?

Thanks a lot by advance to people engaging in this discussion!

Have a good day.

Short Babel memo to configure it!

Leopold — Tue, 21 Jun 2022 19:57:52 +0000

If you're a Javascript developper, chances that you have heard about Babel one day are very high.
Most of the time we don't necessary need to configure it ourself, because it is extremely common to use a starter or some boilerplate that come up with the basic configuration.
BUT sometimes we need to dig into that and that's my case, I am terrible at memorize all of thoses settings and It is extremely easy to waste time with that. So this post is simply me sharing my memo note about using Babel.

A quick reminder: what is babel

Babel is a JavaScript compiler. This is mainly use to transform your code into a compatible version of Javascript in most environnements and browsers.

Example from the official documentation:

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

Babel installation

Install babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

A project need a babel config file.
There are 2 differents types:

Project-wide configuration
- babel.config.* files, with the following extensions: .json, .js, .cjs, .mjs.
File-relative configuration
- .babelrc.* files, with the following extensions: .json, .js, .cjs, .mjs.
- .babelrc file, with no extension.
- package.json files, with a "babel" key.

Whatever your pick, this file contains your presets and plugins.
Preset and plugins are used to apply code transformation.

For example the plugin @babel/plugin-transform-arrow-functions is used to transform array functions into ES5 compatible function expressions:

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

How to use

To use babel, we first have to install each preset or plugins.

If you need to use modern Javascript, we need preset-env

npm install --save-dev @babel/preset-env

To compile Typescript into Javascript use: preset-typescript

npm install --save-dev @babel/preset-typescript

Or React.js: preset-react

npm install --save-dev @babel/preset-react

In the configuration file (here babel.config.json model):

{
  "presets": ["@babel/preset-typescript", "@babel/env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

Don't forget some options might be avalaible to certains preset and plugins! (see docs).

Finally compile for example a Typescript code:

npx babel index.ts --out-file ./dist/index.js

Hope it helps some people into their project configuration struggle! Have a good day.

Source

Build and publish your npm package

Leopold — Mon, 20 Jun 2022 20:28:29 +0000

I haven't published a npm package since a year but for a project I had to re-learn all the process and in parallel this is the occasion to write and share a minimalistic step by step tutorial to publish a npm package !

I assume you're already familliar with npm.

First step: project configuration

A npm package need a package.json file to be publish ! So let's create one.

npm init

I'm calling my project npmdemocreation.

We need that index.js file now where you're going to create a say hello function !

And we've done with the project config ! As mentionned earlier, let's keep things simple so we can focus on the most important: the process to publish a package.

Second step: Login to npm

If it is the first time we need to login with our credentials:

npm login

If you don't have a account, you can use their website to create your account or the command npm adduser.

Third step: Publish!

According to npm, publishing a package is extremely simple, be curious and have a look here for more detailed explanations: npm official doc.

We have that publish command we can try:

npm publish

Well well well I personally got an error here and if we read a bit more carefully in the documentation it appears that we need to be explicit about the access option:

npm publish --access public

In fact, If you don't have a paid account, you can only use the public value.

At this point your log should confirm everything went allright!
I personally am able to search my package on npm and find it here !
Really simple isn't it ?

In case it's still not working verify that your package name doesn't already exist.

Fourth step: Try your package

Now open another folder and try your package!

For me it is:

npm install npmdemocreation

Then execute my sayHello function:

const sayHello = require('npmdemocreation');

sayHello();

We got that hello there!

Additional step: update your package

What if you want to modify your package and publish it again ?
Still easy npm publish all the way!

Well not really, got an error ? Yes you can't ever publish with the same tag, if you look at the package.json version field, we're in 1.0.0.
You have to change this number in the package.json file or in the npm command with the --tag option.

You can't remove a version from npm once you published it, you always have to publish with a new version. However, you can provide a deprecation warning with the npm deprecate command.

Things to keep in mind to publish a npm package:

You need a npm account.
Your package should contain a package.json file.
All files in the package directory are included if no local .gitignore or .npmignore file exist.
A given name and version combiaison can only be published once!

There are a lot of thing to explore but at least now you and me know how to publish a simple npm package.

Have a good day.

A React toolkit - mini applications serie.

Leopold — Thu, 24 Mar 2022 12:19:45 +0000

Hey everyone,

I am building Reactirator an opensource React project manager for some months now. I must admit I am kind of proud of my work because this is my first desktop application even if everything is far from perfect!
For this reason I want to share my knowledges and what I've learnt by building Reactirator.
Hence, I will be making posts in the future about how build some of the features of Reactirator.
This will be detached from the Reactirator context because we won't use Electron, basically this will be a serie of mini react / node application.

This is also going to be a challenge to myself, writing and explaination aren't my best skills ! So, my goal is to write consistently and improve my writing skills in english and maybe doing this will help me re-think about the application to improve it !

Before explaining what is the serie plan, let me explain what is reactirator.

What is this ?

Reactirator is a desktop application built with Electron using TypeScript, React and Node. It has two parts:

The app creator: You will find an installation process where you can select famous React configurations/features, look for packages, pre-generate folders and components etc.

The app manager: basically it is a task runner, start your development server, launch your build process or install new dependencies, update their version etc.

This is a desktop app, so all you have to do is toggle switchs, push on buttons or type some packages name to find new one and have visual output about each task results.

I won't go deeper into the project description because well there is a readme for this!

What's the plan ?

Reactirator has quite a lot of different tools, some are more "React focused" while others are more about communication with the Node.js server. Reactirator also has some upcoming features to speak about.

I made a small list of things that come to my mind for now, it is susceptible to change and grow over the time.

Build a React folder tree component. (React - https://i.gyazo.com/0bb3240114af6708f27048f81e7898a3.png ).
Build a Npm package search and display results with data (React https://i.gyazo.com/7a54588011033f27500597ae1151c1ad.png ).
A task runner button with output in a terminal component (React + Node - https://i.gyazo.com/85d5b88085e1f9e03a6c5300847b2bcb.png)
Github connexion from React where you can create repo remotely (React - https://i.gyazo.com/37ef5a8a158e1f19bfc58d71b1f6a349.png)
And finally the new features in the manager part which didn't exist yet: the component real-time creator: when you're in a code editor, you will be able to use Reactirator to generate as many components as you want with chosen template (class, functional, default export or not etc.) and location. (React + Node).

There you go, hopefully it will interest some React developpers (wheter you are a beginner or not) or give some ideas about cool application you can do! And I would be happy to heard your feedback about all of this!

If you're interested by Reactirator and want to contribute, you're welcome: https://github.com/Leopold-V/Reactirator .

Have a good day.

I built a React app generator.

Leopold — Thu, 17 Jun 2021 15:39:56 +0000

I am proud to announce I finally built my first desktop application. And even if I can't consider it to be in a production-ready state for now, it is usable and I was really looking forward to sharing this work and see if it can interest some react developers.

What is this ?

The application is called reactirator.
It is a desktop application built with Electron using TypeScript, React and Node. The objective is to provide a simple GUI to create a React.js application with any configs and packages you need. So you can focus on the code as fast as possible.

Updated screen of the current application state 20/01/2022

Motivation

Some months ago I did learn about how to build my own boilerplate and install them like create-react-app does.
I made an article about this.

Build and use boilerplates according to your needs is cool but it can lead to a lot of project maintenances and efforts. Often you also have differents requirements than in your previous project so you will be looking for another boilerplate or make your own again and ending up with a ton of different boilerplate to maintain... or just come back to a very generic one like create-react-app if you're bored !

So I went a bit further to find a more optimal solution for my need and this is why I started to build this. It does generate a react app on top of create-react-app so you get all the advantages of CRA but where you can also chose your config and packages then push the create button like you would command a pizza.

Techs corner

As a javascript developer, I definitely enjoy working with electron, everything is full javascript and so you can build beautiful desktop app even if you are a frontend developer.

I encounter some technical difficulties though :

I haven't found another way to gather the npm package size data but to use the npm registry, problem with that is : it can't be fetched (cors issues) and so I have to use the old request module !
A few packages installations such as tailwind require quite a lot of configuration to do on a CRA app : have a look here, at this time I haven't found another way than to "hardcode" some packages version (for example, tailwind requires postcss 7, autoprefixer 9 etc.) to have it installed which is definitely not ideal for maintenance reasons.

If you have any idea, those are listed in the issues list in github.

In the long run the project goal is to extend the possible customizations providing you more control over the generation and more advantages to use this project (for example, custom script command in the package json file etc.).

Alright, Thanks a lot for reading ! I am glad to share Reactirator and if anyone want to contribute don't hesitate, whether you are a total beginner or not.

https://github.com/Leopold-V/Reactirator

Have a good day.

Build cool charts and visualize data with d3.js

Leopold — Tue, 01 Jun 2021 19:36:16 +0000

You probably have seen a lot of "covidtracker" or cryptocurrency charts applications for some time now, some of them offer really awesome charts which you can hardly make with commons libraries of "ready to make" charts.

I must admit... I love play with data and seeing these kinds of beautiful UIs with all those numbers so well presented makes me jealous, I was like : oh, I really need to be able to build that !
So I recently started to put my head into the famous d3.js library.
Don't expect I come up with something impressive here, no but I hope a good basic to introduce you to data visualization with d3.js.

What we are going to build is is a bar chart of the top 10 population by country :

DEMO

What is d3.js ?

In fact d3.js is not a chart library, It is a kind of big API to manipulate the DOM and offers a lot of utilities functions. You can manipulate svg, canvas, html and so construct charts, graphs, maps, everything you want for data visualization.
The biggest advantage of using d3 is that every cool data visualization you've ever seen on the web are probably feasible using d3.js.
The major drawback is d3.js may be overwhelming at first and is quite hard to learn in my opinion.

Build the application

Prepare the project :

We won't use any framework or particular config here just for the sake of simplicity some pure javascript.

Create a index.html file and include this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>d3.js Demo</title>
</head>
<body>
    <h1>Top 10 population by country</h1>
    <div id="chart"></div>
    <div id="tooltip">
        <h3 id="country_name"></h3>
        <p id="country_population"></p>
    </div>

    <script src="https://d3js.org/d3.v6.js"></script>
    <script src="index.js"></script>
</body>
</html>

We are importing the d3.js library and the index.js file which is going to contain our code.

Create a style.css file with thoses styles :

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Avenir, Helvetica, Arial, sans-serif;
}

svg {
    background-color: #2a2a2e;
    color: white;
    border-radius: 5px;
}

h1 {
    padding-bottom: 2rem;
}

#tooltip {
    position: absolute;
    visibility: hidden;
    background-color: white;
    font-size: .7rem;
    border-radius: 5px;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#country_name {
    padding: .3rem;
}

#country_population {
    padding: .3rem;
}

.bar {
    transition: .2s all;
}

Finally, add an index.js file. We are now ready to start coding.

Prepare the data

We are going to use restcountries API.

What we want to display on the chart is a list of the top 10 countries in term of population so we only need the name and population for x/y axis of each country.

Let's start by gathering these data and format them in the desired shape :

const API_URL = 'https://restcountries.eu/rest/v2/all';

const getData = async () => {
  const reponse = await fetch(API_URL);
  const result = await reponse.json();
  // Sort by population
  const dataSort = result.sort((a, b) => b.population - a.population);
  // only keep the top 10 population
  dataSort.length = 10;
  // We only need name + population
  const dataReady = dataSort.map((country) => ({
    name: country.name,
    population: Math.floor(country.population / 1000000),
  }));
  return dataReady;
};

Now we have exactly what we need :

https://i.gyazo.com/384c61698aae5dc6f39c86d8b5447150.png

Build the chart :

Create the main element

Create a new function which will be in charge of generating the bar chart with the help of d3 :

const generateChart = (popData) => {
  const margin = {
    top: 20,
    right: 40,
    bottom: 60,
    left: 80,
  };
  const width = 1000 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

  // Create svg
  const svgElement = d3
    .select('#chart')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);
}

Notice how we use "d3.select" to select a dom element and chains other methods such as "append" and "attr" to construct our elements. Thoses are really the basic of d3.
The margin, width and height variables are there to set up the position of our svg element and will be use to position our axis as well.

Create axis

Next let's create our axis with d3-scale methods :

    // Add X axis
    const xScale = d3.scaleBand()
    .range([0, width])
    .domain(popData.map((s) => s.name))
    .padding(0.2)
    svgElement.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(xScale));

    // Add Y axis
    const yScale = d3.scaleLinear()
        .domain([popData[0].population, popData[9].population])
        .range([0, height]);
    svgElement.append('g')
        .call(d3.axisLeft(yScale));

   // Add grid
   svgElement
    .append('g')
.call(d3.axisLeft(yScale).ticks().tickSize(-width).tickFormat(''));

We have used several utilities methods from d3 part of the scale module to correctly map our axis with the datas (scaleLinear, scaleBand).
If you open your navigator you see now an svg element with two axis but no data yet.

Represent the data with bars

To represent our data with bar we simply create rectangles and add them to our main svg element with the correct width and proportion again thanks to certains d3-scale methods (bandwidth, xScale, yScale) :

  // Draw the bars
  svgElement
    .append('g')
    .selectAll('.bar')
    .data(popData)
    .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', (d) => xScale(d.name))
    .attr('width', xScale.bandwidth())
    .attr('y', (d) => yScale(d.population))
    .attr('height', 0)
    .style('fill', '#00FA9A')
    .transition()
    .duration(750)
    .attr('height', (d) => height - yScale(d.population));

Our chart is working right now but let's make it a bit more "alive".

Add Tooltip and hover effect :

We want to show the exact population when we hover one bar so we need to create a tooltip and add mouse events on each bar.
Remember: there is a div element in our index.html page with a tooltip id, and some styles in the css. In fact everything was ready, the tooltip is there but hidden, we simply need now to add mouse event :

 // create a tooltip
  const tooltip = d3.select('#tooltip');
  const tooltip_name = d3.select('#country_name');
  const tooltip_pop = d3.select('#country_population');

  // Add mouse event to show the tooltip when hovering bars
  d3.selectAll('.bar')
    .on('mouseover', function () {
      d3.select(this).style('fill', '#59ffb2');
      tooltip.style('visibility', 'visible');
    })
    .on('mousemove', function (e, d) {
      tooltip
        .style('top', event.pageY - 10 + 'px')
        .style('left', event.pageX + 10 + 'px');
      tooltip_name.text(d.name);
      tooltip_pop.text(`Population: ${d.population} Millions`);
    })
    .on('mouseout', function () {
      d3.select(this).style('fill', '#00FA9A');
      tooltip.style('visibility', 'hidden');
    });

Add text label for the axis :

  // text label for the y axis
  svgElement
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 0 - margin.left)
    .attr('x', 0 - height / 2)
    .attr('dy', '1em')
    .style('text-anchor', 'middle')
    .style('fill', 'white')
    .text('Population (in millions)');

  // text label for the y axis
  svgElement
    .append('text')
    .attr('y', height + 30)
    .attr('x', 0 + width / 2)
    .attr('dy', '1em')
    .style('text-anchor', 'middle')
    .style('fill', 'white')
    .text('Country name');

Execute the code :

In the main scope simply execute our functions

getData().then(generateChart);

And there you go, now you should have this result .

If you want to check the entire code : here

There are really so much possibilities and things to build in the data visualization domain, just be curious and explore !
I hope I have been clear enough and that it has help you to apprehend chart construction for creating better UI.

Have a good day!

Automatize tailwind installation on create-react-app with Node.js

Leopold — Mon, 26 Apr 2021 13:56:50 +0000

Projects configuration might be complicated and boring.

I recently went into the process of learning how to automatize some annoying tasks I often do in my projects using Node.js.

I picked tailwind and create-react-app as an example, but this is mainly about showing Node.js scripting possibilities to save time. The final result is to type :

node myscript.js appname

instead of :

npx create-react-app appname

And our normal CRA is generated with tailwind fully installed according to tailwind documentation.

Before jumping into the next part, I advise you to be comfortable with javascript promises and to have a quick look to node.js fs and child process documentation if you don't know them yet.

Script overview :

Have a look at the tailwind documentation to see how to install it on a CRA.
https://tailwindcss.com/docs/guides/create-react-app

Basically, we want to code each step of the installation process explained in the documentation so our script has to handle these things :

execute the npx create-react-app appname command.
Install tailwind packages.
Install a package called craco.
Modify the script section of the package.json file.
Create a craco.config.js file at the root of the project.
Generate a tailwindcss config file.
And finally import tailwind css in our index.css file.

We identified each part of the mission, this is just a simple algorithm to code now.

The script :

Preparation :

Firstly create a javascript file, we want to convert the above steps in js code.
Child process exec method allows us to execute commands and fs to manipulate files.
Sadly their methods work with a callback so we do a quick adaptation to be able to use them with async/await thanks to the "util" module..
Include at the top of your script the following import :

const util = require('util');
const { exec } = util.promisify(require('child_process'));
const { readFile, writeFile, appendFile } = util.promisify(require('fs'));

Code :

Execute the npx create-react-app appname command :

const installation = async () => {
    await exec(`npx create-react-app ${process.argv[2]}`); 
}

Installation is the main function of our script, and we execute our first command here !
process.argv[2] is the argument given when we launch the script such as :

 node index.js appname

Here process.argv[2] is equal to "appname".

The next step is to install packages :

const installation = async () => {
    await exec(`npx create-react-app ${process.argv[2]}`);
    await exec(`cd ${process.argv[2]} && npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 && npm install @craco/craco`)
}

Now we need to get the package.json file to modify the script section including craco script as mentioned in the tailwind doc. At this point the creacte-react-app has been generated and so we have to change our location to be inside the project and import package.json to manipulate it as a javascript object, finally we overwrite the file with the new modification. This is where the fs module come to help us !

We create a new function in charge of doing the package.json modification :

const modifyPackageJson = async () => {
  const data = await readFile(`${process.argv[2]}/package.json`);
  packageJson = JSON.parse(data);
  packageJson.scripts = {
    start: 'craco start',
    build: 'craco build',
    test: 'craco test',
    eject: 'react-scripts eject',
  };
  await writeFile(`${process.argv[2]}/package.json`, JSON.stringify(packageJson));
};

Create the craco.config.js file. We will proceed in the same way, create a new function and write the file with the require data :

const addCracoConfig = async () => {
  const cracoConfig = `module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}`;
  await writeFile(`${process.argv[2]}/craco.config.js`, cracoConfig);
};

Add the 2 last functions we created to the main function :

const installation = async () => {
    await exec(`npx create-react-app ${process.argv[2]}`);
    await exec(`npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 && npm install @craco/craco`)
    await modifyPackageJson();
    await addCracoConfig();
}

Generate the tailwindcss config file :

const installation = async () => {
    await exec(`npx create-react-app ${process.argv[2]}`);
    await exec(`npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 && npm install @craco/craco`)
    await modifyPackageJson();
    await addCracoConfig();
    await exec(`cd ${process.argv[2]} && npx tailwindcss init`);
}

Finally we need to include tailwind in the index.css. Again we use fs but we need to write the new code at the top of the index.css file. So this is going to be a read->write->append operation.

I create a new function called "includeTailwindCss" :

const includeTailwindCss= async () => {
  const tailwindImport = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
  const data = await readFile(`${process.argv[2]}/src/index.css`);
  await writeFile(`${process.argv[2]}/src/index.css`, tailwindImport);
  await appendFile(`${process.argv[2]}/src/index.css`, data);
};

We extract the index.css code in a data variable so that we can overwrite index.css with the new data. Then we append to the index.css the old data stored in the data variable, in this way the tailwind import lines are at the top of our css file.

Add this last function to our installation function and I think we are good now !

The final code should looks like this :

const util = require('util');
const exec = util.promisify(require('child_process').exec);
const readFile = util.promisify(require('fs').readFile);
const writeFile = util.promisify(require('fs').writeFile);
const appendFile = util.promisify(require('fs').appendFile);

const installation = async () => {
  await exec(`npx create-react-app ${process.argv[2]}`);
  await exec(`cd ${process.argv[2]} && npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 && npm install @craco/craco`);
  await modifyPackageJson();
  await addCracoConfig();
  await exec(`cd ${process.argv[2]} && npx tailwindcss init`);
  await includeTailwindCss();
};

const modifyPackageJson = async () => {
  const data = await readFile(`${process.argv[2]}/package.json`);
  packageJson = JSON.parse(data);
  packageJson.scripts = {
    start: 'craco start',
    build: 'craco build',
    test: 'craco test',
    eject: 'react-scripts eject',
  };
  await writeFile(`${process.argv[2]}/package.json`, JSON.stringify(packageJson));
};

const addCracoConfig = async () => {
  const cracoConfig = `module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}`;
  await writeFile(`${process.argv[2]}/craco.config.js`, cracoConfig);
};

const includeTailwindCss = async () => {
  const tailwindImport = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
  const data = await readFile(`${process.argv[2]}/src/index.css`);
  await writeFile(`${process.argv[2]}/src/index.css`, tailwindImport);
  await appendFile(`${process.argv[2]}/src/index.css`, data);
};

installation();

Now launch your script in the folder where you want to create your react-app :

node myscript.js appname

And that's all !

Finally you can go further and add real command logs results using node.js EventEmitter, errors handling, publish your script as a npm package etc. This was just an example with tailwind but there are a lot of possibilities everywhere and things to improve.

We can always find things to optimize.

What do you think about my method ? Have you a cleaner way to do this ?

Thanks for reading and have a good day.

Generate your web-app boilerplate like create-react-app does.

Leopold — Thu, 08 Apr 2021 17:24:00 +0000

Hello everyone, this is my first post here, and I hope my English is going to be smooth enough to make it enjoyable to read 👍.

It looks cool to create a npm package and type :

npx my-dream-boilerplate app-name

And boom ! Your project is magically there all setup with your favorite configs, tools and more.

That's what we will do right now.

Why ?

Before we really start, let's try to answer to this question :

Why would you create your own wep-app boilerplate when there are great tools already in place such as create-react-app which also do a lot more that a simple project boilerplate ?

Here is what motivated me :
When I create a web application, I started to be very bored of having to install each time the same packages, commands, folders, etc. over and over.

I can extract some kind of layout of my projects.
I mostly use React.js and I do need EACH TIME (or almost) to install/change the same bunch of things (react-router-dom, styled-component, build my components structure, redux, etc.) while at the contrary I don't need create-react-app to make a small app or fast prototyping stuffs.
I waste time installing packages, add configs and organizing my folders.

So I get interested in making that npx my-dream-boilerplate app-name command works to generate the project starter i like.

Initialize the project

For demo purpose let's keep things very very (and very) simple.
We'll do like in a lot of projects: add a package.json and install all the dependencies we need.

Installing dependencies and setup

First let's initialize the project :

Create a new foler, for example "create-my-boilerplate" and run inside it :

npm init

The only dependencies we will use here are parcel and rimraf.

Parcel is a web application bundler, there are others Javascript bundlers (webpack, rollup, etc.) but parcel comes up with (almost) no config, a development server, hot module replacement, etc. So this is well enough for our need here.
rimraf is a npm package used as the UNIX command equivalent rm -rf for node. We will only use it for a command in the script part.

npm install -D parcel-bundler
npm install rimraf

Change the npm scripts field in your package.json :

  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.js"
  }

Create the structure

Create an index.html and an index.js file.

Your index.html looks like this :

<html>
<body>
    <div>Cool</div>
    <script src="index.js"></script>
</body>
</html>

Now verify that everything is working :

npm start

Again, the project structure is ridiculous here but how to setup a web project isn't the point of the article.

Script + Npx = speed

More setup

All right so how do i automatized all of this ? We want to type some kind of command like npx create-react-app app-name and boom my project appears !

This is possible thanks to the 'bin' field in the package.json and npx the package runner command.

Add to your package.json

  "bin": {
    "create-boilerplate": "./generate-app.js"
  }

Create at the root of the project a 'bin' repository with a generate-app.js file (name it as you want).

So ./bin/generate-app.js is the script executed when we will type the command npx create-my-boilerplate name-of-your-app.

Before going any further we need to create a git repository.
So run git init and create a .gitignore file..
Your .gitignore file have to ignore folders that parcel generate when you run/build : .cache, dist and build.

To finish the setup part, push your project to a new git repository, your git repo url is going to be use in the next part because we want to clone the repo.

The script

We are working on create-app.js now.
Again, let's keep things simple, the script have to handle this :

We want to execute a command who accepts an argument representing the application name and validate it.
If it is valid, verify if the project name doesn't already exist in the current folder.
Then we want to clone the github repository of this project boilerplate.
We want to install all the dependencies.
We want to delete files not useful.

Firstly we require the packages we need : (you don't need to install them).

#!/usr/bin/env node

const { execSync } = require('child_process');
const path = require('path');
const fs = require('fs');

We verify that an app name is provided (npx create-boilerplate with no argument isn't a valid command) :

if (process.argv.length < 3) {
    console.log('You have to provide a name to your app.');
    console.log('For example :');
    console.log('    npx create-my-boilerplate my-app');
    process.exit(1);
}

Declare variables we need :

const projectName = process.argv[2];
const currentPath = process.cwd();
const projectPath = path.join(currentPath, projectName);
const git_repo = YOUR_GIT_URL;

Verify the project name is available otherwise cancel the process :

try {
  fs.mkdirSync(projectPath);
} catch (err) {
  if (err.code === 'EEXIST') {
    console.log(`The file ${projectName} already exist in the current directory, please give it another name.`);
  } else {
    console.log(error);
  }
  process.exit(1);
}

Now we reach the main part :

async function main() {
    try {
      console.log('Downloading files...');
      execSync(`git clone --depth 1 ${git_repo} ${projectPath}`);

      process.chdir(projectPath);

      console.log('Installing dependencies...');
      execSync('npm install');

      console.log('Removing useless files);
      execSync('npx rimraf ./.git');
      fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true});

      console.log('The installation is done, this is ready to use !');

    } catch (error) {
      console.log(error);
    }
}
main();

Read lines with console.log(), they pretty much explain every command.
This is a very basic CLI but you could do a lot more thanks to node environment, add colors, package.json generator, etc.

That's it.
You can test your package locally :

npm link

It creates a symbolic link so that you can use it as a node module in the folder you are currently located.

And now it is the great time, where the magic comes :

npx create-my-boilerplate app-name

Your script runs and your project spawns.
Congratulation.
As you can see, a basic generation is definitely not complicated.

You can start :

npm start

Go further, make your own boilerplate with your favorite setup and learn to publish on npm.

npm login

npm publish

Now check your package on https://www.npmjs.com/ !

I hope It wasn't too confused and that it will inspire you a little bit about Node.js scripting possibilities, yours project needs and/or new packages ideas.
I myself ending up building my own project boilerplate last week (and in fact thats my first npm package ever) for react-applications with parcel, which include features I use regularly such as prettier, css autoprefixer and reset, tests, styled-components, etc.
If you are interested you can have a look to the code on my github particularly the ./bin/ folder where i have a bit more advanced script than in this article : https://www.npmjs.com/package/react-parcel-app

Thanks for reading and have a good day.