6 |
7 |
8 |
4 |
5 |
6 |
7 |
8 |
11 | A Simple ReactJS Boilerplate :)
12 |
13 | Explore the docs »
14 |
15 |
16 | View Repo
17 | ·
18 | Report Bug
19 | ·
20 | Request Feature
21 |
107 |
108 | ## License
109 | [MIT License](https://andreasonny.mit-license.org/2019) © Suvin Nimnaka
110 |
111 | ## Contact
112 |
113 | Suvin Nimnaka - [@tikirimaarie](https://twitter.com/tikirimaarie) - hello@suvin.me
114 | Project Link: [https://github.com/Suvink/let-me-react](https://github.com/Suvink/let-me-react)
115 |
116 |
--------------------------------------------------------------------------------
/bin/generate-project.js:
--------------------------------------------------------------------------------
1 | #! /usr/bin/env node
2 |
3 | "use strict";
4 |
5 | const path = require("path");
6 | const util = require("util");
7 | const packageJson = require("../package.json");
8 | const chalkAnimation = require("chalk-animation");
9 | const fs = require("fs");
10 | var figlet = require("figlet");
11 | const exec = util.promisify(require("child_process").exec);
12 | let newPackage = {};
13 |
14 | async function runCmd(command) {
15 | try {
16 | const { stdout, stderr } = await exec(command);
17 | console.log(stdout);
18 | console.log(stderr);
19 | } catch {
20 | (error) => {
21 | console.log("\x1b[31m", error, "\x1b[0m");
22 | };
23 | }
24 | }
25 |
26 | if (process.argv.length < 3) {
27 | console.log("\x1b[31m", "You have to provide name to your app.");
28 | console.log("For example:");
29 | console.log(" npx let-me-react my-app", "\x1b[0m");
30 | process.exit(1);
31 | }
32 |
33 | const ownPath = process.cwd();
34 | const folderName = process.argv[2];
35 | const appPath = path.join(ownPath, folderName);
36 | const repo = "https://github.com/Suvink/let-me-react.git";
37 |
38 | try {
39 | fs.mkdirSync(appPath);
40 | } catch (err) {
41 | if (err.code === "EEXIST") {
42 | console.log(
43 | "\x1b[31m",
44 | `The file ${appName} already exist in the current directory, please give it another name.`,
45 | "\x1b[0m"
46 | );
47 | } else {
48 | console.log(err);
49 | }
50 | process.exit(1);
51 | }
52 |
53 | async function setup() {
54 | try {
55 | const rainbow = chalkAnimation.karaoke(
56 | "⬇️ Downloading the project structure... So පොඩ්ඩක් ඉඳපන්! "
57 | );
58 | rainbow.start();
59 | await runCmd(`git clone --depth 1 ${repo} ${folderName}`);
60 | rainbow.stop();
61 | process.chdir(appPath);
62 |
63 | fs.unlinkSync(path.join(appPath, "LICENSE"));
64 | fs.unlinkSync(path.join(appPath, "README.md"));
65 | fs.rmSync(path.join(appPath, "bin"), { recursive: true });
66 | fs.unlinkSync(path.join(appPath, "package.json"));
67 | fs.unlinkSync(path.join(appPath, "yarn.lock"));
68 | fs.unlinkSync(path.join(appPath, "CHANGELOG.md"));
69 |
70 | console.log("\x1b[36m", "⌛ Creating a new package...", "\x1b[0m");
71 | await buildPackageJson(packageJson, folderName);
72 |
73 | const karoke = chalkAnimation.karaoke("⌛ Installing dependencies...");
74 | karoke.start();
75 | await runCmd("yarn install");
76 | karoke.stop();
77 | console.log();
78 |
79 | await runCmd("npx rimraf ./.git");
80 |
81 | figlet("READY!", function (err, data) {
82 | if (err) {
83 | return;
84 | }
85 | console.log(data);
86 | });
87 | console.log(
88 | "\x1b[32m",
89 | "✅ The installation is done, You may React Now! That means ගිහින් වැඩ කරපන්!",
90 | "\x1b[0m"
91 | );
92 | console.log();
93 |
94 | console.log("\x1b[33m", "You can start by typing:");
95 | console.log(` cd ${folderName}`);
96 | console.log(" npm start", "\x1b[33m");
97 | console.log();
98 | console.log("Check README.md for more information");
99 | console.log();
100 | } catch (error) {
101 | console.log(error);
102 | }
103 | }
104 |
105 | setup();
106 |
107 | async function buildPackageJson(packageJson, folderName) {
108 | newPackage = {
109 | name: folderName,
110 | version: "1.0.0",
111 | description: "A sample ReactJS App Created with Let-Me-React",
112 | author: "",
113 | license: "ISC",
114 | scripts: {
115 | start: "react-scripts start",
116 | build: "react-scripts build",
117 | test: "react-scripts test",
118 | eject: "react-scripts eject",
119 | },
120 | dependencies: {
121 | "@emotion/react": "^11.9.0",
122 | "@emotion/styled": "^11.8.1",
123 | "@mui/material": "^5.7.0",
124 | "@testing-library/jest-dom": "^5.16.4",
125 | "@testing-library/react": "^13.2.0",
126 | "@testing-library/user-event": "^13.5.0",
127 | bulma: "^0.9.4",
128 | notistack: "^2.0.4",
129 | react: "^18.1.0",
130 | "react-dom": "^18.1.0",
131 | "react-router-dom": "^5.2.0",
132 | "react-scripts": "5.0.1",
133 | sweetalert2: "^11.4.13",
134 | "web-vitals": "^2.1.4",
135 | axios: "^0.27.2",
136 | },
137 | browserslist: {
138 | production: [">0.2%", "not dead", "not op_mini all"],
139 | development: [
140 | "last 1 chrome version",
141 | "last 1 firefox version",
142 | "last 1 safari version",
143 | ],
144 | },
145 | };
146 |
147 | fs.writeFileSync(
148 | `${process.cwd()}/package.json`,
149 | JSON.stringify(newPackage, null, 2),
150 | "utf8"
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "let-me-react",
3 | "version": "1.2.0",
4 | "description": "A simple ReactJS Boilerplate :)",
5 | "dependencies": {
6 | "@material-ui/core": "^4.12.1",
7 | "@testing-library/jest-dom": "^5.11.4",
8 | "@testing-library/react": "^11.1.0",
9 | "@testing-library/user-event": "^12.1.10",
10 | "axios": "^0.21.1",
11 | "bulma": "^0.9.2",
12 | "chalk-animation": "^1.6.0",
13 | "figlet": "^1.5.0",
14 | "notistack": "^1.0.9",
15 | "react": "^17.0.2",
16 | "react-dom": "^17.0.2",
17 | "react-router-dom": "^5.2.0",
18 | "react-scripts": "^5.0.1",
19 | "sweetalert2": "^11.0.18",
20 | "web-vitals": "^1.0.1"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "git+https://github.com/Suvink/let-me-react.git"
25 | },
26 | "keywords": [
27 | "Boilerplate",
28 | "React",
29 | "Javascript"
30 | ],
31 | "author": "Suvin Nimnaka",
32 | "license": "ISC",
33 | "bugs": {
34 | "url": "https://github.com/Suvink/let-me-react/issues"
35 | },
36 | "homepage": "https://github.com/Suvink/let-me-react#readme",
37 | "scripts": {
38 | "start": "react-scripts start",
39 | "build": "react-scripts build",
40 | "test": "react-scripts test",
41 | "eject": "react-scripts eject"
42 | },
43 | "eslintConfig": {
44 | "extends": [
45 | "react-app",
46 | "react-app/jest"
47 | ]
48 | },
49 | "browserslist": {
50 | "production": [
51 | ">0.2%",
52 | "not dead",
53 | "not op_mini all"
54 | ],
55 | "development": [
56 | "last 1 chrome version",
57 | "last 1 firefox version",
58 | "last 1 safari version"
59 | ]
60 | },
61 | "bin": {
62 | "let-me-react": "./bin/generate-project.js"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Suvink/let-me-react/32260d9de21af988c5042972b552224ab33dac74/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |