With vite you can specify which language/framework you want to use when createing the project. Is it possible to do this for my custom react teplate

232 views Asked by At

Lets say i have an react typescript template. Now there are 2 slightly different versions of the template. It would be cool if there is an approach to configure the template with the console. An example is the setup of a vite project(You can configure framework and language) Can i create the templates based on the user input(i dont know if it should be triggered by git clone or npm install

Vite example: Prompt

1

There are 1 answers

0
CenterADiv On

Solution i came across: Using inquirer package you can prompt the user for the input in my case it looks like this: Inquirer prompt

I can run the inquirer script as a postinstall script(runs directly after npm install). Here is the configuration for the prompt:

import inquirer from 'inquirer';
import * as childprocess from 'child_process';
import chalk from 'chalk';

inquirer
    .prompt([
        {
            type: 'list',
            name: 'versions',
            message: 'Select a template:',
            choices: [
                {
                    name: `${chalk.yellow('⚡ Basic')} -> Lightweight boilerplate`,
                    value: 'Basic',
                },
                {
                    name: `${chalk.magenta('️ Intermediate')} -> Commented Examples and best-practices`
                },
                {
                    name: `${chalk.red(' Advanced')} -> Additional examples and best-practices`,
                    value: 'Advanced',
                },
            ],
        },
    ])
    .then((answers) => {
        childprocess.exec('node file-remover.mjs', (error, stdout, stderr) => {
            if (error) {
                console.error(`Error: ${error.message}`);
                return;
            }
            if (stderr) {
                console.error(`stderr: ${stderr}`);
                return;
            }
            console.log(`stdout: ${stdout}`);
        });

Based on the users response, I can configure which files I want to include in my template.

Edit: The approach is quite simple: after receiving input from the user, you can modify the necessary files using another script. Once the template has been generated, you can then run an eject script that deletes all of the files (including itself) that were used in the process.