Demo

You want to host the SnipAId Web GUI with Netlify? Read on...

How to get started

The following tutorials assume, that you successfully deployed the model and have the model server up and running. If not, please refer to the tutorial in the model-server repository.

If you choose to deploy this demo from Github with the Netlify Web User Interface (UI) and automatic build support read on here.
If you choose to deploy manually with the help of the Netlify Command Line Interface (CLI) skip to this section.

Unsure which one fits your needs best? Here are some aspects to consider

Manual deploy with Netlify CLI	Automatic deploy from GitHub with Netlify Web UI
CLI usage required for both Git and Netlify Needs manual deploy to update the site Allows for private repository	Requires Web Interface interactions only Site automatically updates with commits to the repository Repository needs to be public to host site with Netlify on the free plan

Deploying from GitHub with the Netlify UI

1. Fork this repo as a public repository.

   Note: The next steps assume you already have a Netlify account that is connected to your Git Provider. If you don’t already have a Netlify account, you can sign up for free here.

2. Login to your netlify account.

3. From the dashboard find the sites section and hit the "Add new site button" to create a new site. Select "Import an exisiting project"

4. Connect to GitHub.

5. Pick your forked repository.

6. Make sure publish directory is set to public (should be the default).

7. Hit the "Show advanced button" to set Environment Variables.

   Note: Running the demo requires 2 keys for accessing the model. If not already done, follow the tutorial on How to setup the model server in the repository model-server to get your keys.

• Klick the button "New Variable" and add the key BANANA_API_KEY with value InsertYourSecretBananaAPIKeyHere.

• Klick the button "New Variable" and add the Key BANANA_MODEL_KEY with value InsertYourSecretBananaModelKeyHere.

  Note: Fill in your personal model keys for InsertYourSecretBananaAPIKeyHere and InsertYourSecretBananaModelKeyHere.

8. Make sure the functions directory is set to netlify/functions (should be the default).

9. Check your configuration. It should now look like the image below.

   

10. Finally, hit the "Deploy site" button.

Wait for the build to finish. Done!

Deploying manually with the Netlify CLI

Setup

1. Run git clone https://github.com/snipaid-nlg/demo-netlify.git to clone the repository to your machine.

2. Change into the project direcory cd demo-netlify.

3. Now that you have the project cloned and setup locally, we need to install the packages needed to run the serverless functions locally. First, make sure you have Node.js installed on your machine.

   Note: You can check if you have it and what version by running npm --version.

   Now, we need to install the Netlify CLI. Run the following command in the terminal to install it globally on your machine. npm install netlify-cli --global.

   Note: You can either use netlify or the shorthand ntl to run cli commands. I’ll be using the shorthand versions for the remainder of the tutorial. You can check the version you are running of the cli with ntl --version.

4. If you don’t already have a Netlify account, you can sign up for free here. Then you can login with the CLI by running ntl login and authorize the application.

   

Create a Netlify Site

Initialize the application and go through the steps to create a new site on Netlify.

1. Run ntl init and select "Create & configure a new site".

   

2. Select the team you want to use.

   

3. Name your site or leave it blank for a random name.

   

4. The site is now created. You should see your admin URL, the main URL, and the site id listed in the terminal.

   

5. Next the CLI pompts you to connect your github account for webhooks and deploy keys.

   

   Just hit Ctrl+C to quit at this point to deploy manually.

Set Environment variables

1. Add a file named ".env" to the root of the repository

2. Add your keys for the model.

   BANANA_API_KEY = InsertYourSecretBananaAPIKeyHere
   BANANA_MODEL_KEY = InsertYourSecretBananaModelKeyHere
   

   Note: Replace InsertYourSecretBananaAPIKeyHere and InsertYourSecretBananaModelKeyHere with your personal model keys. If you do not have these keys yet, follow the tutorial on How to setup the model server from the model-server repository to get your keys.

3. With both keys in the .env file run the following command ntl env:import .env.

Develop and test locally

1. Install the required node packages with npm install.
2. Start a local development server with ntl dev.
3. Check the site at http://localhost:8888.
4. To stop the development server hit Ctrl+C.

From the Netlify Dashboard you will see, that the site is created but not deployed yet.

Deploy

1. Test the deployment with ntl deploy --dir=public --functions=netlify/functions.

   

2. If everything works as expected deploy to production with ntl deploy --dir=public --functions=netlify/functions --prod.

   

From the Netlify Dashboard you will see, that the site is now live. Done!