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.
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.
Go into the the frontend/Home folder and run the npm commands:
npm install
npm run build
This will install and build your frontend project.
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.
Last updated
Was this helpful?