Skip to main content

Create Application

Creating a new full-stack application on the platform.

An overview of the frontend, database, and API service.

Introduction​

After installing the platform, we present below the basic commands for creating an application and starting the server.

Although Netuno is polyglot and supports several languages, in this tutorial we will only use JavaScript.

The application in this tutorial consists of a form in a Modal and a PDF export.

Command to Create a New Application​

Open the terminal where the Netuno platform is installed.

To create a new application on the Netuno platform, use the command:

./netuno app

You will be asked for the name of the new application, the database type, and the language.

Choose the H2 Database database type; it's more practical for initial development.

H2 Database is a database built into the Netuno server, so you don't need to install anything or configure a database server.

Alternatively, you can pass the name of the new application directly in the command:

./netuno app name=myapp

Command to Start the Server​

With the new application created, the Netuno platform server must be started with the new application's name:

./netuno server app=myapp

This way, the server uses the specified application as the default application.

From now on, you can start developing your application.

All development files are located in 📂 apps/myapp.

If you are prompted for credentials during the back office login, use the default:

Username: dev

Password: dev

Code Editor​

Use your preferred code editor.

To develop the application's general code, whether backend or frontend, we recommend free code editors, such as:

Open the application folder in your editor:

  • 📂 apps/myapp

This folder contains all the files for the new application and is where all development takes place.

Documentation detailing the application's file and folder structure:

Step Summary​

Now that we have a basic understanding of Netuno, let's create an application from start to finish.

We'll add a button to the home screen to load the customer form in a modal and another button to export the customer list as a PDF file.

We'll follow these steps:

  • Analyze the location of the dashboard's main HTML.
  • Add two buttons with React.
  • Build the button to open the customer form.
  • Build the button to export the customer list as a PDF.
  • Develop the service that generates the PDF file with the customer list.

Let's get started!

Dashboard Template​

Inside the new application's files, open the file containing the dashboard's main HTML, located in the following path:

server/templates/dashboard.html

At the end of dashboard.html is the div where React is injected:

server/templates/dashboard.html
...
<div id="app-dashboard"></div>

This div with the id app-dashboard is where the dashboard starts. By default, the dashboard is created in React.

The React part of the dashboard is in the 📂 ui folder, where dashboards and other features are developed.

Creating the Customer Form​

In this step, we'll need to create a new form called Customer and a new field called Name.

On the back office page, we'll find the Build button in the top right corner.

Clicking the Build button takes us to the form development area.

In the menu, under Management and then Forms is where we can create a new form.

Fill in the Display Name field:

  • Customer

The Table Name field is automatically filled in with customer in lowercase, because in databases it's recommended that the name be in lowercase.

Now you can save your first form by clicking the button below:

  • Save

See more about creating forms here.

When the form is created, the 'Customer' option appears on the left side, under Fields. Click on 'Customer' to create the new 'Name' field.

Fill in the field's Display Name:

  • Name

The Column Name field is automatically filled with name in lowercase, because in databases it is recommended that the name be in lowercase.

Activate the options on the right side:

  • Allow Filtering - which allows you to search by the Name field.
  • Display in Result - which will display the 'Name' field in the results table.

See more about fields here.

Now you can save your first field by clicking the button below:

  • Save

In the upper right corner of the page, there is the Preview button.

Using the Visualize button, we return to the back office and see our Customer form in the menu.

Open the Customer form and, on the right side, we have the button to Add a new customer.

Enter some customers into the system.

Database Query​

Back in the developer's build area, click the Build button.

In the Management menu, open the Query option.

Here in Query, we can execute SQL commands directly in the database.

Run the command:

SELECT * FROM customer

This way, you can query or manipulate system information directly in the database.

You can return to the back office by clicking the Visualize button.

Add the Two Buttons​

Inside the 📂 ui folder, open the file containing the dashboard's main JavaScript, located at:

  • 📂 src/containers

Containers are areas with broader functionality; in this case, a dashboard can contain multiple things.

Copy and paste this code into the DashboardContainer/index.jsx file:

ui/src/containers/DashboardContainer/index.jsx
import { Space } from 'antd';

import CustomerModalButton from '../../components/CustomerModalButton';
import PDFButton from '../../components/PDFButton';

import "./index.less";

function DashboardContainer() {
    return (
        <div className="my-dashboard">
            <Space>
                <CustomerModalButton />
                <PDFButton />
            </Space>
        </div>
    );
}

export default DashboardContainer;

This file is built in React, and now we have the two buttons imported into the dashboard.

Note that the buttons are being imported at the beginning of the code, but these button files don't exist yet.

So let's create the code for the buttons, which will be components.

Button to Form in Modal​

Let's create a CustomerModalButton folder and within it the index.jsx file, in the following path:

  • 📂 ui/src/components/

Components are very specific features with a well-defined purpose that can be imported and used in other components, but are typically used in containers.

Create the CustomerModalButton folder; it should look like this:

  • 📂 ui/src/components/CustomerModalButton

And inside the CustomerModalButton folder, create the code file index.jsx:

  • 📂 ui/src/components/CustomerModalButton/index.jsx

In the file you created, index.jsx, add the code below:

ui/src/components/CustomerModalButton/index.jsx
import { Button } from 'antd';

function CustomerModalButton() {
    const onClick = () => {
        netuno.modal.create({
            name: 'customer',
            callback: function (modal) {
                let form = modal.find('[netuno-form]');

                form.on('netuno:new', () => {
                    console.log('Creating a new Customer.');
                });

                form.on('netuno:save', () => {
                    netuno.modal.hide(modal)
                    console.log('Saved a Customer.');
                });

                form.on('netuno:delete', () => {
                    netuno.modal.hide(modal)
                    console.log('Removed a Customer.');
                });

                form.on('netuno:back', () => {
                    console.log('Clicked back.');
                });

                netuno.loadForm(form);
                netuno.modal.show(modal);
            }
        });
    };
    return (
        <div>
            <Button type="primary" onClick={ onClick }>
                Open Customer Form
            </Button>
        </div>
    );
}

export default CustomerModalButton;

Notice in the code above that the netuno.modal.create(...) method opens the form named Customer.

In the callback, you can observe the events of the actions performed while using the form.

Now one of the buttons is finalized, and the import of this button into DashboardContainer will work.

Export PDF Button​

The button to generate the PDF will depend on a service responsible for creating the PDF file that will be called when the Generate PDF button is clicked.

We'll see how to do this service below, but first let's create the button in React.

Let's create a new folder PDFButton and inside it the file index.jsx, in the following path:

  • ui/src/components/PDFButton/index.jsx

Now, open the new index.jsx file and add the code below:

ui/src/components/PDFButton/index.jsx
import { Button } from 'antd';

function PDFButton() {
    return (
        <div>
            <Button
                type="primary"
                href="/services/customer/pdf-export"
                target="blank">
                Generate PDF
            </Button>
        </div>
    );
}

export default PDFButton;

This button will open the service address in a new tab, which generates a PDF file with the list of customers registered in the system.

The last button is complete, and the import of this button into the DashboardContainer will work.

That's it! Now we can compile the frontend in React to test everything.

Compiling the Frontend​

React needs to be compiled to generate the final JavaScript that can be processed by the browser.

Open the terminal in the application folder and go to the ui folder, from the Netuno root:

  • 📂 apps/myapp/ui

Run the command:

  • pnpm run build

This will perform the production-optimized compilation of the frontend.

Refresh the backend page in the browser to see the changes.

If you want to avoid constantly manually running the compilation command with each change to the frontend code, run the quick development build that watches for file changes, so the quick build is executed automatically:

  • pnpm run watch

To see each change, refresh the backoffice page in the browser.

Compilation errors are displayed in the terminal.

Runtime errors are displayed in the browser console; remember to check for errors.

Integrated Compilation​

Another alternative is to integrate the compilation commands with the Netuno server, consolidating everything into a single terminal. This avoids having multiple terminals open and optimizes the use of having everything in a single central terminal.

Open the application configuration file in your editor:

  • config/_development.json

Change enabled to true.

config/_development.json
  ...
  "commands": [{
    "command": "pnpm run watch",
    "enabled": true,
    "install": "pnpm install",
    "path": "ui"
  }],
  ...

Restart the Netuno server for this new configuration to take effect.

To stop the Netuno server from running in the terminal, close it by pressing CTRL + C in the terminal.

Restart the Netuno server by indicating the application:

./netuno server app=myapp

Notice that the Netuno server is now automatically executing the frontend compilation commands.

All integrated into the same terminal.

Service that generates the PDF​

Since the Generate PDF button doesn't work yet, this is because the API service that generates the PDF itself still needs to be programmed.

To conclude, here's the code for the service that will be responsible for generating the PDF.

Note the previous code snippet for the Generate PDF button; we only need to add the service's URL to the button's href attribute.

Let's create the 📂 customer folder and the following file, pdf-export.js, in:

  • server/services/customer/pdf-export.js

Inside the 📂 server folder is where we develop the backend API.

Copy and paste the following code:

server/services/customer/pdf-export.js
_header.contentType('pdf')

const pdfDocument = _pdf.newDocument(_pdf.pageSize('A5'));

pdfDocument.add(
    _pdf.paragraph('Customers List:')
        .setFontSize(16)
        .setFontColor(_pdf.color("#1abc9c"))
)

const dbCustomers = _db.form('customer').all()

for (const dbCustomer of dbCustomers) {
    pdfDocument.add(
        _pdf.paragraph(dbCustomer.getString('nome'))
            .setFontSize(12)
            .setFontColor(_pdf.color("#748dae"))
    )
}

pdfDocument.close()

You can check the service is running by opening the following address in your browser:

Any execution errors will appear in the Netuno server terminal.

Now, the Generate PDF button on the dashboard works properly.

Conclusion​

This tutorial provided an overview of custom frontend development by modifying the dashboard, creating forms and fields, performing SQL queries on a database, and creating an API service on the backend.

We also demonstrated how to integrate frontend commands with the Netuno backend server in a single centralized terminal, speeding up development by avoiding scattered queries across multiple terminals.

Note how quickly a form was created to record and manipulate information in a database.

See how agile the development of API services on the backend is, without the need to restart the server for each code change, which is not typically the case with other technologies.

The Netuno platform is designed to accelerate and optimize full-stack development.

Continue exploring Netuno further and definitely speed up your development work.

Join our Discord server, follow us on social media, and watch tutorial videos on our YouTube channel. Links are at the end of this page.