Nitibo

A Nativescript-Vue Class Component Starter Template Using Module-Oriented Structure.

NOTE!!! This NativeScript Template is no longer supported or actively maintained. This is based on NS 6.0+ that is not compatible with NS 7.0+. You can still fork this and apply to your preferred NativeScript-Vue TypeScript project. Happy NativeScripting :)

Module-Oriented Structure

├── app
│   ├── App_Resources
│   ├── layout
│   │   ├── default.vue
│   │   └── index.ts
│   ├── modules
│   │   ├── auth
│   │   │   ├── repository
│   │   │   │   ├── auth.api.ts
│   │   │   │   ├── auth.types.ts
│   │   │   │   └── index.ts
│   │   │   └── store
│   │   │       ├── actions.ts
│   │   │       ├── getters.ts
│   │   │       ├── index.ts
│   │   │       ├── mutations.ts
│   │   │       └── state.ts
│   │   ├── chart
│   │   │   ├── routes
│   │   │   │   └── index.ts
│   │   │   ├── store
│   │   │   └── views
│   │   │       ├── chart.vue
│   │   │       └── index.ts
│   │   ├── home
│   │   └── social
│   ├── repository
│   ├── router
│   ├── store
│   ├── App.vue
│   ├── main.ts
│   ├── package.json
│   └── styles.scss
├── types
│   ├── env.d.ts
│   ├── nativescript-vue.d.ts
│   ├── vue-class.d.ts
│   └── vue-sfc.d.ts
├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.esm.json
├── tsconfig.json
└── webpack.config.js

The App/ Directory

The App/ namespace is equvalent to src/ in other Vue projects. The TSLINT reads files frim App/ and types with the following extension:

• *.ts
• *.tsx
• *.vue
• *.js

modules/

The approach is inspired by Domain-Driven Design (DDD), to focus the structure on every feature (per modules). Each modules may contain the following sub-items:

• routes/ - contains the modules' navigator route
• repository/ - contains the modules' API calls which extends the base API
• store/ - contains the modules' vuex store configurations
• views/ - contains the view of the application. The Component/ is also placed here for easy referencing

layout/

Contains the layout components that you may use in your pages similar to nuxt's layout directory.
Please see social and chart module's view for reference.

repository/

Contains the base repository initiliazation. By default, the project uses REST API calls via axios

router/

Injects all the declared routes in modules and inject to the Vue instance

store/

Injects all the declared modules store and inject to the Vue instance

App.vue

The main vue file

main.ts

the main file entry point

The types/ Directory

This directory includes Typescript shims files for global and explicit parsing. E.g env.d.ts

Environmental Variables

Environment variables are set in the webpack.config.js file within the snippet below:

plugins: [
            // ... Vue Loader plugin omitted
            // make sure to include the plugin!
            new VueLoaderPlugin(),
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                "TNS_ENV": JSON.stringify(mode),
                "TNS_API_URL": (mode === "production") ? JSON.stringify("https://jsonplaceholder.typicode.com") : JSON.stringify("https://jsonplaceholder.typicode.com"),
                "process": "global.process"
            }),

            ...

IMPORTANT: TNS_ENV returns mode development or production. This is important during builds.

Project Setup

• Clone the project nitibo master branch (latest stable release)
• Confirm from your machine that nativescript is properly installed. Run tns doctor and see results
• cd to project and run npm install
• You may configure your emulators now for android and iOS

Development Mode

• To start development with android, run npm run android
• To start development with iOS, run npm run ios
• Run the configured linter using npm run lint
• Run and fix the configure linter using npm run lint:fix
• Run vue devtools using npx vue-devtools and in another terminal, run the platform with the commands above (npm run android or npm run ios). Please follow this awesome guide from nativescript-vue docs
• You may use the default tns commands as usual (e.g tns run android, tns run ios)
• Append the --device <device-id> when using actual devices for android and iOS

Production Mode (Docs WIP)

• Publish your android application following this guide
• Publish your iOS application following this guide

Debugging vs Production

During usual run, project runs with following settings -

1. Code is not minified
2. Vue.config.silent is false, so every component creation is logged

# Build, watch for changes and debug the application
tns debug <platform>

To minify code, and prevent Vue logs -

# Build for production
tns build <platform> --env.production

tns run <platform> --env.production

Technologies Used

• Nativescript
• VueJS
• Nativescript-Vue
• Nativesript-Vue-Navigator
• Typescript
• Vuex
• Vue-Class-Component
• Axios for REST API

Issues

Please file issues to further improve this project here https://github.com/Lyduz/nitibo/issues

• Major Issue: HRM run for checking linters. See #7

Pull Request

Contributions are the most welcome. To request changes, please follow the following:

• Always branch out with a branch name format: feature/* for feature related changes or bugfix/* for bug related changes
• No direct push to master branch
• All changes are subject for reviews

TODO

• Fix major issues #7
• Finish production documentation
• Documentation for optimization
• Preview support and documentation
• CI with TravisCI

Contributors ✨

Thank you so much to our contributors.