Research - Netlify for Deployment

[kevinyu328]

Since we are quite sure we will be using Netlify for deployment, it will be great to do some research on the functionalities it has. Look into functionalities such as severless functions, user authentication, deployment, and consider its compatibility with PostgreSQL.

Put longer notes here in this issue, along with potential sample code and any other thoughts. And then you can put a couple bullets summary / thoughts in this document.

[albeartoz]

Netlify

Front End (Netlify build)

• Similar to others with git (GitHub, GitLab, Bitbucket) integration, and each pull request getting its own deployed version -- allows easier testing
• Can use any static web framework (I think), including Jekyll, gatsby, Next.js, etc.
• Netlify Build builds and deploys that static site.
• Automatically manages dependencies (as long as they're in our package.json)

Builds

• Common configurations include vanilla JS single page applications, as well as Gatsby and Next.js pages

JS single page apps

• We declare a build command in the scripts array of the package.json, and set the build command to be npm run {YOUR_BUILD_SCRIPT}
• publish directory, or where the deploy-ready HTML files and assets generated by the build, are placed in the "dist" directory

Gatsby and Next.js

• these two frameworks are back in contention for our frontend
• this is a tutorial on how to use Gatsby, this is a tutorial for Next.js

React

• Seems like you can also host react apps on Netlify, but it's not in the Docs for some reason. It works the same as deploying any other app.

Build environment variables

• Ever use a .env file to contain API keys? This is Netlify's version of that.
• Allows for sensitive information to remain private, and tracks whether untrusted deploys can access these environment variables.

Configuration

• The build and deploy settings can be changed with Netlify UI, or a netlify.toml file -- lets us change stuff like node/npm version
• You can check to see if contents of a git repo have changed between versions
• You can also set a custom path to the serverless function directory
• There's also a bunch of other stuff that is way over my head, but also doesn't seem too applicable to what we're doing yet.

Deploys

• Netlify uses atomic deploys. This means that instead of pushing individual files, you create a new deploy each time files change.
• This means that the website is always in a consistent state while deployed.
• Able to deploy mulitple branches of the same site, using staging branches, as well as deploy preview branches.
• Any previous deploy can be rolled back

User authentication

• Users are authenticated using the GoTrue API, based on OAuth2, and can handle sugnup, authentication, and custom user data.
• Add a Netlify Identity Widget form to the site, and users will be able to create accounts.
• Authentication can also be done with external providers such as Google(what we are using now), and repository hosting services such as GitHub.
• here is a tutorial on how Netlify uses OAuth2 authentication tokens.

Form submissions

• use a <form> tag to create a form. Example:

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

• You can also use JavaScript to render forms on the client side, using AJAX. I'll need to look more into AJAX.

return (
  <form data-netlify="true" name="pizzaOrder" method="post" onSubmit={handleSubmit}>
    <input type="hidden" name="form-name" value="pizzaOrder" />
    <label>What order did the pizza give to the pineapple?
      <input name="order" type="text" onChange={handleChange} />
    </label>
    <input type="submit"/>
  </form>
)

Serverless Functions

• I think Netlify serverless functions are just a wrapper around AWS serverless functions.
• Can be deployed wiith JavaScript and Go, but I'm assuming we're using JavaScript.
• Functions all go into a specified functions directory.
• Functions can be triggered using certain Netlify events. These include when a form is submitted.
• Functions can also get access to authentication, and trigger functions using Identity events

Serverless functions and PostgreSQL

• I haven't been able to find too much information about connecting functions to PostgreSQL
• It looks like many people are using FaunaDB and DynamoDB, noSQL database solutions
• here is a Zapier service that claims to integrate a Netlify Function with a PostgreSQL, but there's no documentation on how this works

[albeartoz]

I'll need to do more research on serverless functions, but the Netlify docs leave a lot to be desired. It feels like they expect you to already know how to make serverless functions before reading the docs.

[jamescd18]

This is a fantastic start and provides great background info on Netlify's features. Great job!

We won't have access to the Netlify CLI and the Netlify UI due to our deployment arrangement, but I'm not entirely sure how that will impact things. I know we can still run the application locally and deploy it just fine.

I also suspect that we'll avoid using netlify form submissions and netlify user authentication, at least in part due to those features relying on the Netlify web UI.

That kinda sucks about the documentation, but if it helps at all, documentation about AWS Lambda can sometimes apply to Netlify functions. Netlify functions is basically a wrapper around AWS Lambda, so many of the same features / quirks are passed through. (For example the event and context parameters, as well as the 1GB RAM limit)

For serverless functions + PostgreSQL, it should theoretically be the same as any other database setup. Connect with an npm package after supplying a connection url and credentials. Then likely we'll have an ORM sit between the functions and the database connection. See #2 for the ORM side and #14 for some complexities with serverless functions in Netlify.

[jamescd18]

Gonna go ahead and close this issue since I think the specifics of env vars and specifics with serverless functions will be explored in other issues moving forward.