The first application and introduction to the templates

We will look at an example of creating a simple web application, on the basis of which we will get acquainted with the FCF framework templates.

It will be a web application with just one page, which will host a planet revolving around the sun. This application successfully demonstrates some of the functionality of the framework templates. This application can be downloaded from: /examples/fcf-example-planet.

So, let's start building our first application.

First, install the framework (FCF Install), a text editor Sublime Text and SublimeFCFPlugin plugin or VSCode and its plugin VSCodeFCFFramework

Now that everything is ready, let's create a project. Open a terminal and go to the folder where you will create projects.


Create a project named fcf-example-planet using the fcfmngr application template generator

$ fcfmngr create project fcf-example-planet

Change to your project directory.

$ cd [PROJECTS_DIRECTORY]/fcf-example-planet

Create a database using the fcfmngr application. The first argument is the name of the "create-db" database creation operation. The second argument is the path to the JS file of the application. If access to the mysql user is performed only from the system superuser, you need to use sudo when invoking the fcfmngr command

$ fcfmngr create-db ./fcf-example-planet.js

Run the application for the first time to initialize it.

fcfserver server.json

Wait for the installation of NODEJS modules and FCF packages. When the application completes all the preparatory actions, the following record will be displayed in the terminal:

... 2021-06-15 21:10:24.481 [PID:27887] [LOG] [MOD:FCF]: Applications is running ... ... 2021-06-15 21:10:25 [LOG] [SERVER]: Listening started with port 8080 2021-06-15 21:10:25 [LOG] [SERVER]: Listening started :: with port 8080

Make sure the application is running, open the address http://localhost:8080 in your browser

To stop the application, use the key combination Ctrl+C

Description links

Project file structure - Description of the structure and purpose of the FCF project files

Rules for describing file paths - Rules for describing file paths in the FCF framework

Description of module files - Description of module files in the FCF framework

General description of the application template operation - General description of templates in the FCF framework

Static routing - Description of the static routing task through the settings.config file

Applying translations - Using translations in templates

Creating a template - Creating the main template in which the animation will be performed

Programming arguments and adding a starry sky - Describes the use of program arguments

Adding a moving planet and getting to know the wrapper - Describes how to add a new subpattern with a planet and animate it using a wrapper.

Adding reference type arguments, manipulating the value of template arguments, and binding an event. - Adding reference type arguments, manipulating the value of template arguments, and binding an event.