Installing An App - Development

To install an app in development mode, you must install an app using the git-url for the repository.

Quick Instructions

Below is a simple reminder for those who just need a quick reminder of the steps of installing an app for development. If you need more explanation of each step, see the detailed instructions below.

  1. In your api-dir run fw install [giturl]
  2. In api-dir/apps/my-app run yarn install
  3. Fix api-dir/apps/my-app/config.json, adding url property and correcting outputDir property
  4. On app-dir/apps/my-app run gulp init.
  5. Setup in Group Control
    • In Apps => add department to app (ie administrator).
    • In Users/Groups => Give access to your app.
  6. On api-dir/apps/my-app run gulp watch
  7. Go to app in browser

Detailed Instructions

Below are more detailed instructions with further explanation for each step.

  1. In a terminal/command prompt, navigate to your FW installation
C:\Users\[yourUserName]> cd webroot
C:\Users\[yourUserName]\webroot\fw-dev> cd fw-dev
C:\Users\[yourUserName]\webroot\fw-dev>

  1. Navigate to the repository of the app you wish to clone, copying the URL

  2. In the terminal run fw install [giturl]

C:\Users\[yourUserName]\webroot\fw-dev> fw install https://bitbucket.org/[yourUserName]/status-app
  1. When asked "What is the app id of the app you are cloning", navigate to "Source" then client/package.json. The app id is the value of the name key (for our example, we are using status, which is sta). Hit enter for any other options
What is the app id of the app you are cloning? []:
> sta

Cloning app from repository: Complete!

Web Root [./public]:
>

App Url [/sta/]:
>

Installing addon 'migration-core': Complete!
Installing addon 'mail-core': Complete!

[OK] App 'sta' installed

C:\Users\[yourUserName]\webroot\fw-dev>
  1. Install npm and yarn dependencies in the app’s root directory by running yarn install. Also run fw database migrate which sets up the app’s tables in the database specified by your FW installation.
C:\Users\[yourUserName]\webroot\fw-dev\apps\sta> yarn install

  1. Add a url property to the fw-dev/apps/sta/config.json file. This property should be the same throughout all applications (besides apps cloned by app ID, they do not need it). Also set the outputDirectory to ../../public/[appid]

    • Note: The url property is everything after public in the output directory for a gulp given app (assuming all outputDirectory properties are app-dir/public/my-app)
{
    "outputDirectory": "../../public/sta",
    "url": "/sta/"
}
  1. Install npm/yarn dependencies in the app’s client directory
C:\Users\[yourUserName]\webroot\fw-dev\apps\sta> gulp init
  1. Make sure apache is running (Linux) or Wamp is running (Windows), then run gulp watch in your app’s root.
C:\Users\[yourUserName]\webroot\fw-dev\apps\sta> gulp watch

  1. Configure the app in group control: Group Control Configuration Tutorial

  2. Navigate to where your app is outputting. App url can be determined by looking at:

  • The servername property can be found in the vhosts apache configuration file, which can be found in the apache configuration of your web server:
    • if using Xampp: C:/xampp/apache/conf/extra/httpd-vhosts.conf
    • if using Wamp: C:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf
    • For example: "fw.localhost.com"
  • The outputDirectory property in the api-dir/apps/my-app/config.json file
    • For example: ../../public/sta in this example
  • Append serverName with everything after 'public' in the outputDirectory. So in this example, you would navigate to fw.localhost.com/sta.

Your app is now successfully cloned.