1tool-module-skeleton

SDK For developing 1Tool modules.
Explore the API docs »

1Tool · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Usage
   • Creating a new module
3. Project structure
4. Links
5. License
6. FAQ

About The Project

1Tool module skeleton is a front-end setup for scaffolding 1Tool modules independently from backend. We provide this code, so anyone can build modules on top of the 1Tool suite api.

Here's why:

• Easy and fast setup without the hurdles of setting up a backend server.
• Your time should be focused on creating something amazing. A project that solves a problem and helps others
• You shouldn't be doing the same tasks over and over like setting up an authorized api or state management from scratch

Of course, no template will serve all modules since your needs may be different. So we'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.

Use the Getting started section to get started.

(back to top)

Built With

• Vue.js 3
• Pinia
• PrimeVue
• Vue-i18n
• TailwindCSS
• Vue-router

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

You should have an user account at 1Tool suite and be familiar with the following technologies:

• Tailwind CSS
• Vue3 ecosystem
  • vue routing
  • composition api
  • pinia state management
  • vue single file components (SFC)

Installation

1. Obtain an API Key at https://my.1tool.com/suite/api
2. Clone the repo

   git clone https://github.com/1tool/1tool-module-skeleton.git

3. Install NPM packages

   npm install

4. Enter your API token and tenant id in meta tags of public/index.html

    <meta name="tenant-id" content="API_TENANT">
    <meta name="auth-token" content="API_TOKEN">

Usage

To start a development server simple run

npm run watch

(back to top)

Creating a new module

There is a Demo app provided in src/apps/Demo. To get started with a new module there's a few steps to take:

• Simply duplicate Demo folder and give it a name of the new module; i.e.: ProjectSettings.
• Replace all occurences of Demo with NewModule and demo with newmodule in the newly created folder.
• Rename apps/NewModule/views/Demo.vue to apps/NewModule/views/NewModule.vue
• Replace data-module="Demo" to data-module="NewModule" in public/index.html frontend mount point.

(back to top)

Project structure

The entry point of the application is defined in public/index.html:

<div id="frontend-canvas" data-module="Demo"></div>

Everything you need to worry about is in src/apps. The rest of the code is just a setup that get's provided by 1Tool.

src/apps/
`-- Module
    |-- api
    |   `-- index.js   - provides authorized api client
    |-- components
    |   `-- *.vue      - a place to store your vue SFC components
    |-- lang
    |   `-- index.js   - contains translation language lines
    |-- router
    |   `-- routes.js  - defines module routes and views
    |-- store
    |   `-- index.js   - pinia application state
    |-- views
    |   `-- Module.vue - base module view
    `-- index.js

(back to top)

Links

A list of links to documentation pages:

• 1Tool API - documentation of api endpoints
• Vue.js - vue3 documentation
• Pinia - state management documentation
• PrimeVue - component library documentation
• vue-i18n - language layer documentation
• TailwindCSS - css framework documentation
• vue-router - routing documentation

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

FAQ

Where can I obtain an api token?

You can obtain an api token with authorizing your user against the auth/user api endpoint: Read more on api documentation.

(back to top)