lsst-epo / antares-test

Investigation Starter

Dev envirnoment inspired by homegrown Webpack-React starter project.

Table of contents

Project structure

Installation

Deploying

Configuration

Development Dependencies

General Dependencies

Project structure

build/
src/
|- index.jsx _______________________________ # application entry
|- App.jsx _________________________________ # application init
|  |- components/___________________________ # react components
|  |- assets/
|    |- images/_____________________________ # see SiteHeader for image incorporation in .jsx file
|    |- static-data/_________________________# see Questions.jsx for HTTP Request for data example
|    |- stylesheets/
|       |- STACSS/ _________________________ # global Structure, Typography, and Appearance styles
|       |- components/ _____________________ # should generally correspond to React Compoents

Installation

1- Clone the repo: git clone https://github.com/lsst-epo/empty-investigation.git

2- Install npm packages: yarn

Development

1- Start dev server: yarn start (or yarn start-dash to run webpack-dev-server with webpack dashboard)

2- Unit testing will watch all your changes in the test files as well as create coverage folder: yarn test

3- Build and bundle assets for Production: yarn build

4- Build and bundle assets for Staging: yarn netflify-deploy

Deploying

Production:

Deploy to Production (Github Pages) via gh-pages module: yarn deploy

Staging:

Push changes to master, or create pull request to trigger a build/deploy to Continuous Deployment to Netlify

Configuration

Webpack
|- webpack.config.js _______________________ # merging common and environment specific configs
|- paths.js ________________________________ # Webpack paths needed
|- webpack.common.js _______________________ # common Webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config

BrowserList
|- .browserlistrc __________________________ # BrowserList config

Babel
|- babel.config.js _________________________ # Babel config

PostCSS
|- postcss.config.js _______________________ # PostCSS config

linting
|- .eslintrc _______________________________ # ESlint rules to apply
|- .eslintignore ___________________________ # what not to ESlint
|- .prettierrc _____________________________ # Prettier config (consumed by eslint)
|- .stylelintrc ____________________________ # Stylelint config

testing
|- setupTests.js ___________________________ # Enzyme config

IDE
|- .editorconfig ___________________________ # coding styles definitions

git
|- .gitignore ______________________________ # what not to track
|- .PULL_REQUEST_TEMPLATE.md _______________ # if you want to provide a PR template

Development Dependencies

• Webpack 4
• Babel 7 [ transforming JSX, ES6, ES7, and ES8 ]
• Jest [ Unit test]
• Enzyme for UI testing.
• Eslint with airbnb config
• Stylelint for linting SCSS/CSS
• Prettier [ JS formatter ]
• EditorConfig [ Code Style definitions ]
• STACSS [ SCSS architecture ]
• Style Loader & CSS Loader & SASS-loader & PostCSS with Autoprefixer
• Browserslist [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
• React hot loader
• Webpack dev server
• gh-pages [Gihub Pages deployment]

General Dependencies

• React 16.8
• prop-types 16.8
• React Router 5.0.1
• Reactn 2.1.4
• Axios 0.19.0
• Local Storage 2.0.0
• Lodash
• D3 5.9.2