This repository is a stack I created for a mobile application running through Apache Cordova. The stack consists of Vue.js for the front-end view management and general logic, the TypeScript programming language for front-end controllers and back-end processing, OnsenUI for the user interface styling as well as webpack for the build and bundling system.
Though the backend management of the application is done entirely through TypeScript, the front-end Vue.js components have the option of using either JavaScript or TypeScript. Both have separate linters and are transpiled through Babel.
The project comes with completely documented code, a project structure that I have iterated on multiple times during development to find the optimal solution as well as a rich ecosystem of linters and their configurations for rapid development.
Building has been tested with Android, iOS and Browser platforms. They are not included but instructions on how to add them can be found below.
Since this is a Cordova project you will need to install it from npm.
$ npm install -g cordova
At this point you might want to add the projects you intend to build for later on. I recommend checking the config.xml file beforehand and editing any information relevant to your project. After that you can use Cordova to add your desired platforms.
$ cordova platform add (ios|android|browser)
Once that is complete you will want to install all dependencies by running the following command in the root project directory. This will read the package.json file and install the required versions of each module.
$ npm install
Additionally you might want to install Webpack, TypeScript, Vue.js, stylelint, ESLint and TSLint for use on the command line from outside the project.
$ npm install -g webpack-cli vue-cli typescript stylelint eslint tslint
If you don't intend to use these otherwise you can continue without globally installing these dependencies since they are bundled in the development ones.
Before running anything make sure that your you have the prerequisites for building the platforms. To do so, run the following command and follow the instructions provided.
$ cordova requirements
The basic gist of the main requirements is described in the following sections.
For Android build, emulation and deployment; make sure that you have Java Development Kit and the Android SDK installed. Additionally Gradle is required which if not shipped with the previous two requirements needs to be installed separately.
Further actions can be done on any operating system.
For Android build, emulation and deployment; ensure that you have XCode installed and updated to the latest version that complies with the current Cordova version.
Any actions relating to this platform must be done on an Apple macOS system.
To prepare the current project for deployment to further devices run the following command. This will also create all the files for the www directory from which Cordova will create actual builds.
$ npm run build
By design this command is not triggered through Cordova's build command to avoid rebuilding every time a new platform is targeted. Instead, all files are prepared once and then Cordova can take over the rest.
The system comes with a live reload option which you can use to incrementally see changes made to your code-base live in a browser of your choice. This is useful when debugging or designing the application. To enable this feature run the live command.
$ npm run live
You can then open up your browser and navigate to localhost:8080.
In case you want to use the build in a custom setup with the development config you can differentiate between the build types with the following commands.
$ npm run (build:dev|build:prod)
By default the build command runs the production config. The development build does not process the code for production and furthermore keeps linter and development messages in place.
Once all requirements have been met from the previous sections, plug in your devices and run the following command for either platforms.
$ cordova run [ios|android]
You can also emulate the platform instead using the following command.
$ cordova emulate [ios|android]
Both commands should run the build command beforehand and as such bundle up all your assets ready for deploying.
If you run into issues and have missing dependencies: Make sure to follow the instructions in the Setup & Requirements section.
This repository is released under the MIT license. For more information please refer to LICENSE.