# kickstart-vue-appweb

**Repository Path**: mirrors_embedthis/kickstart-vue-appweb

## Basic Information

- **Project Name**: kickstart-vue-appweb
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-26
- **Last Updated**: 2025-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Kickstart Web Manager

Kickstart Device Manager demonstration application using Appweb, ESP, Kickstart, VueJS and Vuetify.

Note: this is a demonstration application and not production code. It is intended to demonstrate how to use Appweb and ESP 
with VueJS.

===

The manager application has three parts:

1. The server-side manager application written using the Appweb/ESP web framework under the ./manager directory.

2. The Appweb/ESP web server and web framework under ./appweb.

3. The VueJS client browser application under ./ui.

## Checkout

    git clone --recursive https://gitlab.com/embedthis/kickstart-vue-appweb

If the checkout of Appweb submodule fails, then edit .gitmodules and .git/config and ensure the git path is:

    https://github.com/embedthis/appweb


## Building from Source

To build from source, some build requirements must first be installed. These include: NodeJs, NPM, VueJs, the Vue CLI and the Typescript compiler. You will need to install Node 10.X or later and NPM manually.

To configure the manager, run:

    make configure


To build Appweb, the manager and the UI, run:

    make build

## Starting the App

To run for development, invoke:

    make run

This will run Appweb in the top directory and will run the Vue CLI to serve the UI and browse to https://localhost. In this     mode, the UI will be hot-reloaded by VueJS for any changes made by the UI. NOTE: appweb is responding to API requests and is also  serving the UI. 

Login with:

    User    Password
    ----    --------
    admin   demo
    guest   demo
    super   demo

The super user is for the developer of the app and it has some extra maintenance screens.

## Profiles

Appweb, the manager and the UI can be built and run in development or production mode. These modes are controlled by the PROFILE    make variable defined in Makefile and overridable from the environment.

    make PROFILE=prod build

The "dev" profile will build the UI with debug symbols and source maps. The manager will be built into a separate loadable shared   library per controller, and Appweb will be built with debug symbols for debugging.

The "prod" profile will build the UI compressed and without symbols. The manager will be built into a single shared library and     Appweb will be built optimized and without debug symbols.

When serving the UI from VueJS on port 8080, the UI will always be built by VueJS in dev mode.

## API URL

The ui/product.json specifies the manager API URL by the "api" property. When set to "/api" without "https://hostname", it will use the browsers displayed URL protocol and host. When using VueJS to serve the UI (split-mode), you need to specify the full "https:// localhost/api" as the host for Appweb+manager is different to that of the VueJS web server that is serving the UI.

## Files and Directories

The following files and directories have these purposes:

    Dockerfile              - Docker file to create a docker container 
    LICENSE.md              - Licensing information
    Makefile                - Makefile to build and run
    README.md               - This file
    appweb                  - Appweb source code sub-module
    appweb.conf             - Appweb web server configuration file
    bin                     - Binary tools and scripts
    cache                   - Compiled ESP application and controller code
    controllers             - Server-side ESP controllers
    db                      - Database files
    esp.json                - ESP configuration file
    migrations              - Database migrations
    pak.json                - Pak definition file
    paks                    - Extension packages
    postcss.config.js       - PostCSS processing
    src                     - Server-side ESP application source code
    ui                      - Client-side application