Exporting and deploying my frontend code

In this FAQ we explain how you can export your frontend code and connect this to a Dittofi backend that is run inside Dittofi's hosting.

Dittofi is a no-code, visual app builder that sits behind powerful automatic code generation technology. This means that behind each section of visual app development, there is real, high quality code being automatically generated. The languages that we generate are React / Redux on the frontend and Google GO on the backend.

In this FAQ we explain how you can export your frontend code and connect this to a Dittofi backend that is run inside either Dittofi's hosting, a third party backend or backend code that has been exported from Dittofi.

To perform these steps you need to have knowledge of:

• React

• npm

• AWS, GCP, Microsoft Azure or other hosing provider

• Nginx or other web server

Part 1. Exporting the code

To export your apps code, locate the app inside your workspace and click on the downward facing arrow under your app. Next choose the option for "Get App Code".

Next, you have two options. The simplest option is to "Download code".

Part 2. Building and installing your frontend code

Once you have downloaded your code, this will come in two folders marked frontend and backend.

The frontend code is a React code base that is inside your frontend code folder.

PLEASE NOTE

The code comes with a package.json allowing you to install and build your code using npm. Please note that npm is a standard build process for React based applications. If you are unfamiliar with npm or React then we recommend looking at:

• The official React website: https://reactjs.org/docs/create-a-new-react-app.html where you will see a simple example of creating and building an app using npm in an almost identical way to how you would install and build your Dittofi code base.
• The official npm website: https://docs.npmjs.com/getting-started where you will see information regarding install npm.

Go into the the frontend/Home folder and run the npm commands:

1. npm install

2. npm run build

This will install and build your frontend project.

Note, you may need to update the dependencies in your React code depending on your npm version.

Part 3. Updating the base URL

When running the Dittofi frontend code in the Dittofi hosted environment the frontend code will by default run endpoints at the URL of your app.

When exporting the code you will however need to update the URL to explicitly point at your apps backend.

To do this, open the file restAPI inside frontend/Home/src/api/

and update the variable baseUrl. This is on line 9 of the file restApi.js.

// // Line 9 in the file frontend/Home/src/api/restApi.js
baseUrl = baseUrl ? baseUrl : `${protocol}//${hostname}:${port}/1487/iapi`;

You can now point the baseUrl at any server that is hosting your Dittofi backend. The base URL of your Dittofi test app for example can be read from the Url inside any Dittofi Endpoint. See an example of this highlighted below.

Any other baseUrl that you might have, for example, your production baseUrl can be found under the Publish button dropdown.

Remember to rebuild your exported code once you've exported and modified it.

Step 4. Deploying your frontend code

Once you have built your code e.g. AWS, GCP, Microsoft Azure and so on. You can also host your code with a server provider or run the code locally.

NOTE

Depending on the hosting provider that you choose, the steps for each will be different.

Each hosting provider will provide information and recommendations on how to deploy web sites and web applications using their service. For example, for see Amazon Webservice's recommendations for deploying websites and web applications @ https://aws.amazon.com/websites/.