durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 14:52: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

23
docs/guides/cloud-data/creating-a-backend.md
View File

@@ -2,6 +2,7 @@
title: Creating a Cloud Service
hide_title: true
---
# Creating a Cloud Service for your project
<div className="ndl-image-with-background xl">
@@ -18,22 +19,20 @@ This guide will take you through the process of creating a **Cloud Service** for
We will go through the following steps in this guide:
- Creating a Cloud Services
- Selecting a Cloud Services for you project
- Inspect the **Cloud Services Database** using the **Dashboard**
- Create and switch to a new **Cloud Service**
- Creating a Cloud Services
- Selecting a Cloud Services for you project
- Inspect the **Cloud Services Database** using the **Dashboard**
- Create and switch to a new **Cloud Service**
## What is a Cloud Service and when do you need it?
A **Cloud Service** is a piece of software running in the cloud that helps serving your Noodl app with data and cloud functionality. The main reason for using a **Cloud Service** in your project is to use its **Database**. For example the nodes [Record](/nodes/data/cloud-data/record) and [Query Records](/nodes/data/cloud-data/query-records) can only be used if you have a **Cloud Service** active for you project. Also you need them for running [Cloud Functions](/docs/guides/cloud-logic/introduction).
Each **Cloud Service** has a dedicated database which means you might want to have multiple **Cloud Services** available for your project, for example one for your test data and one for your production data. Only one **Cloud Service** can be active for your project at one time, but when you [Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) you can choose which service to use for the deploy.
Each **Cloud Service** has a dedicated database which means you might want to have multiple **Cloud Services** available for your project, for example one for your test data and one for your production data. Only one **Cloud Service** can be active for your project at one time, but when you deploy your project you can choose which service to use for the deploy.
Also note that **Cloud Services** are shared within a workspace, i.e. all projects in a workspace have access to the all **Cloud Services**.
Also note that **Cloud Services** are accessible by all your Noodl projects.
### Noold hosted vs Self Hosted Cloud Services
In Noodl there are two types of **Cloud Services**, **Noodl Hosted (default)** and **Self Hosted**. The **Noodl Hosted** are easiest to use, since Noodl can create those for you in a few clicks. **Self Hosted Cloud Services** are services that you set up and host yourself, check out [this guide](/docs/guides/deploy/using-an-external-backend), In this guide we will focus on **Noodl Hosted Cloud Services**.
### Creating a cloud service
To add a new Cloud Service click the **Cloud Services** tab icon in the side bar.
@@ -110,9 +109,3 @@ Now you can switch back and forth between your two cloud services. But most ofte
## Deploying with a cloud service
When you deploy you application you pick which cloud service to use for the deploy. So you can for instance have one test deploy to sandbox that is using your development or testing cloud service, and another using your custom domain that use your production cloud service.
<div className="ndl-image-with-background l">
![](/docs/guides/cloud-data/creating-a-backend/deploy.png)
</div>

18
docs/guides/cloud-logic/introduction.md
View File

@@ -87,7 +87,7 @@ When your **Cloud Function** is in place you will need to call it from your fron
</div>
Then you can hook up the node. You call the function by sending a signal to the <span class="ndl-signal">Call</span> signal input.
Then you can hook up the node. You call the function by sending a signal to the <span class="ndl-signal">Call</span> signal input.
<div className="ndl-image-with-background xl">
@@ -102,19 +102,3 @@ When your cloud function has completed running it will result in either a <span
## Deploying
This is the basics of cloud function, keep reading the guides in this section to learn more about the details and different use cases. Finally you will want to deploy your application, and for the cloud functions to work properly you need to make sure you have a cloud services selected when deploying.
<div className="ndl-image-with-background l">
![](/docs/guides/cloud-logic/introduction/cloud-functions-deploy.png)
</div>

21
docs/guides/collaboration/version-control.md
View File

@@ -14,27 +14,18 @@ Version control has three main use cases:
</div>
Noodl uses [Git](https://git-scm.com) as the underlying version control system. The project folder is a git repository.
Users comfortable with git can use external git clients to view their Noodl projects.
Noodl uses [Git](https://git-scm.com) as the underlying version control system. The project folder is a Git repository.
Users comfortable with Git can use external git clients to view their Noodl projects.
## Enabling version control
Projects will automatically get a version control repository in the cloud. You can use it locally without sending data to the cloud, but to collaborate you have to push your changes, which will upload the project to Noodl's cloud.
Noodl projects will automatically initiate a Git project in the Project Folder. To activate the Version Control sidepanel you will need to push the Project Folder to an external Git repo, with any Git provider of your choice. This can be done through the terminal, or with a Git client like [Github Desktop](https://desktop.github.com/).
:::danger
A project that isn't pushed isn't available to collaborators or if you log into another computer.
Same goes for the changes you make, you have to push them to upload to the cloud.
:::
Read more about how to push your project below.
Any project collaborators will have to clone the project from the repo, and then open the downloaded Project Folder in Noodl.
## The version control panel
The version control panel is where you perform all actions related to version control.
This includes actions such as pushing new changes to your collaborators,
pulling down the latest version, seeing differences between versions, merging branches, and more.
The version control panel is where you perform all actions related to version control. This includes actions such as pushing new changes to your collaborators, pulling the latest version, seeing differences between versions, merging branches, and more.
<div className="ndl-image-with-background">
@@ -44,7 +35,7 @@ pulling down the latest version, seeing differences between versions, merging br
## Commiting your changes
When there are changes in your project and you can commit your changes to the version control system. This creates a commit, which is a snapshot of the state of your entire project. This can then be pushed to share your changes with collaborators (or yourself if you work on multiple computers).
When there are changes in your project you can commit them to the version control system. This creates a commit, which is a snapshot of the current state of your entire project. This can then be pushed to share your changes with collaborators (or yourself if you work on multiple computers).
<div className="ndl-image-with-background">

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:

4
docs/guides/user-interfaces/figma-plugin.md
View File

@@ -50,11 +50,11 @@ Here's the same node duplicated in Noodl, with a different source and border rad
All text styles used by exported text layers will automatically be imported.
?> Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
<iframe width="560" height="315" style={{margin:'0 auto',display:'block'}} src="https://www.youtube-nocookie.com/embed/sZm0eBZvLaM" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe><br/>
?> Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
## Export complex shapes

14
docs/guides/user-interfaces/layout.mdx
View File

@@ -32,7 +32,7 @@ The **Group** node is the most central node for doing a layout. It's the fundame
**Group** nodes are arranged in a hierarchy and can have other nodes as children. It controls the layout of its children and there are a number of properties that can be used to specify how the children of a **Group** node will be laid out. You can copy the various node examples used in this guide by clicking "Copy nodes" and then pasting into a Noodl project.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/groups.png" />
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/groups.png")} />
<CopyToClipboardButton
json={{
nodes: [
@@ -113,7 +113,7 @@ Here's an example you can copy into Noodl. Click the "Copy nodes" button next to
Change the **Layout** of the top level node to see how the direction of the child nodes change.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/layout-dir.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/layout-dir.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -223,11 +223,11 @@ You can copy the nodes below to an empty component in Noodl. The result is shown
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-nodes.png"
src={useBaseUrl("docs/guides/user-interfaces/layout/content-size-nodes.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-example.png"
src={useBaseUrl("/docs/guides/user-interfaces/layout/content-size-example.png")}
className="ndl-image small"
></img>
<CopyToClipboardButton
@@ -368,7 +368,7 @@ You can use the alignment controls to pin the children to a specific edge, or ho
A Group can control the alignment of its children using the _Align and justify content_ property.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/alignment.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/alignment.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -418,7 +418,7 @@ Children can use the _alignment_ controls to override the parent's alignment set
Children can use margins to offset the position from how it's aligned.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/align.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/align.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -490,7 +490,7 @@ You can choose any of these options:
Here's an example of a horizontal layout with **Multi Line Wrap** set to `On`.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/multi-line.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/multi-line.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [

2
docs/guides/user-interfaces/responsive-design.mdx
View File

@@ -1108,6 +1108,6 @@ It features the following options in the property panel:
## Get building!
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that we havent touched upon here and feel like sharing it, feel free to hop on in to on our [Discord server](https://discord.com/invite/23xU2hYrSJ). We are always happy to hear your ideas and feedback.
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that havent been touched upon here and feel like sharing it, feel free to hop on in on the [Discord server](https://discord.com/invite/23xU2hYrSJ). The community is always happy to hear your ideas and feedback.
Happy Noodling!

34
docs/guides/user-interfaces/states.mdx
View File

@@ -24,7 +24,7 @@ First let's start with the basic visual nodes that make up the switch. This is s
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/switch-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/switch-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -82,11 +82,11 @@ Below you can see the styling of the two nodes. The first image shows the Circle
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/style-props1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props1.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/style-props2.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props2.png")}
className="ndl-image small"
></img>
</div>
@@ -99,7 +99,7 @@ Next, create the two states.
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/create-states.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/create-states.gif")}
className="ndl-image med"
></img>
</div>
@@ -110,7 +110,7 @@ We will also specify **Values** for each of our states. In the same way you adde
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/values-1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/values-1.png")}
className="ndl-image med"
></img>
</div>
@@ -119,11 +119,11 @@ Specify the value for each state. The X position should be **40** when the switc
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/on-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/on-values.png")}
className="ndl-image med"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/off-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/off-values.png")}
className="ndl-image med"
></img>
</div>
@@ -131,7 +131,7 @@ Specify the value for each state. The X position should be **40** when the switc
Connect the **Knob X** output of the **States** node to the **Pos X** input of the **Circle** node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/knob-x-connected.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/knob-x-connected.png")}></img>
</div>
As you can see the **States** node will get an output corresponding to each value that is defined under **Values**. This output will transition to the specified values when the **States** node changes state. One way to see the different states and transitions is to play with the **State** dropdown menu in the properties panel.
@@ -146,7 +146,7 @@ You can connect the outputs of the **States** node to anything you like. In this
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/color-type.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/color-type.png")}
className="ndl-image med"
></img>
</div>
@@ -154,7 +154,7 @@ You can connect the outputs of the **States** node to anything you like. In this
Finally, we can make the **States** node toggle state when the switch **Group** node is clicked. This is achieved by connecting the **Click** signal from the **Group** to the **Toggle** input of the **States** node. This will make the **States** node jump to the next state in the list and when the last one is reached it will jump to the first one again. In this case we only have two states, so it will toggle between **On** and **Off**.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/click-toggle.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/click-toggle.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -249,7 +249,7 @@ For _number_ and _color_ types the **States** node will try to smoothly transiti
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -335,7 +335,7 @@ This simple graph has a **States** node that controls the hover state of a **Gro
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx1.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx1.gif")}
className="ndl-image small"
></img>
</div>
@@ -344,7 +344,7 @@ Both transitions (color and size) have the default transition curves. You can ed
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/transition-props.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/transition-props.png")}
className="ndl-image med"
></img>
</div>
@@ -355,7 +355,7 @@ In this case we want to change the curve for the **Size** transition. You can ed
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/change-size-curve.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/change-size-curve.gif")}
className="ndl-image med"
></img>
</div>
@@ -369,7 +369,7 @@ You can play with different settings for the curves and see them working when yo
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx2.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx2.gif")}
className="ndl-image small"
></img>
</div>
@@ -379,7 +379,7 @@ You can play with different settings for the curves and see them working when yo
You can also connect several **States** nodes together to create more complex types of animations. In the node graph below we have a second **States** node that expands the **Group** node (changes the width). The second **States** node labeled **Expand** changes the width between the states **Yes** and **No**. The neat thing is that it is triggered when the first states node (the hover states) has reached the **Yes** state. It is returned to **No** when the mouse leaves (the hover end), just like the first node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/chaining-states.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/chaining-states.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -517,7 +517,7 @@ This will result in the behaviour shown below. As you can see the first **States
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx3.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx3.gif")}
className="ndl-image small"
></img>
</div>