Front-End for the CSSI Platform
This repository contains the codebase for the CSSI front end. This project was bootstrapped with Create React App template.
The generated project have dependencies that require
nodetogether withnpm.
Make sure you have Node version >= 8.0 and (NPM >= 5 or Yarn )
# clone our repository
git clone https://github.com/project-cssi/cssi-fe.git
# change the directory
cd cssi-fe
# switch to development branch
git checkout develop
# install the dependencies with npm
npm install
# start the development server
npm start
Once the dev server is fired up, it'll automatically open up a new tab. If not, navigate to http://0.0.0.0:3000 or http://localhost:3000 manually in your browser. (Note: If a port is already taken you'll be given the option to open the app in a different port.)
- File Structure
- Getting Started
- Configuration
- Styling
- Testing
- Production
- Linting
- Built With
- Changelog
- Contributing
- Contributors
- License
cssi-fe/
├── docs/ * folder to house all the documents
├── node_modules/ * contains dependencies pulled from npm
├── public/ * the public folder which can be accessed with a URL
│ ├── favicon/ * contains all the favicons and device specific icons for the app
│ ├── index.html * this is the app template
│ └── manifest.json * contains metadata for the app
├── src/ * source folder
│ ├── aseets/ * folder containing all the static assets, meta and styles
│ ├── components/ * contains all the reusable components
│ ├── containers/ * contains the differenrt container types used in the app
│ ├── elements/ * houses the custom elemets such as buttons, inputs etc.
│ ├── forms/ * contains all the forms used in the application
│ ├── redux/ * redux folder
│ │ ├── actions/ * contains all the redux action scripts
│ │ ├── reduces/ * contains all the reducers
│ │ ├── store.js * redux store file
│ │ └── types.js * file containing all the redux action types
│ ├── routes/ * contains the routes of the app
│ ├── services/ * contains the service scripts for the app
│ ├── utils/ * folder to hold the utility function scripts
│ ├── variables/ * folder to house app variable scripts
│ ├── views/ * folder containing all the views of the application
│ ├── api.js * contains all the api endpoints for the application
│ ├── index.js * js entry-point for the application
│ └── registerServiceWorker.js * file which helps to serve assets from cache in production
├── .env.sample * sample of .env file
├── .eslintrc.js * ecmascript linting configuration file
├── .gitignore * contains files that are ignored from git
├── .gitlab-ci.yml * gitlab ci configuration file
├── .npmrc * npm config file to house project wide custom configs
├── .nvmrc * node version manager config file
├── .sass-lint.yml * sass lint config file
├── CHANGELOG.md * log of all notable changes made to the project
├── CONTRUBUTING.md * project contributing guidelines
├── LICENSE.md * licensing information
├── package.json * contains all the npm scripts for building, running, deploying etc. and contains all the dependencies
└── README.md * Readme file for the repository
What you need to run this app:
- The generated project have dependencies that require
nodetogether withnpm. - Ensure you're running the latest stable versions Node and NPM.
Make sure you have
NodeandNPMinstalled by running simple commands on the command line to see what version of each is installed.
- Node - Type
node -von the terminal. - NPM - Type
npm -von the terminal.
If you do not have them installed, click here and grab the latest stable version of node and npm will be automatically installed along with it. Or if you have brew already installed in your local machine, execute brew install node command to get node.
git clone https://github.com/project-cssi/cssi-fe.gitto clone the repositorycd cssi-feto change the directorygit checkout developto switch to development branchnpm installto install the dependencies with npm
After you have installed all dependencies you can now run the app. Run npm start to start a local server with webpack.
The dev server will be opened in a new tab and usually on http://localhost:3000 and the Access URLs will be displayed on the terminal.
Have a look in the .env.sample file for the structure of the .env file.
The stylesheets are inside the assets/sass folder and the cssi-dashboard.scss file inside the directory is the main stylesheet for the project.
If you want to add your own stylesheet, we recommend that you place it under the sass/partials folder and import it in the cssi-dashboard.scss file.
For example if you want to include the styles for a slider:
- Create a
_slider.scsspartial file in thesass/partialsdirectory. - In
cssi-dashboard.scssadd@import 'partials/slider.scss';
The app uses Jest and Enzyme frameworks for testing and you can run the test suite by executing the following command.
npm run testFollow the steps bellow to build a production ready version of the application.
Execute the following command to build the application with webpack in production mode.
npm run buildPlease read the RELEASES.md guideline to learn about the process for releasing the project.
If you want to deploy the application to a s3 bucket please execute the following command replacing bucket_name with the intended s3 bucket name.
The script for this command can be found in the scripts/deploy-s3.js. Feel free to change it if needed.
npm run deploy-s3 bucket_nameTo run the linting on the command line, execute the following command.
npm run lint
Please refer CHANGELOG.md to learn about the latest improvements, breaking changes and bug fixes.
Please read CONTRIBUTING.md for contributing guidelines and to learn about our code of conduct.
