Generation Guide

In this step, you will actually use the FW Generator to generate a new app, so that you can begin making coding changes. Note: this tutorial will not get you to the point where you can actually login to an app, but it will merely give you a blank app template for you to begin to edit.

Install Necessary Programs

1. Navigate to your fw-dev directory and install Yeoman. For now, you need to make sure that you install version 3.1.0.

    ~/webroot/fw-dev$ npm i -g yo@3.1.0

2. Install the app generator

    ~/webroot/fw-dev$ npm i -g @bennerinformatics/generator-fw

Create New Bitbucket Repository

3. In bitbucket, navigate to the "FW Apps" project

4. Select "Create repository"

5. Make the repository name “[yourappname]-app" and default branch name to "master"

Generate the App

6. Run the app generator, by running the following command

    ~/webroot/fw-dev$ yo @bennerinformatics/fw

7. When prompted specify the following values:

   • For the kit to generate, select the "Group Control App Kit" (by hitting enter while it is highlighted).
   • For "App Name," put the name of the app (this name should be separated by spaces. If you use hyphens in the App Name, you will cause errors in your app down the line)
     • For "App Shortname", determine if you want to have a shorter name for the app on a mobile screen and put the shorter name here (if not, leave it blank, and the mobile will display the app name property)
   • For the "App Shortcode," put the shortcode that you have approved with the Dev Admin
   • For the "App Description," you should normally put "[yourappname] App" unless you have a better description from Dev Admin
   • For the "App Base Color," enter the hexcode for your app, found on the library website
   • For the "App Author," put your name
   • For the "App License," just press enter to accept default values
   • For the "App Repository," paste the web address for the repository you just created in step 4

Format App

8. You need to push your changes generated by Generator FW to your repository, using your preferred Git GUI, so your created repository is not empty.

9. Create your config.json file in your app's root directory. The file will need to contain the following (replacing yourAppShortCode correctly):

{
    "outputDirectory": "../../public/{yourAppShortCode}",
    "url": "/{yourAppShortCode}/"
}

10. Install your dependencies in your app's root directory and client directory. You can do this by running yarn in each folder.

11. Install your FW Addons by running fw install in your app's root directory.

12. Make sure your apache is running, and then run gulp watch in your app's root directory.

13. Navigate to the webpage where you app is hosted. If you don't know where this is, the app url can be determined by:

• 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.

You have successfully generated an FW app!