setup cra for coderoad

Author: ShMcK

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# ignore to avoid merge conflicts in CodeRoad
+package-lock.json
+yarn.lock

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "msjsdiag.debugger-for-chrome"]
+}

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      // run Chrome with the VSCode debugger
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true,
+    "source.fixAll": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}

README.md

@@ -1,4 +1,8 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# CodeRoad Tutorial React Starter
+
+This project is a working starter boilerplate for a React based CodeRoad tutorial.
+
+See [instructions for reverting back](#Revert-to-Create-React-App) to its original [Create React App](https://github.com/facebook/create-react-app) template.
 
 ## Available Scripts
 
@@ -27,16 +31,6 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
@@ -66,3 +60,35 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/de
 ### `yarn build` fails to minify
 
 This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+
+## Revert to Create-React-App
+
+This project is slightly modified from the original create-react-app config in order to integrate with CodeRoad's testing tools. See react-app-rewired for details on how these modifications are implemented: https://github.com/timarney/react-app-rewired.
+
+If you're done with your CodeRoad course, feel free to revert back. Just follow the instructions below:
+
+1. delete the following file: `config.overrides.js`
+2. Remove unused packages by running the following:
+
+```shell
+npm uninstall react-app-rewired jest-tap-reporter
+```
+
+3. Revert the scripts in package.json back to their original formats:
+
+```json
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+		"test": "react-scripts test"
+	},
+```
+
+4. Remove the following lines from your `.gitignore` file. These should be enabled when publishing or sharing your application.
+
+```ms
+package-lock.json
+yarn.lock
+```
+
+Happy hacking!

config-overrides.js

@@ -0,0 +1,31 @@
+/* 
+Config is overwritten for the CodeRoad integration
+because of the need to change the Jest reporter on tests.
+See the README for details on how to revert back.
+*/
+
+module.exports = {
+  webpack: config => {
+    return config;
+  },
+  devServer: config => {
+    return config;
+  },
+  jest: config => ({
+    ...config,
+    // stop running tests after `n` failures
+    bail: 1,
+    // use jest-tap-reporter with CodeRoad tests
+    reporters: ["jest-tap-reporter"],
+    // disable test coverage collection for performance
+    collectCoverage: false,
+    collectCoverageFrom: [],
+    // add a test setup file if need
+    setupFilesAfterEnv: ["./src/tests/setupTests.js"],
+    // unused fields with CodeRoad
+    watchPlugins: []
+  }),
+  paths(paths, env) {
+    return paths;
+  }
+};

package.json

@@ -1,23 +1,11 @@
 {
-  "name": "twitter-clone",
+  "name": "coderoad-react-tutorial-starter",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "build": "react-app-rewired build",
+    "start": "react-app-rewired start",
+    "test": "react-app-rewired test --watchAll=false"
   },
   "browserslist": {
     "production": [
@@ -30,5 +18,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^8.0.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0"
+  },
+  "devDependencies": {
+    "jest-tap-reporter": "^1.9.0",
+    "react-app-rewired": "^2.1.5"
   }
 }

src/App.js

@@ -1,26 +1,7 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App = () => {
+  return <div>Welcome to CodeRoad</div>;
+};
 
 export default App;