This app is based on a PhoneGap Framework7 Vue template. The PhoneGap Framework7 Vue templates provide a boilerplate app to help developers get started building mobile apps quickly. There are currently three template layouts to choose from:
The templates each have a similar project structure, based off the vue-pwa-webpack template and are configured with Cordova/PhoneGap, Vue.js, Framework7, Webpack, Babel, ESLint and Hot Reloading as well as Progressive Web App support. They also have unit tests and CSS extraction built-in.
The Adobe Stockpile App uses the Split Panel template and you will learn how to specifically use it to get started in lesson 1.
Before moving on, below is a quick overview of the project structure you should see. This will be similar for each of the PhoneGap templates, and is a combination of the vue-pwa-webpack template and a PhoneGap CLI created project.
A quick note about the contents of each asset is noted in the comments, but you can also refer to the Vue Webpack template project docs for specific details.
. ├── build/ # webpack config files │ └── ... ├── config/ │ ├── index.js # main project config │ └── ... ├── src/ │ ├── main.js # app entry file │ ├── routes.js # defines simple routing between paths and components │ ├── App.vue # main app component │ ├── components/ # ui components │ │ └── ... │ └── assets/ # module assets (processed by webpack) │ └── ... ├── static/ # pure static assets (directly copied) ├── test/ │ └── unit/ # unit tests │ │ ├── specs/ # test spec files │ │ ├── index.js # test build entry file │ │ └── karma.conf.js # test runner config file │ └── e2e/ # e2e tests │ │ ├── specs/ # test spec files │ │ ├── custom-assertions/ # custom assertions for e2e tests │ │ ├── runner.js # test runner script │ │ └── nightwatch.conf.js # test runner config file ├── .babelrc # babel config ├── .postcssrc.js # postcss config ├── .eslintrc.js # eslint config ├── .editorconfig # editor config ├── config.xml # PHONEGAP config file ├── hooks # PHONEGAP hooks folder ├── platforms # PHONEGAP platforms folder ├── plugins # PHONEGAP plugins folder ├── www # PHONEGAP default project folder (build output goes here) └── package.json # build scripts and dependencies
When the project is initially created, the
www folder will include a sample PhoneGap Hello World application by default. Once you run the build commands however, the
www will get overwritten each time. Once built, the
www/index.html file specifically represents the final template
index.html for the single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this index.html template to render the final HTML. DO NOT MODIFY the contents of the
www folder or
www/index.html file. All of your updates will be done in the
src folder instead.
The main entry point to the app. Contains the overall dependency imports, platform detection code and globals for the app as well as the Vue initialization code.
Contains the meta tags for things like Content Security Policy, Progressive Web App elements (meta tags for cross browser PWA support, manifest.json and service-worker.js references and
<noscript>...</noscript> block etc), the
cordova.js include and the main
app div where the app is finally rendered.
Defines the overall app UI structure, platform detection code,
backButton handler and
About this Guide
The Split Panel template provides a good app structure to get started with since it already includes a navigation bar, some basic views, a side menu and page routing wired up. Since the Stockpile app needs this as well, it's easier to re-use existing pages and content where possible. For each of the views you may notice a similar high-level pattern of changes that need to occur:
- Update the view routing
- Update the UI for the view