WebApp creation from Git, file editing and NPM integration

Available from Release 5.2.0 of Onesait Platform

Introduction

Until release 5.2.0, WebApps Manager only supported publishing Web applications from a ZIP file.

In this release, we have added these features:

  • Create and deploy a WebApp from a Git repository containing a static web.

  • Inline editing within the Control Panel of files uploaded from a Git repository.

  • Configure an NPM application in Git, so that the module can compile the application generating the distributable.

How does it work?

WebApp creation from Git

Now the creation of web projects will consist of two different tabs: one for uploading a ZIP and one for working with Git.

In this case, we are interested in the Git implementation. When you click on the Git tab, you will be required to provide the URL of a Git repository and a token that allows access to that same project. Once you have all the form filled in, click on the "Create" button to create your WebApp, your web project with an associated Git project.

Edit WebApp Git

With your WebApp already created, click on the three dots to open the options dropdown. Inside you will find a new option called Git:

which will give you access to a UI to edit the files in the Git repository:

From here you will have access to the typical Git functionalities, such as adding, editing, renaming or deleting files or folders and committing those changes.

With this functionality, you will be able to complete your WebApp from the Control Panel itself.

Deploy WebApp Git

Once you have your WebApp ready, select the Git project folder inside the editor.

The address that is selected will be displayed when you click on the "Deploy" button. You can always see which folder you are pointing to in the "Path:" field above the editor.

If you select a file within a folder, the folder containing the file will be displayed and the selected file will be indicated as the main file of the project, as indicated in the field above the editor.

After this, click the "Deploy" button. The screen will lock while the files are cloned and deployed and, once the process is complete, you will be returned to the list of web projects, where you will be able to view your project.

Below is a video illustrating this entire process:

Creating WebApp Git from an NPM project

Also included in the WebApp Manager is the ability to manage Git repositories containing an NPM project.

When creating or editing a WebApp, within the Git section you will be able to enable the option to "configure as NPM Project". After checking this box, the form will display the boxes to fill in with the command you want to launch within your NPM project and the directory where you want to create the dropdown.

Once this is done, the process to follow is very similar:

  • Continue to the git screen, where you will select your NPM project.

  • Click "Deploy" and wait for the deployment process to complete. In this case, the WebApp Manager makes a copy of the selected directory and executes the previously specified NPM command which will typically generate the deployable, which you will then deploy.