- This repo holds the entire front end code base for Donnie's List.The code is written in React 16.
- This repo was bootstrapped with CRA(CREATE-REACT-APP) and has been ejected.
- For styling we are using normal sass with flex box
- Test cases are written in Jest and snapshot tests in Enzyme
- Requirements
- Installation
- Running the Project
- Project Structure
- Routing
- Development Tools
- Building for Production
- node
^14.17.2
- yarn
^1.22.5
or npm^6.14.13
After confirming that your environment meets the above requirements, you can start this project by following the steps mentioned below:-
$ git clone https://{username}@bitbucket.org/donnydey/donnies-list.git
$ cd donnies-list
When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install
will suffice.
$ yarn install # Install project dependencies (or `npm install`)
After completing the installation step, you're ready to start the project! When you are running this project for the first time, you need to follow these steps:-
Since the project relies on a lot of environment variables, one needs to create a copy of the properties_sample.env file inside config folder and save as properties.env
# For development environment
$ cp env/properties.sample.env env/properties.env # Make a properties.env file from properties.sample.env
Make changes in it according to the environment variables you need, we use dotenv which will read all environment variables from properties.env and set them on process.env
# For development environment
$ yarn start # Build the client bundles and start the webpack dev server (or `npm run start`)
While developing, you will probably rely mostly on yarn start
; however, there are additional scripts at your disposal:
yarn <script> |
Description |
---|---|
yarn start |
Starts the app at localhost:3000 by default |
yarn build |
Builds the app in production mode and serves files from build folder |
yarn lint-staged |
Runs prettier and eslint fixes |
yarn eslint:fix |
Runs all eslint fixes |
The project structure using CRA directory structure where folders are grouped into containers and components and since we are using redux, we do have actions, reducers, selectors, hocs, store and helpers. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. To understand what goes inside components and what inside containers, please check out this [component-state-vs-redux-store]
βββ build # All production ready files with minified JS, html and css files
βββ config # All CRA related config goes here including paths, environment variables and βjest config goes here
βββ public # Static public assets used while in dev mode
βββ scripts # All webpack related code
β βββ build.js # Script for making production bundle
β βββ start.js # Script for development mode
β βββ test.js # Script for test mode
βββ src # Client Application source code
β βββ helpers # All api helpers, utils, local storage, analytics and config helpers go inside this folder
β βββ components # Global Reusable Components
β β βββ ComponentName # Component Name Folder and every component will have a index.js and css file
β β β βββ index.js # Main file which exports the component
β β β βββ ComponentName.js # Main component code
β β β βββ ComponentName.css # Styling for the component
β βββ pages # Global Reusable Components
β β βββ PageName # Pages Folder and every page will have a index.js and css file
β β β βββ index.js # Main file which exports the page
β β β βββ PageName.js # Main page/container code
β β β βββ PageName.css # Styling for the page
β βββ assets # Any images, fonts and icons which need to be cache bursted go here
β βββ index.js # Application bootstrap and rendering
β βββ constants # Folder for constants file
β βββ Routes.js # All application client side routes using react-router
βββ env # All environment variables to be configured from here
β βββ properties.sample.env # Sample file for setting up environment vars
βββ .babelrc # Babel file for es6 and react code transpilation
βββ .gitignore # The name says it all
βββ .eslintrc.js # This file maintains all end points of the back end routes
βββ .prettierrc # Prettier config
βββ package.json # All npm dependencies can be found here
βββ README.md # Readme file for the whole app
βββ yarn.lock # Yarn lock file for locking the dependency versions
We use react-router
route definitions
See the project structure section for more information.
-
We use
prettier
for code formatting.Here is the link to downlod the same.Prettier -
Make sure you are using vscode and your vscode user_settings has the following code:-
{
"editor.fontSize": 12,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"prettier.eslintIntegration": true,
}
- Deployment will always happen from the
release
branch on production. - Any production related environment variables need to be configured on env/properties.env.Take a copy of sample and edit values for prod environment
- ci folder has a docker script to deploy all the code in a docker instance
- yarn build will built the production build