DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create your own Create React App template
ihaback
ihaback

Posted on • Updated on

Create your own Create React App template

Create React App is a convienient way to start building a new single-page application in React. Your app only needs one build dependency react-scripts. Under the hood it uses webpack, Babel, ESLint, and other amazing projects to power your app.

Make it your own

If you don't like the default scaffold of create react app it really easy to adjust.

  • Start by creating a folder called cra-template.

  • Cd into the folder and run yarn init -y or npm init -y if your prefer npm. This will generate a basic package.json file for you.

  • Create a template.json with your specific template settings. Any dependencies you add here will be added to the final dependency list.

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Create a template folder.

  • Inside the template folder create a gitignore file with the content below. Make sure to omit the dot.


# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
Enter fullscreen mode Exit fullscreen mode
  • Inside the template folder create a public folder with the following index.html.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>CRA template</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Inside the template folder create a src folder and an index.tsx in it.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode
  • Inside the template/src folder create a App.tsx file.
import React from "react";

const App = () => {
  return <div>My CRA template</div>;
};

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Test that your scaffold is working locally by running
npx create-react-app my-app --template file:.
Enter fullscreen mode Exit fullscreen mode

Finished code

Should look something like this

Publish to npm

npm publish
Enter fullscreen mode Exit fullscreen mode

Use your published template in a project

npx create-react-app my-app --template your-template-name
Enter fullscreen mode Exit fullscreen mode
npx create-react-app my-app --template barebones
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
aksconnect42 profile image
aksconnect42

Thanks for this post ! This worked really well for me. However, when I tried adding a .npmrc file in the template, it did not get added in the generated project. Not sure why this particular file was skipped and all other folders and files were successfully added.

Collapse
 
codeurabou profile image
Aboucodeur

ok

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›