Flatlogic Web App Generator
In this section, we will tell you about the main concept of the generator, as well as help you to develop your first application using our product.
Basic information about the generator
What is a generator?
Flatlogic generator is a tool that helps you to create a fully workable CRUD web application with front-end, back-end, and database. The generated application is a great foundation for further development with user authentication, data management, and a ready-made basic structure.
What can you build with the generator?
With the help of the generator, you can make almost any template for any web application. Whether it's CRM, E-commerce shop or a booking application. The architecture of our service is laid down in such a way that you can define the database schema by yourself, and then we give you a ready-made code that you can customize to fit your needs.
Accessing the generator
In order to access the generator you will need to register on the Flatlogic website. To create an account in the Flatlogic website, you should click on the ‘Sign in’ button in the footer (see screenshot below).
Next, you will be redirected to the account creation page, where you will have 2 options – create an account using email or GitHub.
After you create an account, you will need to confirm an email and then you can start work with Flatlogic generator. Please click this link to go to the generator.
Creating the application
To create an application please click the ‘Generate your app’ button. See the screenshot attached.
Generate your app button will open a new window to build your first application. Building an application using the Flatlogic generator consists of 5 steps:
- Creating project name;
- Choosing the stack;
- Choosing the design of the web app;
- Creating the database schema and table dependencies;
- Review your project and generate the project.
Now let’s dive into each stage. In this documentation, we will develop cars managing application.
This step is pretty simple - you just need to choose a project name.
Choosing the stack
This step will allow you to choose your project stack. The stack consist of three parts:
In each part you will have the following options to choose from:
- The front end has React, Angular, and Vue frameworks;
- Backend for now has only one option - Node.js. But we are planning to add Java, Python, .NET, and Laravel options;
- There are two databases: MySQL and PostgreSQL, we are planning to add MongoDB in the near future.
Thus, you have more than 20 options to choose from to create a web application.
There are four design options now: Material, Classic, Transparent, and our internal Flatlogic design system. Please note that some stacks have fewer design options, for example, Angular has only 2 design options.
Now let’s move to the most complicated part of the application design, perhaps the most interesting. In this part you will need to know which application you want to build, that is, CRM or Ecommerce, also in this part you will build a database scheme e.g. relationships between tables.
If it is difficult for you from the very beginning to understand what tables to make with what entities and relationships to make, we have prepared several ready-made templates that you can also modify:
- E-commerce app;
- Time tracking app;
- Books store;
- Chat (messaging) app;
The basic essence of the Scheme Editor is that it consists of tables and columns and your work will consist of working with them.
If you choose to build an application from scratch, then you will see a button to add a table as well as a ready-made default table Users (since we believe that a user exists in any application).
By clicking on the ready-made Users tab, you will see in front of you all the columns created in the table with its properties.
When working with tables, you have 2 options - add a new table or delete it. Now let's take a look at each of these steps separately.
When working with columns, you have 3 options - add or remove a column, or change the properties of the colum
Let's take a closer look at each option separately.
Adding a table
In order to add a table, you need to press the '+ Table' button (see screenshot below).
After clicking the button, a new table will be added and you will be prompted to select a name for this table. Please choose the name in lower case for better code generation. You can add an unlimited number of tables in the paid plan and in the free plan.
Deleting a table
Deleting a table is very simple - you just need to select the table you want to delete and click the 'Destroy' button. The table will be deleted immediately. Please note that the ‘Users’ table can not be deleted.
Now let's move on to changing the columns. In order to change a created column, click on it, and on the right side of the modal window, you will see the Edit table menu, where you will see the properties that you can change.
In order to create a column, you need to click on the table in which you want to create a column and then click on the ‘+ column’ button. Then the Edit column window with the following parameters will open on the right side:
Name - here you specify the name of the column that you will see in your database. Please, use a camel case for column names.
Title is the title of the column that you will see in your live application. Here you can use capital letters and any names, as this does not affect the generation and operation of the application.
Type - in this menu you can select the data type of the column.
The following types are offered to choose from:
- String - when you select this type, you have a unique Multiline option that adds multiple lines;
- Boolean - when choosing this type, you need to set the value to True or False;
We will talk about the following data types separately.
Unique - enables or disables the column uniqueness option;
Show in list - option allows to show the column as a list;
Show in form - allows you to show the column in the form.
Relation to one column
To make a relation to one column you have to select it in the list of columns in the table, go to the Type property and choose Relation to one option. After that, you will have a new property Ref - this is a link to the table with which this column will correspond.
For example, in our case, the ‘model’ column of the ‘cars’ table will be mapped to the users table to find out who will own the car.
Relation to multiple columns
To make a relation to many columns you have to select it in the list of columns in the table, go to the Type property and choose Relation to many options. After that, you will have a new property Ref - this is a link to the table with which this column will correspond.
Enumerated column type
In order to select this data type, we need to select the column to which we want to assign it, and in the right Edit Column window select Type - enum, then we will have the 'Options' field in which we will need to list the options for selection, as well as UI type for selecting options - checkbox or radio button.
In our example, the options are car brands. Please, fill in the data in the Options field, separated by commas.
Deleting a column is done by selecting the column you want to delete and pressing the 'Destroy' button. The column should be deleted immediately.
Before making your application, we advise you to first think over its basic architecture, maybe even draw which tables and columns you want to have in your application. This will make it easier for you to generate the application without having to modify it later.
Review and Generate
At this stage, check that everything is correctly selected, stack, design, project name, entities list. If everything is correct, you will need to click the ‘Create project’ button and to start the generation of your project.
After the successful generation of the project, you will be redirected to the page with the list of projects. We'll cover the functionality of this page in the documentation below.
Download the application
After the successful generation of the project, the main option is the ability to download the project. To do this, select the project you want to download and click the 'Download' button, after that a window will open in order to save the project to your machine. The project is supplied in .zip format.
See the demo
Before you buy access to the generator or before downloading it, you will have an opportunity to watch a live demo. The demo is available for 24 hours. Select a project on the project list page and click the 'Deploy' button, the demo will load within 5-7 minutes.
Editing and deleting application
Click the ‘Edit’ button to change your project. Next, you will be taken to the Scheme Editor page where you can change the project, add and remove entities, and rebuild the project.
Click the 'Delete' button to delete a project from the list of your projects.
Running the project locally
The installation instructions for the project will be delivered along with the code in the README.md file and will depend on the selected stack. But the most common case will be as follows.
To Install local dependencies type
Then install Portgres:
- For MacOS type
brew install postgresin your terminal
- For Ubuntu type
sudo apt updateand then
sudo apt install postgresql postgresql-contrib
Create DB and admin user:
Before run and test connection, make sure you have created a database as described in the above configuration. You can use the
psql command to create a user and database:
psql postgres -u postgres.
Next, type this command for creating a new user with password then give access for creating the database:
postgres- CREATE ROLE admin WITH LOGIN PASSWORD 'admin_pass';
postgres- ALTER ROLE admin CREATEDB;
psql then log in again using the new user that was previously created:
psql postgres -U admin
Type this command to create a new database
postgres=> CREATE DATABASE development;
Then give that new user privileges to the new database then quit the
postgres=> GRANT ALL PRIVILEGES ON DATABASE development TO admin;
Setup database tables:
yarn run reset
Start development build:
Start production build:
Get the latest version of the front-end. You can start by cloning the latest version of React Dashboard on your local machine by running:
$ git clone https://github.com/flatlogic/react-material-admin.git MyApp
$ cd MyApp
yarn install. This will install both run-time project dependencies and developer tools listed in package.json file.
yarn start. This will runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. Whenever you modify any of the source files inside the
/src folder, the module bundler (Webpack) will recompile the app on the fly and refresh all the connected browsers.
yarn build. This will build the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Start the project with Docker
The project contains
docker-compose.yml and a couple of helper scripts:
docker-compose.yml(all our services: web, backend, db are described here)
start-backend.sh(starts nodejs app)
wait-for-it.sh(imported from https://github.com/vishnubob/wait-for-it)
Install docker compose (https://docs.docker.com/compose/install/).
Move to the
dockerfolder. All next steps should be done from this folder:
Make executables from
chmod +x start-backend.sh && chmod +x wait-for-it.sh
Download-dependent projects for services. In our case, we also need
Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile. I've created docker branches for user-management-template-backend and sing-app-react projects. You should switch to them before running
Make sure you have the needed ports (see them in
ports) available on your local machine.
Start services. With an empty database
rm -rf data && docker-compose up. With a stored (from previous runs) database data
Stop services: Just press 'Ctrl+C`
After your project will be successfully generated, we also generate the swagger docs specifically for your application.
Documentation will be available at the following link:
Here is also an example of swagger docs of one of the generated applications: https://sing-generator-node.herokuapp.com/api-docs/#/
The basic project structure consists of the:
- Backend folder;
- Frontend folder;
- Docker file;
- Readme file;
To receive support please use our forum (it is the fastest way to receive help), or drop us a line on [email protected].
When you request help please be sure that you have described all the steps to reproduce the issues and your development environment.
At Flatlogic, we also provide custom development services on top of the generator or building software from scratch. You can reach us with any queries about your project at [email protected].
Do I have control of my code?
Flatlogic generator gives you complete control of your code. It's fully editable and provided via zip file.
Do I need to learn new code to use the Flatlogic generator?
No, the generated code uses standard JS and backend libraries. There are no proprietary SDKs or libraries.
Can I use generated code in commercial products?
Sure, you can use generated applications for building commercial products.