Deploy Frontend H5 App¶

Download HBuilderX¶

HBuilderX is a general-purpose front-end development tool but specially enhanced for uni-app.

Download the development version of the app, which can be used out of the box; if you download the standard version, when running or distributing uni-app, you will be prompted to install the uni-app plug-in, which can be used after the plug-in is downloaded.

HBuilderX: HbuilderX Download.

If you use the cli method to create a project, you can download the standard version directly, because the uni-app compilation plugin is installed under the project.

┌─uniCloud              
│─components    directory of uni-app components that conform to the vue component specification
│  └─comp-a.vue         reusable a component  
├─hybrid                
├─platforms             The directory where the local html files are stored on the App side,
├─pages                 directory where the front-end page files are stored
│  ├─index
│  │  └─index.vue       index
│  └─list
│     └─list.vue        list
├─static                local static resources (such as pictures, videos, etc.)
├─uni_modules           [uni_module](/uni_modules)
├─wxcomponents          
├─main.js               Vue initialization entry file
├─App.vue              Application configuration, used to configure the global style of the App 
├─manifest.json         Configure application name, appid, logo, version and other information 
├─pages.json           Configure page class information such as page routing, navigation bars
└─uni.scss

Install Node.js¶

If you already install Node.js please jump to Clone from Github

Download Node and Npm¶

Download your prefer version of Node.js

Check that you have node and npm installed¶

To check if you have Node.js installed, run this command in your terminal:

node -v

To confirm that you have npm installed you can run this command in your terminal:

npm -v

Clone from Github¶

clone the repository by runnning:

git clone https://github.com/IBM-AR-Greeting-Tool/AR_Greetings_App.git

now navigate to the project

cd AR_Greetings_App

Install the dependencies¶

# Install Dependencies
npm install

Run the application¶

Run in the browser¶

Enter the project, click Run on the toolbar -> Run to the browser -> Select the browser, you can experience the H5 version of uni-app in the browser.

Run on the phone¶

Run the App to the mobile phone or emulator: connect the mobile phone, enable USB debugging, enter the uni app project, click Run on the toolbar -> Run on real machine -> Select the running device, you can experience the uni-app in the device.

¶

Publish the application¶

Published as H5¶

In the visual interface of manifest.json, perform the following configuration (the basic path of the application may not be configured in the root directory of the website). At this time, the path of the issued website is ar-ibm.ucl.jaobsen.com, such as:
On the HBuilderX toolbar, click Release, select Website-H5 Mobile Version, as shown in the figure below, click to generate H5 related resource files and save them in the unpackage directory.