There are many dependencies, structures or requirements you should take care of when creating your own ScaleIT application for the ScaleIT architecture. Fortunately, the ScaleIT team already did lot of the work for you and created many examples, templates, sidecars and documentation about this procedure. In this article, we will show you how to use these already existing structures to create your own ScaleIT application with ease.
If you are new to the ScaleIT World we suggest to read our basic documentation about the platform to get a quick overview about the main aspects why you or your company should use it.
The following figure visualizes the App Creation Circle:
Figure 1: App Creation Circle
First of all, make sure Docker and Docker Compose is installed on your machine. To set up your programming environment you should also install .Net Core or NodeJS (regarding to your backend decision) and the npm package manager. For problems or new versions please refer to the respective sources. AngularJs and Ionic will be installed automatically with npm. This behaviour is defined in the 'package.json' file in the root directory of your project later on.
As mentioned before, there are already some templates and sidecars you should use to get started with your ScaleIT app. It is recommended to get to know the specified project's structures which all applications should follow to keep consistency and to orientate yourself faster through a project, developed by someone else. Use this repo as your starting point. You can see the desired folder structure and templates for the documentation (e.g. Readme).
<app_name>
├── docker-compose.yml
├── dc.build.yml [optional]
├── .env.default
├── .env.test.default [optional]
├── .env.staging.default [optional]
├── .env.production.default [optional]
├── README
├── Resources/
| ├── Documentation/
| ├── Rancher/
| | ├── catalogIcon-<app1>.svg //jpg,png or other format ok
| | ├── appHubIcon-<app1>.svg //jpg,png or other format ok
| | ├── config.yml // meta-data about the app
| | └── Screenshots/ // App Screenshots
| | | └── 1.jpg
| | └── Versions/
| | . └── 0/
| | . . └── docker-compose.yml // compose version 2 due to compatibility reasons
| | . . └── rancher-compose.yml
| └── Documentation/
| └── README
├── Domain Software/
| ├── DomainContainer1/
| | ├── Dockerfile
| | └── <some other files>
| └── DomainContainer2/
| └── Dockerfile
└── Platform Sidecars/ [optional]
. ├── SidecarContainer1/
. | ├── Dockerfile
. | └── <some other files>
. └── SidecarContainer2/
. . └── Dockerfile
For further documentation check this out.
The 'Domain Software' directory has to contain all logic your app supports. We provide a simple Ionic frontend with either .NetCore or NodeJS backend where you can romp around with your programming skills. A good way to utilize these modules is to use git submodule composition. E.g. add the dotnet api backend to your domain software with the following line of code:
git submodule add /~https://github.com/ScaleIT-Org/dotnet-api-backend-skeleton.git "Domain Software/dotnet-api-backend-skeleton"
Additionally, add the Ionic frontend:
git submodule add /~https://github.com/ScaleIT-Org/ionic-app-skeleton.git "Domain Software/ionic-app-skeleton"
For the build process you need to provide a dockerfile in the 'Domain Software' folder and adjust the main docker-compose.yml For instance:
version: '2'
services:
my-app:
build: Domain Software/
ports:
- "HOSTPORT:CONTAINERPORT"
You can see a working example in this repo with dotnet api backend and Ionic frontend.
Notes on the features of the App Skeleton:
- The logo located at /src/assets/logo.png will be automatically converted to all white - keep in mind to create a version with transparent background, too.
If you want to run everything local without the docker virtualization read the following section.
The next step is separated into two independent sections for the two backend versions:
Clone the NodeJS-Backend template:
#NodeJS
git clone git@github.com:ScaleIT-Org/nodejs-backend-skeleton.git
Then go into the root of the newly created folder and resolve the dependencies with NPM.
cd nodejs-backend-skeleton
npm install
As a next step you need to build the frontend. This is also done with NPM where some ionic scripts are executed. In this step the whole frontend will be build, typescripts transformed and dependencies resolved. Everything with the following simple command:
npm run build
Isn't that easy? Now you can start everything with:
node server.js
Go to your internet browser and check localhost:3000
Clone the ASP.NET-backend template:
#ASP.NET
git clone git@github.com:ScaleIT-Org/dotnet-api-backend-skeleton.git
Go into the root of the newly created folder and resolve the asp.net project dependencies:
dotnet restore
The next step is similar to the nodejs version. To resolve the dependencies for your frontend execute:
npm install
Then, you need to build the frontend. The ionic scripts to transform the typescripts are executed during the dotnet build process. Just run the following simple command:
dotnet build
Go to your internet browser and check localhost:5000
If everything went well you should see the following screen in your browser:
| Mobile | Desktop |
|---|---|
 |
 |
| Administration view with configurable endpoints | Tech Stack |
|---|---|
 |
Webpack->(Typescript->Angular->Ionic)->Compiled HTML, JS, CSS |
| Figure 2: Ionic Sample Frontend |
Our chosen app architecture (seen in fig. 1) also includes the opportunity to use several sidecars. These are additional independent software parts you can add to your dockerized application to run next to your domain software, which can be used to add desired functionalities. For example a registration service to our central app-registry as seen in fig. 2
Figure 2: App Architecture
The easiest way to build and run everything is to move to your main project folder and execute docker-compose up.
This builds your docker images and starts them.
The NodeJS version should then be accessible under localhost:3000 and .NetCore version under localhost:5002.
You can checkout our working example here.
TODO
After you modified your app there is one more step to do. We constructed a so called App Readiness Checklist where we defined some rules and constraints to maintain a consistent structure and behaviour under all existing ScaleIT applications. Have a look at our checklist and verify that your app is compliant with applicable standards.
Now that everything is up and running it is on you to implement your ideas for a convenient ScaleIT application. To easily get started we collected the links to the used technologies:
- ScaleIT Repo (Skeletons/Examples/Documentation)
- Ionic Framework (Frontend)
- Ionic Icons (Frontend)
- AngularJs (Frontend)
- Typescript (Frontend)
- NodeJs (Backend)
- .NetCore (Backend)
- Docker (Virtualization)
- Docker Compose (Virtulization)
- Sidecar Pattern