lowdefy/packages/docs/tutorial/tutorial-setup.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-setup
    pageTitle: Deploy your app
    section: Tutorial
    filePath: tutorial/tutorial-setup.yaml
    # prefetchPages:
    #   - tutorial-editing-page
    content:
      - id: md1
        type: MarkdownWithCode
        properties:
          content: |
            In this tutorial we will be creating a simple ticketing app, that allow users to file new tickets, and see a list of outstanding tickets. We will be hosting this app with [Netlify](https://www.netlify.com).

            ### 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.

            #### Step 1

            Create a new Lowdefy project using the Lowdefy project template.

            - Go to https://github.com/lowdefy/project-template.
            - Click the "Use this template" button.
            - Give your project a name and create your project repository.

            #### Step 2

            Link your Github project to Netlify.

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

      - id: alert1
        type: Alert
        properties:
          type: info
          showIcon: false
          message: If your repository isn't found, click "Configure Netlify on Github", and give Netlify access to your repository.
      - id: md2
        type: MarkdownWithCode
        properties:
          content: |
            #### Step 3

            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: alert2
        type: Alert
        properties:
          type: warning
          showIcon: false
          message: Your site won't work yet. You first need to configure the Lowdefy backend server in the next step.
      - id: md3
        type: MarkdownWithCode
        properties:
          content: |
            #### Step 4

            Configure the Lowdefy backend 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 5

            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

            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 something like this:            
      - id: example1
        type: PageHeaderMenu
        properties:
          style:
            minHeight: 300px
          menu:
            links:
              - id: examples
                type: MenuLink
                url: https://lowdefy.com/examples
                properties:
                  title: Examples
                  icon: AppstoreOutlined
              - id: docs
                type: MenuLink
                url: https://docs.lowdefy.com
                properties:
                  title: Docs
                  icon: ReadOutlined
        blocks:
          - id: content_card
            type: Card
            areas:
              content:
                blocks:
                  - id: content
                    type: Result
                    properties:
                      title: Welcome to your Lowdefy app
                      subTitle: We are excited to see what you are going to build
                      status: success
                      icon:
                        name: HeartTwoTone
                        color: '#f00'
                    areas:
                      extra:
                        blocks:
                          - id: docs_button
                            type: Button
                            properties:
                              size: large
                              title: Let's build something
                            events:
                              onClick:
                                - id: link_to_docs
                                  type: Link
                                  params:
                                    url: https://docs.lowdefy.com
                                    newTab: true
              footer:
                blocks:
                  - id: footer
                    type: Paragraph
                    properties:
                      type: secondary
                      content: |
                        Made by a Lowdefy 🤖                        
      - id: md4
        type: Markdown
        properties:
          content: |
            ### Up next

            In the next section we will editing our app by making a Pull Request on Github.            

      - _ref:
          path: templates/navigation_buttons.yaml
          vars:
            previous_page_title: Introduction
            previous_page_id: introduction
            next_page_title: Editing a page
            next_page_id: tutorial-editing-page