durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Chore/cleanup before open source (#55)

Browse Source 
* Chore: Cleanup

* Updated some urls to images and removed parts of documentation that is no longer valid

* Removal of some documentation that is no longer valid

* Removed PDF Export module

---------

Co-authored-by: Johan Olsson <johan@noodl.net>
This commit is contained in:
kotte
2024-01-15 10:28:53 +01:00
committed by GitHub
parent 656e5fc8d2
commit 05a7b2b290
36 changed files with 144 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
docs/guides/deploy/deploying-an-app-on-sandbox.md
View File

@@ -1,49 +0,0 @@
---
title: Deploy an App on the Sandbox domain
hide_title: true
---
# Deploy an App to the Sandbox domain, `*.sandbox.noodl.app`
## What you will learn in this guide
This guide will teach you how to deploy a Noodl App to the Noodl Sandbox, i.e the `sandbox.noodl.app` domain.
You can use this to share your Noodl App with other people.
## Overview
There are multiple ways for you to deploy Noodl Apps so other people can use them. The easiest one is to use the Noodl Sandbox deployment. The your app will get a public URL that ends with `.sandbox.noodl.app`.
The video below walks through all deployment options in Noodl, including Sandbox deploys:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/M97-89RiboE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Doing a Sandbox Deployment
Open the project you want to deploy. Then click the **Deploy** button on the top right.
<div className="ndl-image-with-background s">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/deploy-button.png)
</div>
In the popup that opens, you can select a subdomain name. Your URL will become `<subdomain>.noodl.app`. Note that some subdomains may be taken by other users, so be ready to come up with a unique name if that's the case.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/noodl-deploy-to-noodl-app-domain.png)
</div>
## Managing your Sandbox Deployments
Once you have deployed your app they will be available in the list of Sandbox Deployments.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/manage-deploys.png)
</div>
You can select any of the sandbox deploys and change which backend to use or to **Delete** the deploys.

95
docs/guides/deploy/deploying-to-custom-domain.md
View File

@@ -1,95 +0,0 @@
---
title: Deploying to Custom Domain
hide_title: true
---
# Deploying to your custom domain
## What you will learn in this guide
This guide will take you through the steps needed for deploying a Noodl app to your own custom domain. Note that the app is still hosted by Noodl, but you let your custom domain point to the app. If you want to host the backend and frontend yourself check out the [Using a self hosted backend](/docs/guides/deploy/using-an-external-backend) and [Hosting Frontend](/docs/guides/deploy/hosting-frontend).
:::note
To be able to follow this guide you must have custom domain feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
## Overview
The guide walks you through the following topics
- Acquiring a domain
- Deploying to your acquired custom domain
- Managing your custom domain deployments
You can also check out the video below that walks through all deployment options in Noodl, including deploying to a Custom Domain:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/M97-89RiboE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Acquiring your domain
The first thing you need to do is to acquire the domain, i.e. purchase it from a domain provider if you don't have it already. There are many different places where you can acquire a domain and they all work a little differently. The important thing is that you need to be able to configure the DNS records and especially set a [CNAME](https://en.wikipedia.org/wiki/CNAME_record) record. You will need this later.
## Deploying to you domain
Once you have acquired the domain, click the **Deploy application** icon in the top right corner.
<div className="ndl-image-with-background s">
![](/docs/guides/deploy/deploying-to-custom-domain/deploy-button.png)
</div>
Then select the **Custom Domains** tab.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains.png)
</div>
Click **Manage Domains**. This allows you to add a new custom domain.
<div className="ndl-image-with-background xl">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-2.png)
</div>
Enter the name of the domain you want to deploy to, including the subdomain. Note that Noodl does not support naked domains (e.g. `mydomain.com`) so you will have to add a subdomain, for example `www.`.
Click **Add Domain**. Noodl will now try to connect to the domain which will always fail the first time. You need to set up a CNAME record in the DNS on your domain providers side that matches Noodl.
Copy the value in the **Value** box (`proxy-ssl.noodl.cloud`). You will need to provide when you create the CNAME record on the domain side.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-3.png)
</div>
Create the CNAME record in the DNS at your domain provider. Once that's done, click "Verify Connection" to see if Noodl can coonect.
?> Note that it could take some time - up to several hours - for your domain provider to propertly update the DNS records so if Noodl cannot verify the domain, try again in a few minutes or hours.
Once the domain has been verified you will see the green **Connected** text.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-4.png)
</div>
Now your domain is available to deploy to. So close the **Manage Domains** popup.
You can now choose your newly added domain as a target. Make sure to also pick the backend you want to use in the deploy.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-5.png)
</div>
Press **Create Deploy** and your new deployment is ready.
## Managing your custom deployments
Once you have added your custom domain and deployed to it you can updated it whenever you like, delete it or update which backend it uses.

9
docs/guides/deploy/embedding.md
View File

@@ -29,7 +29,7 @@ To add an iframe to your HTML document, you can use the `<iframe>` tag with the
<iframe
width="560"
height="315"
src="https://example.sandbox.noodl.app/"
src="https://url.to.your.deployed.app/"
rameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
@@ -37,13 +37,14 @@ To add an iframe to your HTML document, you can use the `<iframe>` tag with the
```
In this example, the `<iframe>` tag has several attributes:
- `width` and `height`: Set the dimensions of the iframe.
- `src`: The URL of the Noodl sandbox to be embedded.
- `src`: The URL of your deployed Noodl app.
- `frameborder`: Set to "0" to remove the border around the iframe.
- `allow`: Specifies a list of features that are allowed within the iframe, such as accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, and picture-in-picture.
- `allowfullscreen`: Allows the iframe to go full-screen mode when the full-screen API is used.
This example demonstrates how to add an iframe to your HTML document to embed a Noodl sandbox. You can customize the attributes as needed to suit your specific use case or other types of content to be embedded using iframes.
This example demonstrates how to add an iframe to your HTML document to embed a deployed Noodl app. You can customize the attributes as needed to suit your specific use case or other types of content to be embedded using iframes.
## Micro Frontend
@@ -51,4 +52,4 @@ Micro Frontends is an architectural pattern that involves breaking down a fronte
The micro frontend approach allows for greater flexibility and scalability in frontend development, as each micro frontend can be developed and deployed independently, and can be composed to create the overall frontend application. This approach also allows for different teams to work on different parts of the front-end application, using different technologies.
If you are interested in hearing more, [contact us](https://www.noodl.net/community).
If you are interested in hearing more, [reach out to us in the community](https://www.noodl.net/community).

19
docs/guides/deploy/hosting-frontend.md
View File

@@ -2,25 +2,16 @@
title: Self Hosting your Noodl frontend
hide_title: true
---
# Self hosting your Noodl frontend
## What you will learn in this guide
In this guide you will learn how to **Self Host** by deploying your Noodl App frontend to a local folder and then host it on either Google Cloud Platform or AWS. This is needed if you want to host your Noodl App frontend in your own cloud infrastructure and with your own domain name.
:::note
**Self Hosting**<br/>Note: To be able to follow this guide you must have "Self Host" feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
## Overview
By default, Noodl will host you App (both backend and frontend), by deploying your app to a **sandbox.noodl.app** domain for free or using your own domain. See [this](/docs/guides/deploy/deploying-an-app-on-sandbox) guide for more information.
However, for various reasons, you may want to host your frontend on your own infrastructure. For this you will first deploy it locally and then upload it to your hosting provider of choice.
In this guide you will learn how to **Self Host** by deploying your Noodl App frontend to a local folder and then host it on either Google Cloud Platform or AWS.
## Deploying to Local Folder
By using the **Self Hosting** section in the Noodl deployment popup will save a version of your frontend to a folder on your local machine, this folder will contain everything needed and you can simply upload the content to your hosting service.
Open up the deployment popup in Noodl to save a version of your frontend to a folder on your local machine, this folder will contain everything needed and you can simply upload the content to your hosting service.
<div className="ndl-image-with-background l">
@@ -32,6 +23,6 @@ Make sure you pick the backend you want to use for the deploy.
## Hosting your Frontend at GCP or AWS
- **Google Cloud Platform** If you would like use GCP to host the frontend you can follow this [guide](https://cloud.google.com/storage/docs/hosting-static-website). There you will create a bucket, a load balancer and a CDN.
- **Google Cloud Platform** If you would like use GCP to host the frontend you can follow this [guide](https://cloud.google.com/storage/docs/hosting-static-website). There you will create a bucket, a load balancer and a CDN.
- **Amazon Web Services** If you prefer to use AWS you can watch this [video](https://www.youtube.com/watch?v=BpFKnPae1oY&ab_channel=AmazonWebServices) it will explain how to create an S3 bucket and how to route traffic using the AWS DNS service, Route 53.
- **Amazon Web Services** If you prefer to use AWS you can watch this [video](https://www.youtube.com/watch?v=BpFKnPae1oY&ab_channel=AmazonWebServices) it will explain how to create an S3 bucket and how to route traffic using the AWS DNS service, Route 53.

9
docs/guides/deploy/overview.md
View File

@@ -2,9 +2,12 @@
title: Deploying and hosting Noodl apps
hide_title: true
---
# Deploying and hosting Noodl apps
Noodl have it's own hosting infrastructure which makes it very easy to deploy Noodl app. You can also use your own custom domain to point to the app if you have one.
If you for some reason want to host the frontend and/or the backend on you own infrastructure that's also possible.
Noodl allows you to export your frontend and backend so that you can host it on your own servers.
### [Start learning about hosting and deployment of Noodl apps](/docs/guides/deploy/deploying-an-app-on-sandbox)
- [Learn about deploying the frontend](/docs/guides/deploy/hosting-frontend)
- [Learn about deploying the backend on AWS](/docs/guides/deploy/setting-up-backend-on-aws)
- [Learn about deploying the backend on GCP](/docs/guides/deploy/setting-up-backend-on-gcp)
- [Learn about deploying to iOS and Android](/docs/guides/deploy/deploying-to-ios-and-android)

30
docs/guides/deploy/setting-up-backend-on-aws.md
View File

@@ -39,7 +39,7 @@ You can choose if you want to manually control when you redeploy and instance. T
On the next screen you provide a **name** for your service and you can change settings for service. For the most part you can keep the standard settings but a few needs to be changed.
* **Port** The port of the application needs to be set to **3000**
- **Port** The port of the application needs to be set to **3000**
You also need to provide a few environment variables to the instance. You do this using the **Add environment variable** button.
@@ -51,15 +51,15 @@ You also need to provide a few environment variables to the instance. You do thi
The following variables are needed:
* **APP_ID** You can choose this yourself, you need to provide it in the Noodl editor when connecting to your backend.
* **MASTER_KEY** This you be a password that you need to keep safe. With this password you get full access to your backend, this is also needed to connect to your backend from Noodl.
* **DATABASE_URI** This is the database url that you got when setting up the MongoDB database in the previous step. This can also be a Postgres url.
- **APP_ID** You can choose this yourself, you need to provide it in the Noodl editor when connecting to your backend.
- **MASTER_KEY** This you be a password that you need to keep safe. With this password you get full access to your backend, this is also needed to connect to your backend from Noodl.
- **DATABASE_URI** This is the database url that you got when setting up the MongoDB database in the previous step. This can also be a Postgres url.
* **PUBLIC_SERVER_URL** (Optional) This is needed if you want to support file uploads and downloads, in that case you might need to go back here and update this environment variable after you have received the URL in the next step. This variable should be the public url where your clour services can be reached, starting with `https://`.
- **PUBLIC_SERVER_URL** (Optional) This is needed if you want to support file uploads and downloads, in that case you might need to go back here and update this environment variable after you have received the URL in the next step. This variable should be the public url where your clour services can be reached, starting with `https://`.
With that in place you can move on to reviewing your settings and deploying your service. It might take a few minutes to completely setup you new service.
Once the service is up and running the last step is to find the URL of the service. You can find it by navigating to the service details page. It will look something like this:
Once the service is up and running the last step is to find the URL of the service. You can find it by navigating to the service details page. It will look something like this:
<div className="ndl-image-with-background l">
@@ -67,21 +67,15 @@ Once the service is up and running the last step is to find the URL of the servi
</div>
With that URL, master key and app id in hand, [go back](/docs/guides/deploy/using-an-external-backend#connect-your-application-to-the-self-hosted-backend) to the self hosting guide.
# File storage
If you want to support file upload and download, you need to specify the **PUBLIC_SERVER_URL** environment variable as noted above. By default the files will be stored in the database of your application, but if you instead want to use an S3 bucket for storage you need to create a bucket, and policy, you can find instructions on that [here](http://docs.parseplatform.org/parse-server/guide/#configuring-s3adapter). Then specify these additional environment variables:
* **S3_ACCESS_KEY** The AWS access key for a user that has the required permissions. Required.
* **S3_SECRET_KEY** The AWS secret key for the user. Required.
* **S3_BUCKET** The name of your S3 bucket. Needs to be globally unique in all of S3. Required.
* **S3_REGION** (Optional) The AWS region to connect to. Default: ‘us-east-1’
* **S3_BUCKET_PREFIX** (Optional)Create all the files with the specified prefix added to the filename. Can be used to put all the files for an app in a folder with ‘folder/’.
* **S3_DIRECT_ACCESS** (Optional)Whether reads are going directly to S3 or proxied through your Parse Server. If set to true, files will be made publicly accessible, and reads will not be proxied. Default: false
- **S3_ACCESS_KEY** The AWS access key for a user that has the required permissions. Required.
- **S3_SECRET_KEY** The AWS secret key for the user. Required.
- **S3_BUCKET** The name of your S3 bucket. Needs to be globally unique in all of S3. Required.
- **S3_REGION** (Optional) The AWS region to connect to. Default: ‘us-east-1’
- **S3_BUCKET_PREFIX** (Optional)Create all the files with the specified prefix added to the filename. Can be used to put all the files for an app in a folder with ‘folder/’.
- **S3_DIRECT_ACCESS** (Optional)Whether reads are going directly to S3 or proxied through your Parse Server. If set to true, files will be made publicly accessible, and reads will not be proxied. Default: false

45
docs/guides/deploy/using-an-external-backend.md
View File

@@ -2,36 +2,33 @@
title: Using a self hosted backend
hide_title: true
---
# Using a self hosted backend
## What you will learn in this guide
This guide will let you create a self hosted backend with an external database. This is an alternative to using an **Noodl Hosted Cloud Services**. Some reasons why you might want to do this could be:
This guide will let you create a self hosted backend with an external database. This is an alternative to using a built on **Noodl Cloud Service**. Some reasons why you might want to do this could be:
- You want to host your own database, maybe to ensure where data is stored or other privacy reasons.
- You want to host your own backend on a cloud service such as AWS or Google Cloud Platform.
:::note
**Self Hosting**<br/>Note: To be able to follow this guide you must have "Self Host" feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
- You want to host your own database, maybe to ensure where data is stored or other privacy reasons.
- You want to host your own backend on a cloud service such as AWS or Google Cloud Platform.
## Overview
We will go through the follwing steps
- Set up a Database cluster on MongoDB Atlas (any MongoDB or Postgres database is supported)
- Spin up a container with the Noodl backend docker image.
- Connect to the self hosted backend from your Noodl project.
- Set up a Database cluster on MongoDB Atlas (any MongoDB or Postgres database is supported)
- Spin up a container with the Noodl backend docker image.
- Connect to the self hosted backend from your Noodl project.
## The different parts of a Noodl App
As a background it's good to know that a Noodl App consists of three parts:
- **The database** All Noodl applications must be backed by a database, you can use either a MongoDB or Postgres compatible database. This is where users and other records are stored. Nodes like **Query Records** access the database via the backend web service.
- **The database** All Noodl applications must be backed by a database, you can use either a MongoDB or Postgres compatible database. This is where users and other records are stored. Nodes like **Query Records** access the database via the backend web service.
- **The backend service** This is the Noodl backend service that is provided via a Docker image and an instance can be started on most cloud providers. The Noodl backend is based on and compatable with the [Parse Platform](https://parseplatform.org) which is a great choice for a backend service. A solid open source project with an active foundation supporting many of the critical functions needed.
- **The backend service** This is the Noodl backend service that is provided via a Docker image and an instance can be started on most cloud providers. The Noodl backend is based on and compatable with the [Parse Platform](https://parseplatform.org) which is a great choice for a backend service. A solid open source project with an active foundation supporting many of the critical functions needed.
- **Static frontend hosting** Noodl applications are SPAs (Single Page Applications) and need a place that serves the application frontend created when you deploy your application from Noodl. You can use a **Noodl hosted** frontend, with a custom domain, together with a self hosted backend, or you can host the frontend yourself as well.
- **Static frontend hosting** Noodl applications are SPAs (Single Page Applications) and need a place that serves the application frontend created when you deploy your application from Noodl.
This guide will look at setting up your own self hosted **Database** and **Backend**.
@@ -51,7 +48,6 @@ You can start by choosing the free plan (you can always upgrade later) and then
Once your database is up and running you need to get the connection details for the next step. First you need to obtain the password of the **Admin** user. You will find your database users under the **Database Access** section.
<div className="ndl-image-with-background m">
![](/docs/guides/deploy/using-an-external-backend/atlas-3.png)
@@ -90,7 +86,7 @@ Now you need to copy and keep the connection URI shown below. It will look somet
mongodb+srv://Admin:<password>@cluster0.xxxxxxx.mongodb.net/?retryWrites=true&w=majority
```
You need to replace the ```<password>``` with the **Admin** password you generated before. Also, insert the name of your database in the url, you can pick any name, let's call it `noodldb`, your final URL should look something like this:
You need to replace the `<password>` with the **Admin** password you generated before. Also, insert the name of your database in the url, you can pick any name, let's call it `noodldb`, your final URL should look something like this:
```bash
mongodb+srv://Admin:<password>@cluster0.xxxxxxx.mongodb.net/noodldb?retryWrites=true&w=majority
@@ -102,10 +98,9 @@ Keep this URI safe as it will have full access to your database.
Next up we will deploy an instance of the Noodl backend service that we will point our application to. We provide guides for setting up Noodl on Amazon Web Services or Google Cloud Platform, follow the links below and set up the container. When you are ready you can proceed to the **Connect your application to the self hosted backend** below.
* **Setting up a backend on AWS** Make sure you have an AWS account created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-aws).
* **Setting up a backend on GCP** Make sure you have account on Google Cloud Platform created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-gcp).
- **Setting up a backend on AWS** Make sure you have an AWS account created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-aws).
- **Setting up a backend on GCP** Make sure you have account on Google Cloud Platform created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-gcp).
### Connect your application to the self hosted backend
@@ -135,17 +130,17 @@ Create a new cloud service. Make sure the **Self Hosted** checkbox is checked:
Fill out the information
- **Name** - Any name you want. This will be the name of the backend in the list of backends.
- **Description** - Some descriptive text of the backend.
- **Endpoint** - This is the url to the backend service you have created in the previous step.
- **Application id** - This is the application id that you provided when setting up the backend service in the previous step. It's simply and identifier of your own choosing.
- **Masterkey** - This is the master key to the backend service you created in the previous step. It is needed by the editor to access the database for the dashboard, query nodes etc. This is stored locally and encrypted. You need to keep this safe as with it you have full access to your backend and database.
- **Name** - Any name you want. This will be the name of the backend in the list of backends.
- **Description** - Some descriptive text of the backend.
- **Endpoint** - This is the url to the backend service you have created in the previous step.
- **Application id** - This is the application id that you provided when setting up the backend service in the previous step. It's simply and identifier of your own choosing.
- **Masterkey** - This is the master key to the backend service you created in the previous step. It is needed by the editor to access the database for the dashboard, query nodes etc. This is stored locally and encrypted. You need to keep this safe as with it you have full access to your backend and database.
You can make some quick tests, for example opening the **Dashboard** and create a **Class** to see that it works. That's it, now you have a self hosted Noodl cloud services up and running.
## Migrating from a Noodl hosted cloud service
## Migrating from a Noodl cloud service
If you are migrating from a Noodl hosted cloud service we can provide you with a database dump that you can use to restore your new database to, [email support to request](mailto:support@noodl.net). Once you have the backup file you need to install the MongoDB database tools, you can find instructions [here](https://www.mongodb.com/docs/database-tools/installation/installation/).
If you are migrating from a Noodl cloud service we can provide you with a database dump that you can use to restore your new database to, [email support to request](mailto:support@noodl.net). Once you have the backup file you need to install the MongoDB database tools, you can find instructions [here](https://www.mongodb.com/docs/database-tools/installation/installation/).
Then you will use the following command to migrate your data: