🧼 Cleanup-react-app

Cleanup your create-react-app. Removes commonly deleted files and boilerplate content from templates generated by create-react-app.

Similar packages exist. The contribution of this package is that it is simple, careful, and thorough. For example, the package performs checks to ensure the application being cleaned is an instance of create-react-app.

Instructions

Global installation is recommended:

npm i -g cleanup-react-app

or

yarn global add cleanup-react-app

To use the package navigate to the directory to be cleaned up and run:

cleanup-react-app

Intended use

It is intended that the package is run directly after running create-react-app.

create-react-app app-name

cd app-name

cleanup-react-app

Operations

The package performs four operations.

1. Check Directory

To ensure the directory being cleaned is an instance of create-react-app, its contents are checked.

If missing or modified files are detected, a warning is thrown:

⚠️ Warning: Directory does not match create-react-app template.

Missing files:

<list of missing files>

Modified files:

<list of modified files>

Attempting to cleanup: /directory/being/cleaned

Pay attention to the printed directory if this warning is thrown. Attempting to clean a directory that is not a template instance of create-react-app may result in unintended files being overwritten or deleted.

The package checks the existence of:

node_modules
public
public/favicon.ico
public/index.html
public/logo192.png
public/logo512.png
public/manifest.json
public/robots.txt
src
src/App.js
src/App.test.js
src/index.css
src/index.js
src/logo.svg
src/serviceWorker.js
src/setupTests.js
.gitignore
package.json
README.md
yarn.lock

and the content of:

src/App.js
src/App.css
src/index.js
src/index.css
public/index.html
public/manifest.json
README.md
serviceWorker.js

2. Remove files

It removes:

public/favicon.ico
public/logo192.png
public/logo512.png
src/logo.svg

3. Rename files

It renames:

App.js

to

App.jsx

4. Rewrite files

It empties the content of:

src/App.css
src/index.css
README.md

It modifies the content of:

src/App.jsx
src/App.test.js
public/manifest.json

The contents of these files are modified as follows.

Most of the boilerplate content is removed from src/App.jsx. A novel starting message is also given.

The new content is:

import React from 'react';
import './App.css';

function App() {
  return (
    <p>
      Cleanedup React App
    </p>
  );
}

export default App;

The test included in src/App.test.js fails because the content of src/App.jsx is modified. A new test is written. The new test checks that the newly given message is present. If yarn test is run on a freshly cleanedup app, the new test should pass.

The new content is:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders cleanup react app message', () => {
  const { getByText } = render(<App />);
  const cleanupMessage = getByText(/Cleanedup React App/i);
  expect(cleanupMessage).toBeInTheDocument();
});

The icons paths in public/manifest.json do not exist after cleanup because the icons have been removed. To avoid console errors the src values of the icon objects are set to empty strings.

The new content is:

{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
  {
    "src": "",
    "sizes": "64x64 32x32 24x24 16x16",
    "type": "image/x-icon"
  },
  {
    "src": "",
    "type": "image/png",
    "sizes": "192x192"
  },
  {
    "src": "",
    "type": "image/png",
    "sizes": "512x512"
  }
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}