Covid Info App

How to Build and Customize Applications with the Fathym Framework

Fathym speeds up application development by automating cloud and infrastructure setup, app hosting and version management for multiple end user groups.

Applications, especially data heavy IoT apps, can be expensive to develop due to the significant amount of resources and time required for development and hosting. Fathym streamlines the process, saving you both time and resources needed for development while operating as a one stop shop for hosting and maintaining your applications over time.

Fathym has several open source template appcreated for you to use as jumping off points. These range from simple websites to complex data-driven applications.

The following tutorial will show you how you can take advantage of Fathym’s CLI (Command Line Interface) and our cloud-based IDE (Integrated Developer Environment), to build and customize applications, host them via Fathym, control permissions for end users, and manage app versioning. The Fathym CLI allows for faster development, while setting up all the necessary infrastructure behind the scenes, allowing you to focus on customizing your app.

 

Setup Application Template

  1. Inside Visual Studio, open a terminal and install Fathym’s Angular CLI by running npm i -g @lcu/cli@latest. This will install the Fathym’s CLI globally on your machine. The CLI automates project setup and offers a library of angular templates to give you a robust launching pad for building web apps.
  2. Open a terminal and type ‘lcu init’. This will initialize your new project with the needed baseline files for your Angular project.
    • For Scope, we’ll use @fathym-it
    • For Workspace, use sample-app
  3. Next, type ‘lcu proj’ to select a project template.
  4. For the project name, enter “covidinfo”.
    Note:your project name needs to contain all lowercase letters.
  5. For the Core Project Template, select App and then the LCU-Core-App template. We are using this template because it contains the Hello World sample app, as well as some of Fathym’s best practices.

Customize & Preview your Application

Now we’re ready to make some customizations to the application.

  1. Open a terminal and type ng serve –-aot=false to compile and serve the application. You can view the application locally in a browser at http://localhost:4200/.
  2. Change the logo
  3. Change the header color or theme
  4. Add an image and text to the body
  5. Return to your browser to see the changes.

Deploy to GitHub and NPM.js

Now we’re going to create a new repo on GitHub for this application.

  1. Click the “Create a new repository” button on GitHub. Note: to avoid errors, do not initialize the new repository with README, license, or gitignore files. You can add these files after your project has been pushed to GitHub.
  2. Open Git Bash and change the current working directory to your local project.
  3. Initialize the local directory as a Git repository using git init.
  4. Add the files in your new local repository using git add . (don’t forget the period after the add). This stages your files for the first commit.
  5. Commit the files that you’ve staged in your local repository using git commit -m “First commit”.
  6. At the top of your GitHub repository’s Quick Setup page, click the icon to copy the remote repository URL.
  7. In Git Bash, add the URL for the remote repository where your local repository will be pushed using:
    • git remote add origin remote repository URL
    • git remote -v
  8. Finally, push the changes in your local repository to GitHub using git push origin master.

Great job! We’ve successfully cloned the Hello World repo and deployed it to a new repo on GitHub.

Note: At Fathym we have Azure DevOps configured to monitor our GitHub repos. When it notices an update, it will automatically download the repo, create the needed npm packages, and deploy to npm.js.

Add Application to your IDE

Now let’s add the new application to your Fathym IDE.

  1. Click on Data Applications
  2. Click the ‘Add New Data App’ button
  3. Name the application and give it a path
  4. Select if it’s a secured application (requires login)
  5. Click the ‘Create Data Application’ button
  6. Select your Data Application from the list
  7. Fill in the form with the link to your NPM package, the package version, and any state config options – in this case use {}.
  8. Click the ‘Save View Config’ button
  9. Click the ‘Launch in Browser’ icon to launch your application in a new browser window.
Scroll to Top
Thinky Octopus Logo

This website uses cookies to ensure you get the best experience. By continuing to use our site, you are consenting to our use of cookies.

Share via
Copy link
Powered by Social Snap