Skip to content
This repository has been archived by the owner on Nov 22, 2020. It is now read-only.
/ nitibo Public archive

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

License

Notifications You must be signed in to change notification settings

Lyduz/nitibo

Repository files navigation

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

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

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.