├── .gitignore ├── .husky └── pre-commit ├── LICENSE ├── Procfile ├── Readme.md ├── client ├── .eslintrc.json ├── .example.env ├── .gitignore ├── .prettierrc ├── README.md ├── config │ ├── env.js │ ├── getHttpsConfig.js │ ├── jest │ │ ├── babelTransform.js │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── modules.js │ ├── paths.js │ ├── pnpTs.js │ ├── webpack.config.js │ └── webpackDevServer.config.js ├── package-lock.json ├── package.json ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt ├── scripts │ ├── build.js │ ├── start.js │ └── test.js └── src │ ├── App.css │ ├── App.jsx │ ├── assets │ ├── Illustrations │ │ └── home.png │ ├── loader.svg │ ├── logo.png │ ├── logoDarkTransparentHorizhontal.png │ └── logoTransparent.png │ ├── components │ ├── HomeView │ │ ├── components.js │ │ └── index.jsx │ ├── MeetChat │ │ ├── components.js │ │ └── index.jsx │ ├── MeetContainer │ │ └── index.jsx │ ├── MeetInfo │ │ ├── components.js │ │ ├── index.jsx │ │ └── infoView.jsx │ ├── MeetSettingsBar │ │ └── index.jsx │ ├── MessageView │ │ ├── components.js │ │ └── index.jsx │ ├── Participant │ │ ├── components.js │ │ └── index.jsx │ ├── ParticipantShrinked │ │ └── index.jsx │ ├── ParticipantsList │ │ ├── components.js │ │ └── index.jsx │ ├── SharedScreen │ │ └── index.jsx │ └── Whiteboard │ │ └── index.jsx │ ├── context │ ├── meetingContext.js │ ├── messagingContext.js │ ├── socketContext.js │ └── userContext.js │ ├── firebase │ └── index.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── routes │ ├── home │ │ ├── components.js │ │ ├── index.jsx │ │ └── styles.scss │ ├── loading │ │ └── index.jsx │ ├── login │ │ ├── components.js │ │ └── index.jsx │ └── meet │ │ └── index.jsx │ └── utils │ ├── firebaseUtils.js │ ├── index.js │ └── twilioUtils.js ├── package-lock.json ├── package.json └── server ├── .eslintrc.json ├── .example.env ├── .gitignore ├── .prettierrc ├── index.js ├── package-lock.json ├── package.json └── src ├── config.js ├── socket.js ├── twilio.js └── util.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | .env.production 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | out 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | # Comment in the public line in if your project uses Gatsby and not Next.js 92 | # https://nextjs.org/blog/next-9-1#public-directory-support 93 | # public 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # FuseBox cache 102 | .fusebox/ 103 | 104 | # DynamoDB Local files 105 | .dynamodb/ 106 | 107 | # TernJS port file 108 | .tern-port 109 | 110 | # Stores VSCode versions used for testing VSCode extensions 111 | .vscode-test 112 | 113 | # yarn v2 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .yarn/install-state.gz 118 | .pnp.* 119 | 120 | #admin credentials 121 | adminSDK.json -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run lint && git add . 5 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm run server-prod -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | ![EasyCall](https://socialify.git.ci/apoorvdwi/EasyCall/image?description=1&descriptionEditable=Meet%2C%20chat%2C%20call%20and%20collaborate%20in%20just%20one%20place.&language=1&name=1&owner=1&theme=Light) 2 | 3 |

4 | 5 | 6 | 7 |

8 | 9 | ## 💥 Introduction 10 | 11 | EasyCall is a web app for meetings, chats and collaborate at one place. It is built using React for frontend, Express , Sockets server and Twilio for handling APIs and communication, and Firestore for database. 12 | 13 | The meetings have an inbuilt support for a full fledged excalidraw whiteboard for collaboration. 14 | 15 | ## 💡 Why did I build this? 16 | 17 | In the ongoing pandemic, the need for software that allows communication and collaboration in form of screen sharing or live whiteboard has become a necessity. Since the problem was quite widespread and technologically interesting so I decided to make this project. 18 | 19 | ## 🛠️ Local development 20 | 21 | That's pretty easy. To ensure that you are able to install everything properly, we would recommend you to have Git, NPM and Node.js installed. 22 | 23 | We will first start with setting up the Local Project Environment: 24 | 25 | ```sh 26 | git clone https://github.com/apoorvdwi/EasyCall.git 27 | cd EasyCall 28 | npm run dev:install 29 | ``` 30 | Now we will add the environment variables in the client/ and server/ 31 | 32 | - Create a .env file in both client and server folder according to .example.env given in both the folders respectively. 33 | 34 | - For creating and adding GOOGLE_CONFIG_BASE64 in server, checkout this [link](https://newbedev.com/deploying-firebase-app-with-service-account-to-heroku-environment-variables-with-dotenv) 35 | 36 | Once you run the Commands and get environment variables and everything fine, we are all set to run the app ✔️ 37 | 38 | On the root level run the following command: 39 | 40 | ```sh 41 | npm run dev 42 | ``` 43 | 44 | To lint the code files, run the following command on root level: 45 | 46 | ```sh 47 | npm run lint 48 | ``` 49 | 50 | ## 🥁 Features 51 | 52 | - EasyCall provides social login through Google and Github. 53 | - User can create and join meetings. 54 | - The project is easily scalable to 10 participants but for now the participant limit has been capped at 2 to prevent misuse and keep api costs in limit. 55 | - Within the meeting, there are several functionalities provided like screen sharing, chat window for participants and whiteboard. 56 | - The whiteboard is powered by excalidraw, which provides a lot of functionalities for collaboration. 57 | 58 | ## 📜 LICENSE 59 | 60 | [AGPL 3.0 License](https://github.com/apoorvdwi/EasyCall/blob/main/LICENSE) -------------------------------------------------------------------------------- /client/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "prettier", 8 | "plugin:react/recommended", 9 | "airbnb" 10 | ], 11 | "parser": "@typescript-eslint/parser", 12 | "parserOptions": { 13 | "ecmaFeatures": { 14 | "jsx": true 15 | }, 16 | "ecmaVersion": 12, 17 | "sourceType": "module" 18 | }, 19 | "plugins": ["prettier", "react", "@typescript-eslint"], 20 | "rules": { 21 | "no-unused-vars": "off", 22 | "no-param-reassign":"off", 23 | "import/order": "off", 24 | "no-confusing-arrow": "off", 25 | "no-nested-ternary": "off", 26 | "react/jsx-wrap-multilines": "off", 27 | "jsx-a11y/no-static-element-interactions": "off", 28 | "react/jsx-one-expression-per-line": "off", 29 | "import/prefer-default-export": "off", 30 | "react/no-unescaped-entities": "off", 31 | "max-len": "off", 32 | "object-shorthand": "off", 33 | "react/no-danger": "off", 34 | "no-use-before-define": "off", 35 | "jsx-a11y/no-noninteractive-element-interactions": "off", 36 | "jsx-a11y/click-events-have-key-events": "off", 37 | "react/button-has-type": "off", 38 | "no-shadow": "off", 39 | "no-console": "off", 40 | "no-alert": "off", 41 | "import/no-dynamic-require": "off", 42 | "global-require": "off", 43 | "react/no-array-index-key": "off", 44 | "prefer-destructuring": "off", 45 | "react/jsx-props-no-spreading": "off", 46 | "react/jsx-filename-extension": "off", 47 | "prefer-template": "off", 48 | "arrow-body-style": "off", 49 | "no-await-in-loop":"off", 50 | "no-constant-condition":"off", 51 | "no-unneeded-ternary": "off", 52 | "object-curly-newline": "off", 53 | "operator-linebreak": "off", 54 | "implicit-arrow-linebreak": "off", 55 | "function-paren-newline":"off", 56 | "jsx-a11y/anchor-has-content": "off", 57 | "jsx-a11y/control-has-associated-label": "off", 58 | "jsx-a11y/label-has-associated-control": "off", 59 | "react/prop-types": "off", 60 | "jsx-a11y/interactive-supports-focus": "off", 61 | "react/destructuring-assignment": 0, 62 | "consistent-return": "off" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /client/.example.env: -------------------------------------------------------------------------------- 1 | REACT_APP_SERVER_BASE_URL=http://localhost:5000 -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | .env.production 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | out 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | # Comment in the public line in if your project uses Gatsby and not Next.js 92 | # https://nextjs.org/blog/next-9-1#public-directory-support 93 | # public 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # FuseBox cache 102 | .fusebox/ 103 | 104 | # DynamoDB Local files 105 | .dynamodb/ 106 | 107 | # TernJS port file 108 | .tern-port 109 | 110 | # Stores VSCode versions used for testing VSCode extensions 111 | .vscode-test 112 | 113 | # yarn v2 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .yarn/install-state.gz 118 | .pnp.* -------------------------------------------------------------------------------- /client/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "singleQuote": true, 4 | "useTabs": false, 5 | "arrowParens": "always", 6 | "tabWidth": 2, 7 | "parser": "typescript", 8 | "trailingComma": "all" 9 | } 10 | -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /client/config/env.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const paths = require('./paths'); 4 | 5 | // Make sure that including paths.js after env.js will read .env variables. 6 | delete require.cache[require.resolve('./paths')]; 7 | 8 | const NODE_ENV = process.env.NODE_ENV; 9 | if (!NODE_ENV) { 10 | throw new Error( 11 | 'The NODE_ENV environment variable is required but was not specified.', 12 | ); 13 | } 14 | 15 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use 16 | const dotenvFiles = [ 17 | `${paths.dotenv}.${NODE_ENV}.local`, 18 | // Don't include `.env.local` for `test` environment 19 | // since normally you expect tests to produce the same 20 | // results for everyone 21 | NODE_ENV !== 'test' && `${paths.dotenv}.local`, 22 | `${paths.dotenv}.${NODE_ENV}`, 23 | paths.dotenv, 24 | ].filter(Boolean); 25 | 26 | // Load environment variables from .env* files. Suppress warnings using silent 27 | // if this file is missing. dotenv will never modify any environment variables 28 | // that have already been set. Variable expansion is supported in .env files. 29 | // https://github.com/motdotla/dotenv 30 | // https://github.com/motdotla/dotenv-expand 31 | dotenvFiles.forEach((dotenvFile) => { 32 | if (fs.existsSync(dotenvFile)) { 33 | require('dotenv-expand')( 34 | require('dotenv').config({ 35 | path: dotenvFile, 36 | }), 37 | ); 38 | } 39 | }); 40 | 41 | // We support resolving modules according to `NODE_PATH`. 42 | // This lets you use absolute paths in imports inside large monorepos: 43 | // https://github.com/facebook/create-react-app/issues/253. 44 | // It works similar to `NODE_PATH` in Node itself: 45 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 46 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 47 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims. 48 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421 49 | // We also resolve them to make sure all tools using them work consistently. 50 | const appDirectory = fs.realpathSync(process.cwd()); 51 | process.env.NODE_PATH = (process.env.NODE_PATH || '') 52 | .split(path.delimiter) 53 | .filter((folder) => folder && !path.isAbsolute(folder)) 54 | .map((folder) => path.resolve(appDirectory, folder)) 55 | .join(path.delimiter); 56 | 57 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 58 | // injected into the application via DefinePlugin in webpack configuration. 59 | const REACT_APP = /^REACT_APP_/i; 60 | 61 | function getClientEnvironment(publicUrl) { 62 | const raw = Object.keys(process.env) 63 | .filter((key) => REACT_APP.test(key)) 64 | .reduce( 65 | (env, key) => { 66 | env[key] = process.env[key]; 67 | return env; 68 | }, 69 | { 70 | // Useful for determining whether we’re running in production mode. 71 | // Most importantly, it switches React into the correct mode. 72 | NODE_ENV: process.env.NODE_ENV || 'development', 73 | // Useful for resolving the correct path to static assets in `public`. 74 | // For example, . 75 | // This should only be used as an escape hatch. Normally you would put 76 | // images into the `src` and `import` them in code to get their paths. 77 | PUBLIC_URL: publicUrl, 78 | // We support configuring the sockjs pathname during development. 79 | // These settings let a developer run multiple simultaneous projects. 80 | // They are used as the connection `hostname`, `pathname` and `port` 81 | // in webpackHotDevClient. They are used as the `sockHost`, `sockPath` 82 | // and `sockPort` options in webpack-dev-server. 83 | WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST, 84 | WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH, 85 | WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT, 86 | // Whether or not react-refresh is enabled. 87 | // react-refresh is not 100% stable at this time, 88 | // which is why it's disabled by default. 89 | // It is defined here so it is available in the webpackHotDevClient. 90 | FAST_REFRESH: process.env.FAST_REFRESH !== 'false', 91 | }, 92 | ); 93 | // Stringify all values so we can feed into webpack DefinePlugin 94 | const stringified = { 95 | 'process.env': Object.keys(raw).reduce((env, key) => { 96 | env[key] = JSON.stringify(raw[key]); 97 | return env; 98 | }, {}), 99 | }; 100 | 101 | return { raw, stringified }; 102 | } 103 | 104 | module.exports = getClientEnvironment; 105 | -------------------------------------------------------------------------------- /client/config/getHttpsConfig.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const crypto = require('crypto'); 4 | const chalk = require('react-dev-utils/chalk'); 5 | const paths = require('./paths'); 6 | 7 | // Ensure the certificate and key provided are valid and if not 8 | // throw an easy to debug error 9 | function validateKeyAndCerts({ cert, key, keyFile, crtFile }) { 10 | let encrypted; 11 | try { 12 | // publicEncrypt will throw an error with an invalid cert 13 | encrypted = crypto.publicEncrypt(cert, Buffer.from('test')); 14 | } catch (err) { 15 | throw new Error( 16 | `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`, 17 | ); 18 | } 19 | 20 | try { 21 | // privateDecrypt will throw an error with an invalid key 22 | crypto.privateDecrypt(key, encrypted); 23 | } catch (err) { 24 | throw new Error( 25 | `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${ 26 | err.message 27 | }`, 28 | ); 29 | } 30 | } 31 | 32 | // Read file and throw an error if it doesn't exist 33 | function readEnvFile(file, type) { 34 | if (!fs.existsSync(file)) { 35 | throw new Error( 36 | `You specified ${chalk.cyan( 37 | type, 38 | )} in your env, but the file "${chalk.yellow(file)}" can't be found.`, 39 | ); 40 | } 41 | return fs.readFileSync(file); 42 | } 43 | 44 | // Get the https config 45 | // Return cert files if provided in env, otherwise just true or false 46 | function getHttpsConfig() { 47 | const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env; 48 | const isHttps = HTTPS === 'true'; 49 | 50 | if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) { 51 | const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE); 52 | const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE); 53 | const config = { 54 | cert: readEnvFile(crtFile, 'SSL_CRT_FILE'), 55 | key: readEnvFile(keyFile, 'SSL_KEY_FILE'), 56 | }; 57 | 58 | validateKeyAndCerts({ ...config, keyFile, crtFile }); 59 | return config; 60 | } 61 | return isHttps; 62 | } 63 | 64 | module.exports = getHttpsConfig; 65 | -------------------------------------------------------------------------------- /client/config/jest/babelTransform.js: -------------------------------------------------------------------------------- 1 | const babelJest = require('babel-jest'); 2 | 3 | const hasJsxRuntime = (() => { 4 | if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { 5 | return false; 6 | } 7 | 8 | try { 9 | require.resolve('react/jsx-runtime'); 10 | return true; 11 | } catch (e) { 12 | return false; 13 | } 14 | })(); 15 | 16 | module.exports = babelJest.createTransformer({ 17 | presets: [ 18 | [ 19 | require.resolve('babel-preset-react-app'), 20 | { 21 | runtime: hasJsxRuntime ? 'automatic' : 'classic', 22 | }, 23 | ], 24 | ], 25 | babelrc: false, 26 | configFile: false, 27 | }); 28 | -------------------------------------------------------------------------------- /client/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | // This is a custom Jest transformer turning style imports into empty objects. 2 | // http://facebook.github.io/jest/docs/en/webpack.html 3 | 4 | module.exports = { 5 | process() { 6 | return 'module.exports = {};'; 7 | }, 8 | getCacheKey() { 9 | // The output is always the same. 10 | return 'cssTransform'; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /client/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const camelcase = require('camelcase'); 3 | 4 | // This is a custom Jest transformer turning file imports into filenames. 5 | // http://facebook.github.io/jest/docs/en/webpack.html 6 | 7 | module.exports = { 8 | process(src, filename) { 9 | const assetFilename = JSON.stringify(path.basename(filename)); 10 | 11 | if (filename.match(/\.svg$/)) { 12 | // Based on how SVGR generates a component name: 13 | // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 14 | const pascalCaseFilename = camelcase(path.parse(filename).name, { 15 | pascalCase: true, 16 | }); 17 | const componentName = `Svg${pascalCaseFilename}`; 18 | return `const React = require('react'); 19 | module.exports = { 20 | __esModule: true, 21 | default: ${assetFilename}, 22 | ReactComponent: React.forwardRef(function ${componentName}(props, ref) { 23 | return { 24 | $$typeof: Symbol.for('react.element'), 25 | type: 'svg', 26 | ref: ref, 27 | key: null, 28 | props: Object.assign({}, props, { 29 | children: ${assetFilename} 30 | }) 31 | }; 32 | }), 33 | };`; 34 | } 35 | 36 | return `module.exports = ${assetFilename};`; 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /client/config/modules.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const chalk = require('react-dev-utils/chalk'); 4 | const resolve = require('resolve'); 5 | const paths = require('./paths'); 6 | 7 | /** 8 | * Get additional module paths based on the baseUrl of a compilerOptions object. 9 | * 10 | * @param {Object} options 11 | */ 12 | function getAdditionalModulePaths(options = {}) { 13 | const baseUrl = options.baseUrl; 14 | 15 | if (!baseUrl) { 16 | return ''; 17 | } 18 | 19 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl); 20 | 21 | // We don't need to do anything if `baseUrl` is set to `node_modules`. This is 22 | // the default behavior. 23 | if (path.relative(paths.appNodeModules, baseUrlResolved) === '') { 24 | return null; 25 | } 26 | 27 | // Allow the user set the `baseUrl` to `appSrc`. 28 | if (path.relative(paths.appSrc, baseUrlResolved) === '') { 29 | return [paths.appSrc]; 30 | } 31 | 32 | // If the path is equal to the root directory we ignore it here. 33 | // We don't want to allow importing from the root directly as source files are 34 | // not transpiled outside of `src`. We do allow importing them with the 35 | // absolute path (e.g. `src/Components/Button.js`) but we set that up with 36 | // an alias. 37 | if (path.relative(paths.appPath, baseUrlResolved) === '') { 38 | return null; 39 | } 40 | 41 | // Otherwise, throw an error. 42 | throw new Error( 43 | chalk.red.bold( 44 | "Your project's `baseUrl` can only be set to `src` or `node_modules`." 45 | + ' Create React App does not support other values at this time.', 46 | ), 47 | ); 48 | } 49 | 50 | /** 51 | * Get webpack aliases based on the baseUrl of a compilerOptions object. 52 | * 53 | * @param {*} options 54 | */ 55 | function getWebpackAliases(options = {}) { 56 | const baseUrl = options.baseUrl; 57 | 58 | if (!baseUrl) { 59 | return {}; 60 | } 61 | 62 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl); 63 | 64 | if (path.relative(paths.appPath, baseUrlResolved) === '') { 65 | return { 66 | src: paths.appSrc, 67 | }; 68 | } 69 | } 70 | 71 | /** 72 | * Get jest aliases based on the baseUrl of a compilerOptions object. 73 | * 74 | * @param {*} options 75 | */ 76 | function getJestAliases(options = {}) { 77 | const baseUrl = options.baseUrl; 78 | 79 | if (!baseUrl) { 80 | return {}; 81 | } 82 | 83 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl); 84 | 85 | if (path.relative(paths.appPath, baseUrlResolved) === '') { 86 | return { 87 | '^src/(.*)$': '/src/$1', 88 | }; 89 | } 90 | } 91 | 92 | function getModules() { 93 | // Check if TypeScript is setup 94 | const hasTsConfig = fs.existsSync(paths.appTsConfig); 95 | const hasJsConfig = fs.existsSync(paths.appJsConfig); 96 | 97 | if (hasTsConfig && hasJsConfig) { 98 | throw new Error( 99 | 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.', 100 | ); 101 | } 102 | 103 | let config; 104 | 105 | // If there's a tsconfig.json we assume it's a 106 | // TypeScript project and set up the config 107 | // based on tsconfig.json 108 | if (hasTsConfig) { 109 | const ts = require(resolve.sync('typescript', { 110 | basedir: paths.appNodeModules, 111 | })); 112 | config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; 113 | // Otherwise we'll check if there is jsconfig.json 114 | // for non TS projects. 115 | } else if (hasJsConfig) { 116 | config = require(paths.appJsConfig); 117 | } 118 | 119 | config = config || {}; 120 | const options = config.compilerOptions || {}; 121 | 122 | const additionalModulePaths = getAdditionalModulePaths(options); 123 | 124 | return { 125 | additionalModulePaths: additionalModulePaths, 126 | webpackAliases: getWebpackAliases(options), 127 | jestAliases: getJestAliases(options), 128 | hasTsConfig, 129 | }; 130 | } 131 | 132 | module.exports = getModules(); 133 | -------------------------------------------------------------------------------- /client/config/paths.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); 4 | 5 | // Make sure any symlinks in the project folder are resolved: 6 | // https://github.com/facebook/create-react-app/issues/637 7 | const appDirectory = fs.realpathSync(process.cwd()); 8 | const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath); 9 | 10 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 11 | // "public path" at which the app is served. 12 | // webpack needs to know it to put the right