Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I create a custom React project using my modified create-react-app version?

cloned the create-react-app repository and made some modifications to it. Now, I want to use my updated version to create React projects locally. Essentially, I’d like to use a command like npx create-custom-react-app to generate new React projects using my custom version.

How can I set this up so that I can use my modified create-react-app version to initialize React projects locally?

I attempted to use yarn link to link my local version of create-react-app to my global npx setup, but I wasn’t able to get it working as expected.
What I was expecting:

I hoped that after linking my custom version with yarn link, I would be able to run npx create-custom-react-app and create new React projects based on my modified version.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved my problem. I locally published the update I made using Verdaccio. The root of the problem was that the npx create-react-app command depends on multiple packages. After publishing all the required packages to Verdaccio locally, I was able to use my updated create-react-app project by running my custom command npx create-custom-react-app and successfully created a project.

    If you also want to test an npm package locally or avoid publishing it directly, Verdaccio is really useful. You can find its documentation here: Verdaccio Documentation.


  2. 0

    There are multiple ways to achieve what you want, and both revolve around customizing Create React App (CRA). You can achieve this with a custom template or by creating a whole custom CRA command.

    1. Using Custom Templates

    This method lets you define a template with specific dependencies, configurations, and files. You can then use it with the create-react-app command as follows:

    npx create-react-app my-app --template [template-name]

    Steps to Create a Custom Template:

    • Follow the CRA template structure, React provides a documentation that explain you how to create an build the template.

    2. Creating a Custom CRA Command

    This method involves creating a fully custom implementation of CRA as an npm package or a GitHub repository. This approach is more versatile and allows you to control every aspect of the project setup, such as scaffolding logic, default configurations, and custom dependencies.

    This way you can use the next command to create the whole app by using just github:

    npx github:your-username/your-repo-name my-react-app

    You need to create a JS Script for that repo, the next is just an example of what you can do:

    bin/create-my-react-app.js

    #!/usr/bin/env node
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

const projectName = process.argv[2];
if (!projectName) {
    console.error('Error: Please specify a project name.');
    console.log('Usage: npx create-my-react-app <project-name>');
    process.exit(1);
}

const targetDir = path.resolve(process.cwd(), projectName);

console.log('Creating project...');
fs.mkdirSync(targetDir, { recursive: true });
fs.cpSync(path.join(__dirname, '../templates/default'), targetDir, { recursive: true });

console.log('Installing dependencies...');
execSync('npm install', { cwd: targetDir, stdio: 'inherit' });

console.log(`Project created successfully! Navigate to ${projectName} and start coding.`);

    package.json

    {
    "name": "create-my-react-app",
    "version": "1.0.0",
    "bin": {
        "create-my-react-app": "bin/create-my-react-app.js"
    }
}
    Some Documentation to accomplish this approach:
    Custom CRA Command Resources

    1. Building a Custom CLI with Node.js (FreeCodeCamp):
      https://www.freecodecamp.org/news/how-to-build-a-cli-with-node-js/

    2. Node.js CLI Documentation:
      https://nodejs.org/api/cli.html

    3. Tutorial: Create Your Own Scaffolding Tool (Dev.to):
      https://dev.to/davidepacilio/how-to-create-your-own-cli-with-node-js-4m2g

    4. npm CLI Scripts Guide:
      https://docs.npmjs.com/cli/v9/configuring-npm/package-json#bin

    5. Using GitHub Repos with npx (npm Docs):
      https://docs.npmjs.com/cli/v9/commands/npx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search