Skip to content

Latest commit

 

History

History
104 lines (90 loc) · 5.85 KB

README-start.md

File metadata and controls

104 lines (90 loc) · 5.85 KB

crisiscleanup-web tour

  • build - Configuration files related to WebPack used to build project.
  • config - Configuration for each environment type - dev, prod, and test
  • dist - Generated by yarn run build. Contains production build package.
  • node_modules - Generated by yarn run install. Location of all NodeJS dependencies.
  • scss - Sass files that define global styles for entire application.
  • src - Primary location of all JavaScript app code
    • assets - Images
    • components - Vue components
    • containers - Vue components that wrap the entire application. Containers have one-to-many views.
    • defintions - JSON files that define domain-specific data structures for this app.
    • events - Vue components that act as event message queues for a pub/sub model. Allows for communication between and across Vue components.
    • router - Vue-router object and configuration. Maps URLs to Vue components / pages.
    • services - Code that handles authentication, internationalization translations, etc.
    • store - All Vuex-related code
    • views - Intermediate-wrapper Vue components that act as pages in the UI. Views have one-to-many Vue components.
    • _nav.js - List of navigation routes for left-aside.
    • App.vue - Entry-point for App - Root Vue component.
    • main.js - Entry-point for App - Instantiates the Root Vue Component (App.vue)
  • static - Static files such as images.
  • test - Test files - unit and e2e
  • .babelrc - Babel configuration file
  • .editorconfig - Helps developers define and maintain consistent coding styles between editors
  • .eslintignore - Marks files/directories for ESLint to ignore.
  • .eslintrc.js - Configuration file for ESLint.
  • .gitignore - Marks files/directories for Git to ignore.
  • .postcssrc.js - PostCSS configuration file
  • cloudbuild.yaml - Google Container Builder configuration. Defines how to build docker images.
  • default.conf - Nginx configuration file bundled in docker image.
  • Dockerfile - Instructions for building the docker image.
  • index.html - Entry-point HTML file
  • package.json - Defines dependencies and scripts used locally by NodeJS.
  • Procfile - Heroku configuration file.
  • server.js - Small express server for serving production assets inside a docker container.
  • yarn.lock - Yarn config file that defines NodeJS dependencies.

Sample Vue Call Chains

  • Home - Realtime Map: (/map) browser loads -> index.html ->
    • main.js -> App.vue -> looks up route in router/index.js and loads container:
      • containers/Main.vue loads the following component and view:
        • components/PublicHeader
        • views/RealtimeMap.vue loads the following component and views:
          • components/map/InnerRealtimeMap.vue loads:
            • components/map/RealtimeMap loads:
              • components/map/components/BannerCycler.vue
              • components/map/components/RealtimeMapFooter.vue loads:
                • components/map/components/StatOdometer.vue
              • components/map/components/MoreInfoButton.vue
          • views/home/Donation.vue
          • views/home/PoweredBy.vue
          • views/home/WhyCrisisCleanup.vue

Tools

Development Dependencies

  • Webpack - Front-end assets bundler. Takes JavaScript, HTML, CSS, Images, Fonts, etc. and bundles them together into a production-ready package.
  • babel, babel-* - JavaScript compiler to use next generation JavaScript in current browser versions.
  • sass - CSS extension language. Makes it easier to create complex CSS styles.
  • mocha - JavaScript test framework
  • chai - Test Assertion library
  • sinon - Test mocking library
  • nightwatch - Automated browser testing tool for end-to-end tests.
  • vue-test-utils - Official unit testing utility library for Vue
  • vuenit - Vue Unit Test helpers
  • karma, karma-* - Test runner
  • eslint - JavaScript linter
  • vue-cli - CLI tool for generating Vue projects

Production Dependencies

  • vue - Single-page web application framework
  • vuex - State management library
    • Central store for all components in the application
  • vue-router - Router for URLs. Maps URLs to Vue components.
  • axios - HTTP/AJAX client for the browser (Calls the backend API).
  • vue-loader - Webpack loader for Vue components. (Loaders map assets to Webpack modules to be bundled)
  • bootstrap-vue - Vue components for Bootstrap 4
  • vue-authenticate - Authentication library (login/logout)
  • vue-axios - Convenience wrapper library that integrates vue with axios.
  • chart-js - HTML 5 chart library
  • vue-chartjs - Wrapper library that integrates vue with chart.js
  • vue-i18n - Internationalization (i18n) library for translating languages.
  • vue-spinner - Spinner library for Vue
  • vue-tables-2 - Table and datagrid library for Vue
  • vue2-google-maps - Integrates the Google Maps API with Vue
  • jquery - JavaScript utility library
  • jsonwebtoken - Encodes and decodes JSON Web Tokens (JWTs)
  • jwt-decode - Library to decode JSON Web Tokens
  • v-autocomplete - Autocomplete Vue component
  • lodash - JavaScript utility library using functional programming paradigms

Node Scripts

  • yarn run dev - Build in development mode, deploy locally on dev HTTP server for local testing.
  • yarn run build - Build in production mode, generates assets in dist/
  • yarn run unit - Run unit tests
  • yarn run e2e - Run end-to-end tests with Nightwatch