lowdefy/packages/docs/tutorial/tutorial-deploy.yaml

# Copyright 2020-2021 Lowdefy, Inc

# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at

#     http://www.apache.org/licenses/LICENSE-2.0

# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

_ref:
  path: templates/general.yaml.njk
  vars:
    pageId: tutorial-deploy
    pageTitle: 6. Deploy to Netlify
    section: Tutorial
    filePath: tutorial/tutorial-deploy.yaml
    prefetchPages:
      - next-steps
    content:
      - id: tutorial_video
        type: DangerousMarkdown
        properties:
          DOMPurifyOptions:
            ADD_TAGS:
              - iframe
            ADD_ATTR:
              - allowfullscreen
              - allow
              - frameborder
          content: |
            <iframe
              width="800"
              height="470"
              src="https://www.youtube.com/embed/VPUYzywryuQ" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>            
      - id: body_requirements
        type: MarkdownWithCode
        properties:
          content: |
            [Netlify](https://www.netlify.com) is a web app hosting service that is a great match for Lowdefy. They have great integrations with GitHub, GitLab, and Bitbucket, which make it easy to set up a continuous deployment process to deploy your apps.

            ### Requirements

            You will need to have the following:

            - A Github account. You can create one [here](https://github.com/join).
            - A Netlify account. You can create one [here](https://app.netlify.com/signup). It is easiest if you sign up with your Github account.
            - [`git`](https://git-scm.com/downloads) version control installed on your computer.

            #### Step 6.1 - Create a Github repository

            Create a new Github repository. You can do that [here](https://github.com/new). Do not initialize the repository with a `.gitignore`, `README`, or licence file.

            #### Step 6.2 - Add your files to the repository

            Run the `git` commands to create a new repository on the command line:

            ```bash
            git init
            git add .
            git commit -m "Initial commit"
            git branch -M main
            git remote add origin https://github.com/__GITHUB_USERNAME__/__REPO_NAME__.git
            git push -u origin main
            ```

            If you refresh your browser, you should see the `lowdefy.yaml` and `.gitignore` files in the repository.

            #### Step 6.3 - Link your Github project to Netlify.

            - Once logged in to Netlify, click the "New site from git" button.
            - Choose Github, and authorize Netlify to access your repositories.
            - Select your repository.            

      - id: info_configure_repo
        type: Alert
        properties:
          type: info
          icon: InfoCircleFilled
          description: If your repository isn't found, click "Configure Netlify on Github", and give Netlify access to your repository.

      - id: body_configure_netlify
        type: MarkdownWithCode
        properties:
          content: |
            #### Step 6.4 - Configure your Netlify deployment.

            - Set your build command to `npx lowdefy@latest build-netlify`.
            - Set your publish directory to `.lowdefy/publish`.
            - Review the other settings, and deploy your site            

      - id: warning_configure_functions
        type: Alert
        properties:
          type: warning
          icon: WarningFilled
          description: Your site won't work yet. You first need to configure the Lowdefy server in the next step.

      - id: body_configure_functions
        type: MarkdownWithCode
        properties:
          content: |
            #### Step 6.5 - Configure the Lowdefy server.

            - Click the "Site settings" button.
            - Choose the "Functions" section in the left menu.
            - Edit the settings and set your functions directory to `.lowdefy/functions`.

            #### Step 6.6 - Add your Google Sheets credentials

            Go to "Site settings", then "Build and deploy" in the left menu. Scroll down and select "Edit variables" in the "Environment" section.

            Set the variables `LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL` and `LOWDEFY_SECRET_SHEETS_PRIVATE_KEY` to the same values as in your `.env` file.

            #### Step 6.7 - Redeploy your site

            - Go to the "Deploys" tab.
            - Click the "Trigger deploy" button and deploy your site.
            - Wait for you site to finish deploying.

            #### Step 6.8 - Enjoy your app

            Go to your shiny new app. On the "Site overview" tab you will find your site url. Go to this url and you should see your app.

            #### Step 6.9 - Try out Netlify's deploy preview.

            Edit the `lowdefy.yaml` file on Github. Commit the changes on a new branch, and create a pull request. Netlify will run checks on your pull request, and generate a deploy preview. Once the deploy preview has finished building, you can click on the "details" link and this will take you to preview of your changes.

            ### Up next

            This is the end of the tutorial. If you have any feedback or suggestions, we would greatly appreciate that. You can start a new discussion [here](https://github.com/lowdefy/lowdefy/discussions).

            Our next steps will show you some of the things you could do next.            
      - _ref:
          path: templates/navigation_buttons.yaml
          vars:
            previous_page_title: Requests
            previous_page_id: tutorial-requests
            next_page_title: Next steps
            next_page_id: next-steps