diff --git a/org-cyf/content/fundamentals/product/ship/index.md b/org-cyf/content/fundamentals/product/ship/index.md index 12a66f629..bb647486c 100644 --- a/org-cyf/content/fundamentals/product/ship/index.md +++ b/org-cyf/content/fundamentals/product/ship/index.md @@ -7,4 +7,4 @@ emoji= '🎁' weight = 4 +++ -In Fundamentals, we will ship our product to Netlify. [Read the Netlify guide]({{< ref "/guides/deployment-netlify" >}}). +In Fundamentals, we will ship our product to Netlify. [Read the Netlify guide]({{< ref "/guides/deployment/netlify" >}}). diff --git a/org-cyf/content/guides/deployment-netlify/_index.md b/org-cyf/content/guides/deployment/netlify/_index.md similarity index 97% rename from org-cyf/content/guides/deployment-netlify/_index.md rename to org-cyf/content/guides/deployment/netlify/_index.md index 327572e72..b7cdab096 100644 --- a/org-cyf/content/guides/deployment-netlify/_index.md +++ b/org-cyf/content/guides/deployment/netlify/_index.md @@ -4,6 +4,7 @@ title: Deploying to Netlify sidebar_label: Overview description: Learn how to deploy your website to Netlify. emoji: ⛵ +weight: 6 --- In this guide, we'll learn how to set up automatic website _deployment_. diff --git a/org-cyf/content/guides/deployment-netlify/another-site/01-netlify-dashboard.png b/org-cyf/content/guides/deployment/netlify/another-site/01-netlify-dashboard.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/01-netlify-dashboard.png rename to org-cyf/content/guides/deployment/netlify/another-site/01-netlify-dashboard.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/02-sites-page.png b/org-cyf/content/guides/deployment/netlify/another-site/02-sites-page.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/02-sites-page.png rename to org-cyf/content/guides/deployment/netlify/another-site/02-sites-page.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/03-git-provider.png b/org-cyf/content/guides/deployment/netlify/another-site/03-git-provider.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/03-git-provider.png rename to org-cyf/content/guides/deployment/netlify/another-site/03-git-provider.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/04-choose-repo.png b/org-cyf/content/guides/deployment/netlify/another-site/04-choose-repo.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/04-choose-repo.png rename to org-cyf/content/guides/deployment/netlify/another-site/04-choose-repo.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/05-choose-branch.png b/org-cyf/content/guides/deployment/netlify/another-site/05-choose-branch.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/05-choose-branch.png rename to org-cyf/content/guides/deployment/netlify/another-site/05-choose-branch.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/06-site-is-live.png b/org-cyf/content/guides/deployment/netlify/another-site/06-site-is-live.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/06-site-is-live.png rename to org-cyf/content/guides/deployment/netlify/another-site/06-site-is-live.png diff --git a/org-cyf/content/guides/deployment-netlify/another-site/index.md b/org-cyf/content/guides/deployment/netlify/another-site/index.md similarity index 100% rename from org-cyf/content/guides/deployment-netlify/another-site/index.md rename to org-cyf/content/guides/deployment/netlify/another-site/index.md diff --git a/org-cyf/content/guides/deployment-netlify/common-problems.md b/org-cyf/content/guides/deployment/netlify/common-problems.md similarity index 100% rename from org-cyf/content/guides/deployment-netlify/common-problems.md rename to org-cyf/content/guides/deployment/netlify/common-problems.md diff --git a/org-cyf/content/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png b/org-cyf/content/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png new file mode 100644 index 000000000..a26198a2e Binary files /dev/null and b/org-cyf/content/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png differ diff --git a/org-cyf/content/guides/deployment/netlify/deploying-backends/index.md b/org-cyf/content/guides/deployment/netlify/deploying-backends/index.md new file mode 100644 index 000000000..642d66482 --- /dev/null +++ b/org-cyf/content/guides/deployment/netlify/deploying-backends/index.md @@ -0,0 +1,73 @@ +--- +id: deploying-backends +title: Deploying Express.JS Backend +sidebar_label: Deploying backends +emoji: 🖥️ +weight: 3 +--- + +Netlify Functions is a feature of Netlify allowing you to deploy some backend systems. While it is mainly designed to host backends written in one of the serverless frameworks, it does have some support for Express.JS as well with some limitations. To deploy your Express.JS based backend please follow the following guide. + +First you need to make sure your backend adheres to the following: + +1. All of your backend paths should start with `/api`. For example `/api/videos`, `/api/bookings/1`, etc. Every other URL will be considered as part of the frontend. + +2. Your backend code should be split into the following files: + a. `/server/api.js` contains your actual backend functionality. You can include other modules from this file if you wish to split the file into multiple modules. This is the file that will be used by Netlify. + a. `/server/server.js` and/or `/server/app.js` should contain code to start up your express.js server and contain settings to load up `api.js` to serve everything under `/api`. This file will be used when running your backend locally, but will not be used at all under Netlify. + +3. Your backend should not use global variables to save data between requests. All persistence has to be done through the database or by using cookies. + +Once you have made sure your backend adheres to the above, you are ready to add support for Netlify: + +1. If it doesn't exist yet, create a `netlify.toml` in your root repository with the following content. If the file already exist, make sure to append the code below: + +```toml +[functions] + directory = "server/functions" + external_node_modules = ["express"] + node_bundler = "esbuild" +[[redirects]] + force = true + from = "/api/*" + status = 200 + to = "/.netlify/functions/app/:splat" +``` + +2. Create a file called `app.mjs` inside `/server/functions`. Make sure it has the following content: + +```js +// Netlify wrapper for express.js + +// This will convert your express.JS application into a serverless lambda that is compatible by AWS Lambda and Netlify Functions. +// Note that this has a large performance impact as your entire express system needs to load up for every single request. +// Also each request runs in isolation so you are unable to share or cache values in your codebase. +// For example the database connection will be recreated at every call + +import express from "express"; +import serverless from "serverless-http"; +import apiRouter from "../api"; + +const app = express(); + +app.use(express.json()); +app.use("/api/", apiRouter); + +export const handler = serverless(app); +``` + +If you need to use any middleware apart from `express.json()` make sure that is also included. + +3. Add `serverless-http` into your `package.json` file: + +```bash +npm i --save serverless-http +``` + +4. If your backend uses a database make sure you properly set it up in Netlify. If you are following the curriculum then you'll need to set up a `DATABASE_URL` environment variable inside Netlify to point to your database. Check the guides on your chosen database provider to see how to obtain this value. + +![Netlify environment variables](01-netlify-environment-variables.png "You can add environmental variables under Site configuration / Environment Variables by clicking the Add a variable button. You should select 'Add a single variable'") + +5. Try deploying your application. If all is well then your backend paths should be accessible under `https://.netlify.app/api/` + +If you are stuck you can check [this project](https://github.com/sztupy/Full-Stack-Project-Assessment/tree/netlify_000) that showcases the above requirements. As an example check this [API call](https://cyf-fsa-solution.netlify.app/api/videos) diff --git a/org-cyf/content/guides/deployment-netlify/first-site/01-netlify-homepage.png b/org-cyf/content/guides/deployment/netlify/first-site/01-netlify-homepage.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/01-netlify-homepage.png rename to org-cyf/content/guides/deployment/netlify/first-site/01-netlify-homepage.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/02-netlify-signup.png b/org-cyf/content/guides/deployment/netlify/first-site/02-netlify-signup.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/02-netlify-signup.png rename to org-cyf/content/guides/deployment/netlify/first-site/02-netlify-signup.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/03-github-account-permissions.png b/org-cyf/content/guides/deployment/netlify/first-site/03-github-account-permissions.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/03-github-account-permissions.png rename to org-cyf/content/guides/deployment/netlify/first-site/03-github-account-permissions.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/04-deploy-first-project.png b/org-cyf/content/guides/deployment/netlify/first-site/04-deploy-first-project.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/04-deploy-first-project.png rename to org-cyf/content/guides/deployment/netlify/first-site/04-deploy-first-project.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/05-git-provider.png b/org-cyf/content/guides/deployment/netlify/first-site/05-git-provider.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/05-git-provider.png rename to org-cyf/content/guides/deployment/netlify/first-site/05-git-provider.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/06-github-further-permissions.png b/org-cyf/content/guides/deployment/netlify/first-site/06-github-further-permissions.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/06-github-further-permissions.png rename to org-cyf/content/guides/deployment/netlify/first-site/06-github-further-permissions.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/07-install-netlify.png b/org-cyf/content/guides/deployment/netlify/first-site/07-install-netlify.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/07-install-netlify.png rename to org-cyf/content/guides/deployment/netlify/first-site/07-install-netlify.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/08-choose-repo.png b/org-cyf/content/guides/deployment/netlify/first-site/08-choose-repo.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/08-choose-repo.png rename to org-cyf/content/guides/deployment/netlify/first-site/08-choose-repo.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/09-choose-branch.png b/org-cyf/content/guides/deployment/netlify/first-site/09-choose-branch.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/09-choose-branch.png rename to org-cyf/content/guides/deployment/netlify/first-site/09-choose-branch.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/10-site-is-live.png b/org-cyf/content/guides/deployment/netlify/first-site/10-site-is-live.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/10-site-is-live.png rename to org-cyf/content/guides/deployment/netlify/first-site/10-site-is-live.png diff --git a/org-cyf/content/guides/deployment-netlify/first-site/index.md b/org-cyf/content/guides/deployment/netlify/first-site/index.md similarity index 100% rename from org-cyf/content/guides/deployment-netlify/first-site/index.md rename to org-cyf/content/guides/deployment/netlify/first-site/index.md diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/01-netlify-dashboard.png b/org-cyf/content/guides/deployment/netlify/renaming-site/01-netlify-dashboard.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/01-netlify-dashboard.png rename to org-cyf/content/guides/deployment/netlify/renaming-site/01-netlify-dashboard.png diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/02-list-of-sites.png b/org-cyf/content/guides/deployment/netlify/renaming-site/02-list-of-sites.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/02-list-of-sites.png rename to org-cyf/content/guides/deployment/netlify/renaming-site/02-list-of-sites.png diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/03-site-overview.png b/org-cyf/content/guides/deployment/netlify/renaming-site/03-site-overview.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/03-site-overview.png rename to org-cyf/content/guides/deployment/netlify/renaming-site/03-site-overview.png diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/04-site-settings.png b/org-cyf/content/guides/deployment/netlify/renaming-site/04-site-settings.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/04-site-settings.png rename to org-cyf/content/guides/deployment/netlify/renaming-site/04-site-settings.png diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/05-site-name-input.png b/org-cyf/content/guides/deployment/netlify/renaming-site/05-site-name-input.png similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/05-site-name-input.png rename to org-cyf/content/guides/deployment/netlify/renaming-site/05-site-name-input.png diff --git a/org-cyf/content/guides/deployment-netlify/renaming-site/index.md b/org-cyf/content/guides/deployment/netlify/renaming-site/index.md similarity index 100% rename from org-cyf/content/guides/deployment-netlify/renaming-site/index.md rename to org-cyf/content/guides/deployment/netlify/renaming-site/index.md diff --git a/org-cyf/content/guides/deployment-netlify/site-naming-conventions.md b/org-cyf/content/guides/deployment/netlify/site-naming-conventions.md similarity index 74% rename from org-cyf/content/guides/deployment-netlify/site-naming-conventions.md rename to org-cyf/content/guides/deployment/netlify/site-naming-conventions.md index f19db1c80..5f846eef6 100644 --- a/org-cyf/content/guides/deployment-netlify/site-naming-conventions.md +++ b/org-cyf/content/guides/deployment/netlify/site-naming-conventions.md @@ -18,11 +18,11 @@ All CYF coursework projects should be hosted with the following naming scheme: Examples for the project called `cakes` -- `cyf-nbogie-cakes`.netlify.com -- `cyf-40thieves-cakes`.netlify.com -- `cyf-kkarimi-cakes`.netlify.com +- `cyf-nbogie-cakes`.netlify.app +- `cyf-40thieves-cakes`.netlify.app +- `cyf-kkarimi-cakes`.netlify.app Examples for the project called `photo-gallery` -- `cyf-lucymac-photo-gallery`.netlify.com -- `cyf-textbook-photo-gallery`.netlify.com +- `cyf-lucymac-photo-gallery`.netlify.app +- `cyf-textbook-photo-gallery`.netlify.app diff --git a/org-cyf/content/html-css/product/ship/index.md b/org-cyf/content/html-css/product/ship/index.md index 265553fc1..07efc6ea5 100644 --- a/org-cyf/content/html-css/product/ship/index.md +++ b/org-cyf/content/html-css/product/ship/index.md @@ -7,7 +7,7 @@ emoji= '🎁' weight = 4 [[blocks]] name="Ship it to Netlify" -src="guides/deployment-netlify/another-site" +src="guides/deployment/netlify/another-site" +++ You need to respond to your reviews and make changes to your code. Then you need to get your project live.