The website for the China Power Southbound Report It is built using Create React App Rewired and React Snapshot
Data is connected to a Google Sheet workbook in the China Power Google Drive folder. Triggering a new deploy runs the Google API via write.js and updates data in src/app/charts.json. To update the live site with edits from the Google Sheet, log into netlify and trigger a new deploy. The build script will first run node write.js which uses the Google API to fetch data from sheets in the workbook and creates a json array with objects describing each chart. Then it will run react-app-rewired build including (via import) this updated json in the compiled code.
$ git clone https://github.com/CSIS-iLab/southbound.git
$ cd southbound
$ npm installYou will need to create a charts.json file, which uses Google Sheets API to pull in, and structure data. Create an .env file and fill in the Google API Key. See ``.env.example` The API Key is available in Slack
$ node write.js
$ npm startThis will give you file watching, browser synchronization, auto-rebuild, CSS injecting, etc.
$ npm start$ npm run buildYou can serve the build folder locally
$ npm install -g serve
$ serve -s build- Create React App includes:
- webpack
- service worker
- hot reloading
- es6 features
- async/await
- spread operators
- imports
- and more
- React Snapshot is a zero-configureation pre-renderer that creates static html. This is better SEO for crawlers like Google and Web Archive.
- Polyfills for older browsers used by our global audience:
- @babel/polyfill
- react-app-polyfill
- Create React App Rewired's config-overrides.js allows the use of other style utilities in order to conform with other CSIS projects:
- To parse markdown
Contains styles, images, and fonts
The content folder contains markdown files that can be used to set up a routes in App.js, or for use throughout the site. Markdown can be parsed using the GetData.js helper. Files produced by forestry in markdown, yaml, json or other formats can go here.
Contains helper utility functions, React components, layouts, that render elements that may be repeated through out the site. Pages have state and lifecycle methods. App.js sets up data flow and routing.
Can contain lambda functions that will run provided an npm script and netlify.toml file
Contains the page template. Only files inside public can be used from public/index.html. learn more
Configuration files for the Forestry CMS can live here, including the front matter UI fields and settings for the different content types.
When modifying the code base, always make a new branch. Unless it's necessary to do otherwise, all branches should be created off of master.
Branches should use the following naming conventions:
| Branch type | Name | Example |
|---|---|---|
| New Feature | feature/<short description of feature> |
feature/header-navigation |
| Bug Fixes | bug/<short description of bug> |
bug/mobile-navigation |
| Documentation | docs/<short description of documentation being updated> |
docs/readme |
| Code clean-up/refactoring | refactor/<short description> |
refactor/apply-linting |
| Content Updates | content/<short description of content> |
content/add-new-posts |
When ready to merge, submit a Pull Request into master. All code will be reviewed by the lead developer on the project before being merged into master.
Write clear and concise commit messages describing the changes you are making and why. If there are any issues associated with the commit, include the issue # in the commit title.
- This project uses the BEM naming convention.
Copyright © 2018 CSIS iDeas Lab under the MIT License.