mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
49
docs/guides/deploy/deploying-an-app-on-sandbox.md
Normal file
49
docs/guides/deploy/deploying-an-app-on-sandbox.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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
Normal file
95
docs/guides/deploy/deploying-to-custom-domain.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
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">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then select the **Custom Domains** tab.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Click **Manage Domains**. This allows you to add a new custom domain.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
30
docs/guides/deploy/deploying-to-ios-and-android.md
Normal file
30
docs/guides/deploy/deploying-to-ios-and-android.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Deploying to iOS and Android
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Deploying to iOS and Android
|
||||
|
||||
:::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).
|
||||
:::
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This video will take you through the process of deploying a Noodl app as a native app using [Capacitor](https://capacitorjs.com/).
|
||||
|
||||
## Overview
|
||||
|
||||
The video walks you through the following topics:
|
||||
|
||||
- Introduction to the project
|
||||
- Prerequisites
|
||||
- Installing Capacitor and initializing a Capacitor project
|
||||
- Deploying your Noodl project
|
||||
- Building a native Android app
|
||||
- Build an iOS app
|
||||
- Adding custom app icon
|
||||
|
||||
## Video
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/W44hTg8vL_g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
54
docs/guides/deploy/embedding.md
Normal file
54
docs/guides/deploy/embedding.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Embedding / iframe / Micro Frontend
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Embedding / iframe / Micro Frontend
|
||||
|
||||
Noodl is a powerful tool for creating iframe and micro frontends.
|
||||
|
||||
Micro Frontend, iframe, and embedding are all techniques used in web development for integrating different components or applications into a single web page. However, they have distinct approaches and use cases.
|
||||
|
||||
## Embedding
|
||||
|
||||
Embedding is a more general term that refers to the process of including one piece of content within another, usually referring to the iframe technique.
|
||||
|
||||
### Embedding inside a Noodl app
|
||||
|
||||
If you are looking to embed other websites (example youtube) into Noodl, have a look at the [Custom HTML module](https://docs.noodl.net/2.9/library/modules/custom-html/).
|
||||
|
||||
## iframe
|
||||
|
||||
An iframe (inline frame) is an HTML element that allows you to embed another HTML document within a parent HTML document. By using an iframe, you can display content from another website or application within your web page without affecting the main page's layout or styling. This is useful for embedding third-party content like maps, videos, or widgets. However, iframes have some limitations, such as security risks, lack of responsiveness, and difficulty in communication between parents and iframe content.
|
||||
|
||||
### Add an iframe to a website
|
||||
|
||||
To add an iframe to your HTML document, you can use the `<iframe>` tag with the `src` attribute specifying the URL of the content you want to embed. Here's an example:
|
||||
|
||||
```html
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://example.sandbox.noodl.app/"
|
||||
rameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
```
|
||||
|
||||
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.
|
||||
- `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.
|
||||
|
||||
## Micro Frontend
|
||||
|
||||
Micro Frontends is an architectural pattern that involves breaking down a frontend application into smaller, more manageable, and independent parts, called micro frontends. Each micro frontend is a self-contained unit of the frontend code that is responsible for a specific set of features or functionality.
|
||||
|
||||
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).
|
||||
26
docs/guides/deploy/favicon.md
Normal file
26
docs/guides/deploy/favicon.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: How to add a Favicon?
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# How to add a Favicon?
|
||||
|
||||
A favicon is a small image displayed next to the page title in the browser tab.
|
||||
|
||||
:::tip
|
||||
|
||||
A favicon is a small image, so it should be a simple image with high contrast.
|
||||
|
||||
:::
|
||||
|
||||
Firstly add your favicon to the project folder,
|
||||
for example `favicon.ico` in this example.
|
||||
|
||||
This can be done by either dragging the favicon into the project or opening the folder where the project is saved.
|
||||
|
||||
Next, add this to the **Head Code** in project settings:
|
||||
```html
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
```
|
||||
|
||||
Your browser tab should now display your favicon image to the left of the page title.
|
||||
37
docs/guides/deploy/hosting-frontend.md
Normal file
37
docs/guides/deploy/hosting-frontend.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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.
|
||||
|
||||
- **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.
|
||||
10
docs/guides/deploy/overview.md
Normal file
10
docs/guides/deploy/overview.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
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.
|
||||
|
||||
### [Start learning about hosting and deployment of Noodl apps](/docs/guides/deploy/deploying-an-app-on-sandbox)
|
||||
47
docs/guides/deploy/project-structure.md
Normal file
47
docs/guides/deploy/project-structure.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Project Structure
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Project Structure
|
||||
|
||||
You can find the project folders at this path:
|
||||
|
||||
Windows Path:
|
||||
```
|
||||
%AppData%\Roaming\Noodl\projects
|
||||
```
|
||||
|
||||
MacOS Path:
|
||||
```
|
||||
~/Library/Application Support/Noodl/projects
|
||||
```
|
||||
|
||||
You can also open the project via this Button inside Noodl, in the project settings.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## What is deployed?
|
||||
|
||||
All files in the project folder is deployed to the frontend with a few exceptions.
|
||||
|
||||
List of a few files that are ignored:
|
||||
```
|
||||
.gitattributes
|
||||
.gitignore
|
||||
project.json
|
||||
```
|
||||
|
||||
List of a few folders that are ignored:
|
||||
```
|
||||
.git/
|
||||
.noodl/
|
||||
```
|
||||
|
||||
_These lists might not be complete._
|
||||
|
||||
When deploying the app Noodl will also add a few new files for example React library.
|
||||
94
docs/guides/deploy/pwa.md
Normal file
94
docs/guides/deploy/pwa.md
Normal file
@@ -0,0 +1,94 @@
|
||||
# Progressive Web App
|
||||
|
||||
A Progressive Web App (PWA) is a type of web application that combines the best features of both web and native mobile applications. It delivers a fast, reliable, and engaging user experience across different devices and platforms, without the need to install an app from an app store. PWAs use modern web technologies to provide app-like functionality, such as offline access, push notifications, and access to device hardware.
|
||||
|
||||
As of today (Noodl 2.8.3) there are no built-in features to make it **easier** to work with Progressive Web Apps in Noodl.
|
||||
If you are interested in hearing more, [contact us](https://www.noodl.net/community).
|
||||
|
||||
## Key characteristics
|
||||
|
||||
Here are some of the key characteristics of Progressive Web Apps.
|
||||
|
||||
### Connectivity independence
|
||||
|
||||
One of the key features of PWAs is their ability to work offline or with poor network conditions. This is achieved through caching strategies implemented using service workers, which store assets and data locally on the user's device.
|
||||
|
||||
Service workers are one of the ways to achieve this. JavaScript files that run in the background, separate from the main browser thread. They enable core PWA features like offline functionality, caching, background synchronization, and push notifications. Service workers act as a proxy between the web app and the network, allowing developers to control how network requests are handled and implement efficient caching strategies.
|
||||
|
||||
### Fast and reliable performance
|
||||
|
||||
They can work offline or with poor network conditions, using cached data and assets to provide a functional user experience.
|
||||
PWAs use caching and background data synchronization to ensure a smooth and fast user experience.
|
||||
|
||||
Web workers are a powerful tool for enhancing web application performance. They execute JavaScript code in the background, separate from the main browser thread, allowing computationally intensive tasks to be offloaded without affecting the responsiveness of the user interface. Web workers communicate with the main thread using a messaging system, ensuring seamless integration with the rest of the application. By making it possible to run complex operations in parallel, web workers significantly improve the overall user experience, particularly in CPU-demanding applications.
|
||||
|
||||
There is a module built to work with Web Workers in Noodl, it is quite technical, and it can be found here [Web Worker Module](https://github.com/noodlapp/modules/tree/main/modules/web-worker).
|
||||
|
||||
### Installable
|
||||
|
||||
With Progressive Web Apps you can add your Noodl app to a device's home screen, similar to how native apps appear. Installing a PWA creates a shortcut and allows you to access the web app directly without needing to open a browser and navigate to the app's URL.
|
||||
|
||||
The installation process for PWAs is relatively simple and does not require downloading from an app store. Once a PWA meets certain criteria (e.g., having a web app manifest and being served over HTTPS), browsers may prompt users to install the PWA or provide an option to do so manually.
|
||||
|
||||
Once installed, the PWA can be launched from the home screen, app drawer, or any other location where native apps can be accessed. The PWA will open in a standalone window, without the typical browser interface elements, making it feel more like a native app.
|
||||
|
||||
## How to create a PWA?
|
||||
|
||||
### Creating the Web App Manifest
|
||||
|
||||
The web app manifest is a JSON file that provides metadata about the PWA, such as its name, icons, display settings, and preferred orientation. This information allows the PWA to be installed on a device's home screen with a custom icon and launch experience, making it feel more like a native app.
|
||||
|
||||
1. Create a manifest.json file and include it in your Noodl apps [project directory](/docs/guides/deploy/project-structure/).
|
||||
|
||||
2. Open the manifest.json file and add the basic properties required for your web app.
|
||||
|
||||
Here's a simple example:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "My PWA",
|
||||
"short_name": "PWA",
|
||||
"description": "A sample Progressive Web App",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#000000"
|
||||
}
|
||||
```
|
||||
|
||||
Here's a brief explanation of each property:
|
||||
|
||||
- `name`: The full name of your Progressive Web App.
|
||||
- `short_name`: A shorter name for your PWA, used when there's limited space (e.g., on the home screen).
|
||||
- `description`: A brief description of your PWA.
|
||||
- `start_url`: The URL that the PWA should open when launched.
|
||||
- `display`: The preferred display mode for the PWA. "standalone" is the most app-like experience, without browser interface elements.
|
||||
- `background_color`: The background color of the
|
||||
|
||||
3. Make sure to reference it in your Head Code which can be found under the Project Settings, using a link tag:
|
||||
|
||||
```html
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
```
|
||||
|
||||
4. Deploy your application and you are now using the basic functionalities of Progressive Web Apps.
|
||||
|
||||
### Verify Web App Manifest on a Phone
|
||||
|
||||
Now when you have installed the manifest file, there are different ways to test it.
|
||||
This is one of the ways it can be tested on a phone by following these steps:
|
||||
|
||||
1. Open the web app on your phone's browser using by going to your Noodl app URL.
|
||||
|
||||
2. Add the web app to your phone's home screen:
|
||||
|
||||
- **Android (Chrome)**: Tap the vertical ellipsis (⋮) in the top-right corner of the browser, then select "Add to Home screen" or "Install App" from the menu. Confirm the action by tapping "Add" or "Install" when prompted.
|
||||
|
||||
- **iOS (Safari)**: Tap the "Share" icon at the bottom of the browser (a square with an arrow pointing upwards), then scroll down and select "Add to Home Screen." Confirm by tapping "Add" in the top-right corner.
|
||||
|
||||
3. Close your browser and find the app icon on your phone's home screen.
|
||||
|
||||
4. Tap the app icon to launch the PWA. It should open in a standalone window without the browser interface elements, providing an app-like experience.
|
||||
|
||||
Please note that this method only checks if your web app can be added to the home screen and launched like a PWA. It doesn't evaluate the full PWA functionality or features such as offline support, push notifications or performance optimizations.
|
||||
To thoroughly test your PWA, you should look at using Lighthouse in Chrome Developer Tools.
|
||||
87
docs/guides/deploy/setting-up-backend-on-aws.md
Normal file
87
docs/guides/deploy/setting-up-backend-on-aws.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: Setting up a backend on Amazon Web Services
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Setting up a backend on Amazon Web Services
|
||||
|
||||
This guide will cover how to start up a Noodl backend on AWS using the Noodl backend docker image. You will need an AWS account setup. The service you will be using is called **App Runner**. Start by going to the console for that service.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
There you can create a new service.
|
||||
|
||||
<div className="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
When setting up the new service you need to specify that the image is to be fetched from the container registry.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The image URL to use is:
|
||||
|
||||
```bash
|
||||
public.ecr.aws/noodl/noodl-self-hosted-cloud-services:latest
|
||||
```
|
||||
|
||||
You can choose if you want to manually control when you redeploy and instance. This is needed if the Noodl backend image is updated and you want to apply the updates to your service. You can also choose to automatically track changes. When you are done click **Next**.
|
||||
|
||||
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**
|
||||
|
||||
You also need to provide a few environment variables to the instance. You do this using the **Add environment variable** button.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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.
|
||||
|
||||
* **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:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
84
docs/guides/deploy/setting-up-backend-on-gcp.md
Normal file
84
docs/guides/deploy/setting-up-backend-on-gcp.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
title: Setting up a backend on Google Cloud Platform
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Setting up a backend on Google Cloud Platform
|
||||
|
||||
This guide will cover how to start up a Noodl backend on GCP using the Noodl backend docker image. You will need a GCP account setup. The service you will be using is called **Cloud Run**. Start by going to the console for that service.
|
||||
|
||||
<div className="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
There you can create a new service. Find the button **Create Service** at the top.
|
||||
|
||||
When setting up the new service you need provide the url to the Noodl backend docker image.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The image URL to use is:
|
||||
|
||||
```bash
|
||||
gcr.io/noodlapp/noodl-self-hosted-cloud-services:latest
|
||||
```
|
||||
|
||||
Another important setting is making sure that unauthenticated requests can be handled by your new service.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
For the most part you can keep the standard settings but a few needs to be changed. These can be found by expanding the **Container, Connections, Security** section.
|
||||
|
||||
* **Continer 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 Variable** button.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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 uri that you got when setting up the MongoDB database in the previous step. This can also be a Postgres uri.
|
||||
|
||||
* **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 create your new service, hit the **Create** button.
|
||||
|
||||
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.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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 a GCS bucket for storage you can provide the following environment variables.
|
||||
|
||||
* **GCP_PROJECT_ID** The project ID from the Google Developer’s Console. Required.
|
||||
* **GCS_BUCKET** The name of your GCS bucket. Required.
|
||||
* **GCP_CLIENT_EMAIL** The client email of the service account with permissions to the bucket.
|
||||
* **GCP_PRIVATE_KEY** The private key associated with the client email for the servive account with permissions to the bucket.
|
||||
* **GCS_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/’.
|
||||
* **GCS_DIRECT_ACCESS** (Optional) Whether reads are going directly to GCS or proxied through your Parse Server. Default: false
|
||||
|
||||
|
||||
|
||||
154
docs/guides/deploy/using-an-external-backend.md
Normal file
154
docs/guides/deploy/using-an-external-backend.md
Normal file
@@ -0,0 +1,154 @@
|
||||
---
|
||||
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:
|
||||
|
||||
- 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).
|
||||
:::
|
||||
|
||||
## 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.
|
||||
|
||||
## 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 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.
|
||||
|
||||
This guide will look at setting up your own self hosted **Database** and **Backend**.
|
||||
|
||||
## The Database
|
||||
|
||||
You can choose any MongoDB or Postgres compatible database, for this guide we recommend using [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) as it provides a free tier and you can choose to host it on GCP, AWS or Azure. You should always try to host your database using the same cloud provider as the backend service and preferably in the same region.
|
||||
|
||||
It's also very easy to get stated. Follow the instructions to setup your account. Create a new database.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can start by choosing the free plan (you can always upgrade later) and then the cloud providerand region where you would like host your database. Next you will be shown the security section of the setup. This controls who can access your database, you don't need to create a user as there is an admin user by default, you can choose to limit the IP-adresses that can access your database but don't worry about that now (you can always edit this later), just click **Finish and close**.
|
||||
|
||||
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">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Find the **Admin** user and clicked **edit**. Under the **Password** tab click **Edit Password**, generate a new password and copy it. Store it somewhere safe, you will need it for the next step. Don't forget to click **Update user** before moving on.
|
||||
|
||||
Now you need to find the connection URI. In your cluster dashboard choose _Connect_.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Followed by **Connect to your application**.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Make sure the version is **3.6 or later**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Now you need to copy and keep the connection URI shown below. It will look something like this:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
mongodb+srv://Admin:<password>@cluster0.xxxxxxx.mongodb.net/noodldb?retryWrites=true&w=majority
|
||||
```
|
||||
|
||||
Keep this URI safe as it will have full access to your database.
|
||||
|
||||
## The backend service
|
||||
|
||||
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).
|
||||
|
||||
|
||||
### Connect your application to the self hosted backend
|
||||
|
||||
You can now connect to your new self hosted backend from your Noodl application. Open your project. Find the "Cloud Services" icon in the sidebar.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Find the plus icon at the top to create a new cloud service.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Create a new cloud service. Make sure the **Self Hosted** checkbox is checked:
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
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/).
|
||||
|
||||
Then you will use the following command to migrate your data:
|
||||
|
||||
```bash
|
||||
$ mongorestore --gzip --archive="path-to-backup-file" --uri="the-uri-to-your-mongodb-from-above"
|
||||
```
|
||||
Reference in New Issue
Block a user