diff --git a/content/en/fundamentals/product/ship/index.md b/content/en/fundamentals/product/ship/index.md index 12a66f629..bb647486c 100644 --- a/content/en/fundamentals/product/ship/index.md +++ b/content/en/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/content/en/guides/deployment/_index.md b/content/en/guides/deployment/_index.md new file mode 100644 index 000000000..dc495f577 --- /dev/null +++ b/content/en/guides/deployment/_index.md @@ -0,0 +1,15 @@ +--- +id: deployment +title: Deploying applications +emoji: 🖥️ +--- + +# What is deployment? + +Deploying in short is making sure the application you are developing is made available for the world wide web to see (or in case for internal systems it is at least visible to the intended audience). Without the ability to deploy the only way to show what you have done is ask others to come to your computer, and show them the work on it in person. + +{{}} +The CYF Curriculum team suggest [Netlify]({{< ref "/guides/deployment/netlify" >}}). as a free provider to use for both your frontend and backend applications, with Supabase as a free database layer for persistence. This is because among the free tier offerings they have the least amount of limitations. + +This suggestion assumes that you are interested in a fully free option, and you can accept the limitations. If you have a deployment budget for your work and/or the limitations are not acceptable you are free to look at other choices as well. +{{}} diff --git a/content/en/guides/deployment/application_stack.md b/content/en/guides/deployment/application_stack.md new file mode 100644 index 000000000..7b5ef9d83 --- /dev/null +++ b/content/en/guides/deployment/application_stack.md @@ -0,0 +1,56 @@ +--- +id: application_stack +title: The application stack +weight: 3 +emoji: 🖥️ +--- + +# The application stack + +In the previous section we talked about the fact that most full-stack web applications have multiple layers (generally at least a frontend and a backend component and some kind of persistence layer in form of a database). In this section we go through these layers and talk about how they are usually deployed. + +## Frontend + +In the curriculum we teach, frontend files are considered static. What this means is that once you deploy them, they will never change until the next deployment comes. Your `index.html`, `index.js` files, your CSS files and your image assets will always contain the same content regardless how many times they are downloaded and shown in browsers around the world. + +This makes them an ideal candidate to serve them through CDNs, Content Delivery Networks. These systems deploy your static files around the globe allowing people to access them quickly. Serving static files are fairly inexpensive, as you only need disk space and bandwidth, so a lot of companies provide this for free for small projects and you only need to pay once your user count becomes large enough. + +CloudFlare Pages and Netlify are some examples of CDN providers that have generous free tiers allowing you to host your static files with them. GitHub Pages, while not strictly considered a CDN, also allows you to host files from your repository in a simple way. + +{{}} +Do note that while the fact that frontend files are static is true for the frameworks we teach, it is not universally true for all frameworks. Web focused languages like PHP, and MVC frameworks like Ruby on Rails or Django, allow you to create dynamic frontend files. Some React frameworks also support server-side rendering which can make the frontend part of your application dynamic, and ineligible to be served through CDNs. Anything static, like CSS files or images however you can still serve through CDNs, and it is generally still a good idea to do so to improve your application's loading speed. +{{}} + +CDNs are however not the only way to deploy and serve your frontend. You can also add code to your backend server that will enable it to serve your static files. This allows you to use any of the backend providers (that support persistent deployments) to serve your frontend as well. Main benefit of this approach is that your frontend and backend parts remain closely tied together, you can for example easily deploy them at the same time making sure there are no version discrepancies between the two. However you would lose the benefits of CDNs, and although serving static files are not computationally too involved they still need to be handled, which will in turn slow down your backend. + +## Backend + +In contrast to the frontend, your backend systems are almost always considered dynamic. Every request they receive they need to generate a response on the fly based on the request and usually the contents of the database. This means deploying backends are much more involved, and this shows in free offerings as well - there are less options to host your backends for free, and the ones that are available have hefty limitations, forcing you to pay for an upgrade. + +To deploy your backend there are generally two wide categories of deployment mechanisms: persistent and serverless. + +### Persistent deployment + +In persistent deployment scenario you run your backend server all the time. This is very similar how you usually run your backend during development on your local computer. This allows you to fully utilize the features of your backend framework, including features like backend workers. Latency - the time needed for your server to respond - is usually quite low compared to serverless deployments. + +Biggest drawback is that running a server constantly is more expensive, therefore free tiers are in very limited supply. Glitch, Render and Fly.io are some providers that still offer this, but all of them have strict limitations: the first two will for example stop your server if it doesn't receive activity for a longer time. This will make your service be very-very slow whenever it needs to be restarted. + +Apart from the providers above persistent deployment is what people usually use VPS providers for, and the big players usually have a free tier available. AWS's EC2, Azure's Virtual Machines and Google's Compute Platform all have a one year time limited trial that allows you to use their slowest computer for free. However because neither of these services support automated deployments out of the box, and it is very easy to accidentally overshoot the trial package (for example by accidentally starting up a slightly larger computer than the slowest one) we don't recommend any of these options for the projects we do in the curriculum. + +### Serverless deployment + +Serverless, sometimes called on-demand, functional or lambda deployments mean that your server is not running constantly. Whenever there is a request the serverless provider will start up your backend, let it serve the request and then stop it immediately afterwards. + +Benefits of this approach is that your service doesn't consume resources unless it's used. It is usually aimed for systems that are either not used constantly, or where there are periods of high usage, which needs more resources to handle. Running your backend on-demand only is also less expensive, so there are more free options available to use. + +Drawbacks of this approach is that your server is getting started and stopped all the time, so it needs to be developed in a way to make this less of a problem. Unfortunately Express.JS is not designed with serverless operation in mind, bot there is a plugin to allow its core functions to operate. However anything that requires your system to run constantly, including global variables or backend workers will not work, and need to be replaced with an alternative. Also the constant starting and stopping is slow therefore serverless functions have a higher latency than persistent servers. + +Netlify Functions, Cloudflare Pages, Supabase Functions are some examples that have free tiers available, and big players like AWS's Lambda also provide support for this in their time limited free tier. + +## Database + +The final part of a full stack application is the persistence layer, which is usually a database, in our current curriculum likely a relational database, like Postgres. + +It's not the only kind of data store that you might need. For example if your application needs to support file uploads and you need to store those files somewhere you would need to opt in for some kind of file storage server as well, this is outside of the scope of this guide however. + +Free Postgres databases are offered by Supabase, Fly.io and Render with some limitations. Other kind of SQL databases are available from Cloudflare and are present inside the free tiers of AWS, Azure and GCP. These offerings do not follow Postgres' SQL standard we teach however, so are outside of the scope of this guide. diff --git a/content/en/guides/deployment/deployment_strategies.md b/content/en/guides/deployment/deployment_strategies.md new file mode 100644 index 000000000..f6b3a99f3 --- /dev/null +++ b/content/en/guides/deployment/deployment_strategies.md @@ -0,0 +1,42 @@ +--- +id: deployment_strategies +title: Deployment strategies +weight: 4 +emoji: 🖥️ +--- + +# Deployment strategies + +In the previous section we went through where you can deploy your application. In this guide we will go through how to do that. + +## Manual deployment + +Manual deployments are when you need to take an action yourself to get your application deployed. This can be anything from running a couple of commands to needing to press a button on a website. + +For example in the scenario where we imagined that you have both a development computer and a small server in your house, deploying your latest version manually could be following the steps below: + +1. Commit your changes and push them to the `main` branch on the development machine +2. Login onto your server computer +3. Go to the running application's directory +4. Stop the application +5. Pull the latest changes from the `main` branch +6. Run `npm i` +7. Start the application again + +Manual deployments done in a way above can be error-prone. For example if you forget to do step 7 your application will not be running at all at the end. If your provider does not support built-in automated deployments it is usually advised to create scripts that would do all of the steps above, so any time you wish the latest version to be deployed you would just need to run the script. Scripts can fail so you would still need to make sure to check the logs and see if everything went as expected. Trying to access your website after deployment is also a good way to check that everything is in order. + +## Automated deployment + +Automated deployment or Continuous deployment is whenever your code changes, the deployment flow is initiated automatically. For example any time your code ends up in the `main` branch of your GitHub repository deployment will commence automatically, and your code will end up on your servers. You can imagine this by someone automatically running the deployment script we've created above whenever your repository changes. + +Some frontend and backend providers have GitHub integration and will support automated deployments out of the box. For others, you either need to deploy manually by following a set of steps, or automate these manual steps by creating GitHub workflows manually. + +## Pull Request checks + +While automated deployments might sound scary, for example if you make a mistake in your code automated deployments would deploy that mistake automatically. There are ways to mitigate these risks by adding checks that run after each pull request is created, blocking merging if they fail. Common checks include linting, that would make sure that your code adheres to good coding conventions. Other checks that you can include are running unit, integration and end-to-end tests for each PR making sure that the code you've done passes these requirements. + +## Snapshot builds + +Another feature that helps make automated deployments less risky are snapshot builds. These are a feature of some providers where they not only deploy your `main` branch, but also deploy your other branches as well in a temporary fashion. For example if you create a new pull request from branch `new-awesome-feature` the provider will deploy this branch separately to your production environment. This will allows you, and anyone assessing your pull request to check how your changes would look like before actually merging them. + +Not all providers support snapshot builds. For the ones that do not, a common way to mitigate this is to set up two sets of servers, one called *production* while the other *staging* (other common names for this second set are *pre-production* or *sandbox*). You would then deploy to this environment first, and only after checking that it works as expected continue the deployment to *production* one. Do note that this usually requires you to set up your environment multiple times, and this will also increase the cost of your setup. diff --git a/content/en/guides/deployment/flyio/_index.md b/content/en/guides/deployment/flyio/_index.md new file mode 100644 index 000000000..1ed8bb513 --- /dev/null +++ b/content/en/guides/deployment/flyio/_index.md @@ -0,0 +1,10 @@ +--- +emoji: 🚀 +title: Deploying to Fly.io +description: Learn how to deploy your website to Fly.io +weight: 8 +--- + +[Fly.io](https://fly.io/) is a provider allowing you to deploy backend applications that are converted into docker containers. It also allows one to start up a small PostgreSQL database on their system. By making sure that the [frontend is served through the backend]({{< ref "/guides/deployment/flyio/serving-frontend" >}}) you can therefore easily deploy your entire stack on fly.io. + +The main drawback of fly.io that it's free trial only allows you to deploy exactly two systems. For a full stack application this would be the backend (which is also serving the frontend), and the database, meaning you would only be able to deploy a single project freely. diff --git a/content/en/guides/deployment/flyio/database-access.md b/content/en/guides/deployment/flyio/database-access.md new file mode 100644 index 000000000..658a37651 --- /dev/null +++ b/content/en/guides/deployment/flyio/database-access.md @@ -0,0 +1,40 @@ +--- +emoji: 🚀 +title: Accessing fly.io databases +description: Learn how you can access the fly.io PostgreSQL database +weight: 3 +--- + +## Accessing database + +If you have been following the setup guides you would have both a backend and a database system running under fly.io. + +Your database can hold data for multiple applications, so first you need to get a list of them: + +```bash +flyctl postgres db list -a YOURNAME-PROJECTNAME-db +``` + +(Make sure you use your database's name after the `-a` that you have set up before) + +On the list you will find under the NAME column three values: `postgres`, `repmgr` and finally the name of your application's datastore. It will be something like `YOURNAME_PROJECTNAME` - same as your application name but all of the dashes are replaced with underscores. + +Take a note of this name as you will need it later. + +## Uploading database + +To connect to the database you will need to use `flyctl`: + +```bash +flyctl postgres connect -a YOURNAME-PROJECTNAME-db -d YOURNAME_PROJECTNAME +``` + +Where the first value is the name of the database you set up in level 150, and the second value if the datastore name you obtained in the last section. + +The command above will start you up with a proper `psql` console where you can run commands. + +You can also pipe in SQL files. For example if you have an `initdb.sql` file containing SQL commands to initiate a database you can do: + +```bash +flyctl postgres connect -a YOURNAME-PROJECTNAME-db -d YOURNAME_PROJECTNAME < initdb.sql +``` diff --git a/content/en/guides/deployment/flyio/serving-frontend.md b/content/en/guides/deployment/flyio/serving-frontend.md new file mode 100644 index 000000000..ea4b47763 --- /dev/null +++ b/content/en/guides/deployment/flyio/serving-frontend.md @@ -0,0 +1,38 @@ +--- +emoji: 🚀 +title: Serving frontend from your backend +description: Learn how to add support for serving frontend files to Express.JS backends +weight: 2 +--- + +Fly.io doesn't have a built-in CDN for serving static frontend files directly, so if you wish to deploy your frontend you need to do it through your backend. + +Express.JS has fortunately a built-in middleware just to do that. You only need to set the location of your frontend files, and it will take care of serving the contents for you. + +For example if you add the following middleware inside your `/server/app.js`: + +```js +const staticDir = path.join(__dirname, "..", "static"); +app.use(express.static(staticDir)); +``` + +Then anything under the `/static` directory will be served as-is. + +{{}} +Express.JS will not compile these files for you, so if you have Javascript files that need compilation, like React JSX files you need to do that separately. +{{}} + +If you have a React application and you wish it to support React Routes you also need to make sure that every request that doesn't correspond to a real file gets routed to your main website. You can do that with adding a code like the following: + +```js +app.use((req, res, next) => { + if (req.method === "GET" && !req.url.startsWith("/api")) { + return res.sendFile(path.join(staticDir, "index.html")); + } + next(); +}); +``` + +This will point any request that was not yet handled in a previous middleware, and are not starting with `/api` to your `index.html` allowing React Router to handle it internally. + +You can find a full `app.js` example showing static file serving [here](https://github.com/sztupy/Full-Stack-Project-Assessment/blob/main/server/app.js). diff --git a/content/en/guides/deployment/flyio/setup/index.md b/content/en/guides/deployment/flyio/setup/index.md new file mode 100644 index 000000000..53ca5fe9f --- /dev/null +++ b/content/en/guides/deployment/flyio/setup/index.md @@ -0,0 +1,144 @@ +--- +emoji: 🚀 +title: Setup +description: Learn how to set up fly.io +weight: 1 +--- + +## Install `flyctl` + +Fly.io relies on a command line utility to launch and deploy applications. You need to download and install it. You can find installation instructions here: https://fly.io/docs/hands-on/install-flyctl/ + +After installing you might need to close your terminal and reopen it to be able to access `flyctl` + +## Signing up + +To sign up for a fly.io account go to their sign up page at https://fly.io/app/sign-up Make sure you register using the "Sign up using GitHub", as otherwise you won't get added to the Trial package! + +![Sign up using GitHub](signup.png) + +Once signed up you need to log in locally. Type in the following on your terminal then follow the instructions: + +``` +flyctl auth login +``` + +## Application setup + +Once signed up you can now launch your application. Go to the root of your project and type + +``` +flyctl launch +``` + +Once you enter this command it will provide you with a prompt like the following: + +``` +We're about to launch your NodeJS app on Fly.io. Here's what you're getting: + +Organization: test@codeyourfuture.io (fly launch defaults to the personal org) +Name: full-stack-project-assessment (derived from your directory name) +Region: Amsterdam, Netherlands (this is the fastest region for you) +App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM) +Postgres: (not requested) +Redis: (not requested) + +? Do you want to tweak these settings before proceeding? (y/N) +``` + +Make sure you enter `Y` on the prompt as the default settings are not going to use the free tier! + +Once you enter `Y` and press enter you will be redirected to a website where you need to fill in the details as follows: + +- Name: Use `YOURNAME-PROJECTNAME`, example `john-smith-videorec` +- Region: Pick `lhr - London`. +- VM size: Pick `shared-cpu-1x`. Anything else is not included in the free tier! +- VM memory: Pick `256Mb`. Anything else is not included in the free tier! +- Database: `Fly Postgres` +- DB Name: `YOURNAME-PROJECTNAME-db`, example: `john-smith-videorec-db` +- Configuration: `Development - Single Node`. Anything else here is not included in the free tier! +- Redis: `None` + +Once you fill in the details click "Confirm Settings" + +This will set up your database and a machine for running your backend. If everything is successful you should get something like: + +``` +Now: run 'flyctl deploy' to deploy your Node app. +``` + +Once everything is in order you can see that new files have been added by `fly launch` to your repository. These include a `Dockerfile` and a fly settings file called `fly.toml`. Make sure you commit both into your git repository, they will be needed during further deployments! + +## Application deployment + +Finally you are now ready for deployment: + +``` +flyctl deploy +``` + +This command will send your current repository to fly, build a docker image of your code then deploy that image to the Fly.io infrastructure. + +Note: if you are on the Trial Tier the deployer will return an error message saying it could only deploy your app to one machine instead of two because of the Trial Tier limitations: + +``` +Creating a second machine to increase service availability + +Error: error creating a new machine: failed to launch VM: To create more than 1 machine per app please add a payment method. +``` + +This is okay, as one machine is enough for our deployment. Actually if you are not on the Trial Tier, then the deployer will create two machines. If you don't wish to pay for both then you can decrease them to a single one by using the following command: + +``` +flyctl scale count 1 +``` + +If everything else goes well (as mentioned the error message above can be ignored) your application will be available on + +``` +https://YOURNAME-PROJECTNAME.fly.dev +``` + +Make sure to check that it works as expected! + +## Automated Deployments + +Note that fly.io doesn't have access to your GitHub account so it will not deploy your application whenever it changes. Either you need to run `fly deploy` from your computer every time you want to push a change, or you need to set up GitHub to do this for you. + +In order to do this there are two steps: You need to give GitHub access to your fly.io account, and then also need to set up a workflow that runs the deploy command every time you push changes to the `main` branch. + +For the first one you need to run the following command: + +``` +flyctl tokens create deploy -x 999999h +``` + +This will create a token that can be used by flyctl to run deployments. Make sure you save the result as you will need it later. It looks like a very-very long string starting with something like `FlyV1 fm2_lJPECAAAAAAAA...`. + +Next go to your GitHub repository on GitHub, and click Settings. On the left hand side scroll down to "Secrets and variables" and select "Actions". One the page that shows up scroll down to "Repository secrets", and click "New repository secret" + +Set the Name to `FLY_API_TOKEN` and the value to the full results of the previous call. + +Now you have given GitHub access to your fly.io account. You also need to let GitHub know that you want to run a deployment every time your `main` branch changes. First create a file called `.github/workflows/fly-deploy.yml`, with the following content: + +```yaml +name: Fly Deploy +on: + push: + branches: + - main + +jobs: + fly-deploy: + name: Deploy app + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: superfly/flyctl-actions/setup-flyctl@master + - run: flyctl deploy --remote-only + env: + FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} +``` + + +Once you commit this file and push it to your `main` branch, GitHub will automatically run `flyctl deploy` against whatever is in the `main` branch. diff --git a/content/en/guides/deployment/flyio/setup/signup.png b/content/en/guides/deployment/flyio/setup/signup.png new file mode 100644 index 000000000..d7d65118a Binary files /dev/null and b/content/en/guides/deployment/flyio/setup/signup.png differ diff --git a/content/en/guides/deployment/free_deployments.md b/content/en/guides/deployment/free_deployments.md new file mode 100644 index 000000000..1daeaf090 --- /dev/null +++ b/content/en/guides/deployment/free_deployments.md @@ -0,0 +1,45 @@ +--- +id: free_deployments +title: Free deployment offerings +weight: 5 +emoji: 🖥️ +--- + +# Free deployment offerings + +In this section we will showcase you some free options that allow you to deploy your application stack. We will also take note of any limitations each of the providers have. + +{{}} +The CYF Curriculum team suggest [Netlify]({{< ref "/guides/deployment/netlify" >}}). as a free provider to use for both your frontend and backend applications, with Supabase as a free database layer for persistence. This is because among the free tier offerings they have the least amount of limitations. You will need to check these however to make sure they are still suitable for your use case. + +If the limitations of Netlify and/or Supabase are not suitable, a good alternative is Fly.io. Do note it's free tier is limited to two computers, either one backend and one database, or two backends, or two databases. If you have multiple projects that you want to deploy you'll need to either use a different provider, or need to pay for those. +{{}} + +## Frontend + +| Provider | Type | Deployment | Snasphots | Limitations | +|------------------|----------------------------|-----------------------|-------------------------|--------------------------------------------------------------------| +| Netlify | CDN | Automatic from GitHub | Supported, PRs | - | +| Cloudflare Pages | CDN | Automatic from GitHub | Supported, All branches | - | +| Render | CDN or Frontend served by backend | Automatic from GitHub | Supported, PRs | Backend is stopped after inactivity, startup time is slow | +| Fly.io | Frontend served by backend | Manual | None | Free tier limited to two backends, or one backend and one database | + + +## Backend + +| Provider | Type | Deployment | Snasphots | Limitations | +|----------|------------|-----------------------|----------------|-----------------------------------------------------------------------------------------------| +| Netlify | Serverless | Automatic from GitHub | Supported, PRs | Requires Express.JS serverless wrapper, does not support all Express.JS features | +| Render | Persistent | Automatic from GitHub | Supported, PRs | Backend is stopped after inactivity, startup time is slow | +| Fly.io | Persistent | Manual | None | Free tier limited to two backends, or one backend and one database. | +| Glitch | Persistent | Manual | None | Backend is stopped after inactivity, startup time is slow. Not designed for production system | +| Cloudflare Pages | Serverless | Automatic from GitHub | Supported, All branches | Does not support Express.JS serverless wrapper at all, backend needs to be written in a different framework, like Hono | + +## Database + +| Provider | Type | Integration | Limitations | +|---------------|------------------------|-----------------------------------------------------|---------------------------------------------------------------------| +| Supabase | Relational, PostgreSQL | None | Stops after one week of inactivity | +| Render | Relational, PostgreSQL | Integrates with Render based backends automatically | Gets deleted after 3 months without payment | +| Fly.io | Relational, PostgreSQL | Integrates with fly.io based backends automatically | Free tier limited to two databases, or one backend and one database | +| Cloudflare D1 | Relational, SQLite | Integrates with Cloudflare Pages automatically | Not following the Postgres SQL standard | diff --git a/content/en/guides/deployment/from_computers_to_services.md b/content/en/guides/deployment/from_computers_to_services.md new file mode 100644 index 000000000..51dd4dd17 --- /dev/null +++ b/content/en/guides/deployment/from_computers_to_services.md @@ -0,0 +1,46 @@ +--- +id: deployment +title: From your computer to the world +weight: 2 +emoji: 🖥️ +--- + +# From your computer to the world + +While in this curriculum we are mainly going to concentrate on free deployment options to showcase your work it is important for you to understand what "making your work available for the world wide web to see" actually mean. In the following section we will go through a couple of scenarios that are building on each other to show you an idea on why deployments are done in a way they are done. + +## In-person demos + +The easiest, but least convenient way to show your work to others, is to invite them to your computer on which you have your application running. This would assume you know each of your users and trust them enough to give them access to your computer. Also this assumes your users are happy enough to come to your place physically. + +Unfortunately neither of these expectations are usually safe to make, so this option is only valid in a limited set of circumstances. Having the ability to demo your work on your computer is definitely useful in classroom settings to show others what you've done and if you have questions. This will remain a useful way during work as well, as pairing with others demoing them your work is a tried and tested way to showcase what you have done so far to your team. + +## Enabling DMZ on router + +In the previous scenario the biggest difficulty was that the users had to come to your machine physically in person to look at your website. We can avoid that if we keep your computer connected to your home broadband, and (among other updates that are outside of the scope of this guide) change the firewall settings on your router to allow connections from the outside world to reach your computer (this is usually called the DMZ option). You would then need to keep your machine turned on all the time, and make sure that the work that you have been doing is also running constantly. + +If everything goes well this makes your development computer visible to the world-wide-web and people would be able to see your website. However at any time you need to turn off or restart your machine, or you accidentally stop your running application, maybe to deliver updated to it, they would immediately lose access. Also they would always see the latest development version you are working on, which might not be something that you want to show the world yet. + +Home broadband systems are also usually not that stable, and if yours is not unlimited you would also need to check the cost of extra bandwidth. Speaking of extra costs, your electricity bill will also increase by keeping your machine running 24/7. And finally any misconfiguration in your router or computer firewall will enable keen hackers to access your internal network which can usually have serious consequences. + +## Home server + +The next idea is to outsource running your application and have a dedicated computer running your website. You could buy a second machine (this could be an inexpensive one like a Raspberry PI), and set up your router's DMZ settings to point to that instead of your development box. Let's call this second computer a **server** from now on. + +Once you install everything on it as well to mimic your desktop computer this server will then also be able to run your work the same way your development machine can run it. You would need to find a way to copy your work from the development machine to this server (we'll cover some of these in the *manual deployment* section), but at least you are free to turn off your main computer with the knowledge that your website remains up and visible to your users. + +Because your development machine and server are now running two separate versions of your codebase, you can now also always decide which version you want to run on your server, with the version running on it is usually called **production**. Your database will also be running separately, making it less likely to accidentally update something over there instead on your development one. + +## Co-location and VPS + +While this is a more valid scenario (and there are some production systems running like this), there are still a lot of security and privacy implications of running a server at your own home. The next step would be to use a so called co-location company, who are specialized in providing a place to store your server machines for a fee. This fee would, among others, cover the electricity, bandwidth and the security of the facility. Once you put your server over there you usually get remote access to your server to allow updates, but generally they will make sure that the computer is powered on 24/7 and is connected to the internet. + +The next idea is to avoid the big upfront cost of buying a full computer and just rent one. Most hosting companies have an option for you to rent a dedicated server for a monthly price. Dependent on budget this still has a hefty price tag, so after a while you might realize that your project isn't actually that resource intensive and doesn't really require a full server. + +That's where VPS (Virtual Private Server) providers come in. They allow you to rent *part* of a computer running in a virtual machine. There are lots of well known companies in this sector, like Amazon Web Services, Google Cloud Platform, Microsoft Azure, Digital Ocean, Linode or Ionos just to name a few. You might be able to get access to the slowest computer from these companies completely free on a time limited trial basis, or they can be as inexpensive as £1-2 a month. + +## As-a-service + +Running your application stack on a VPS is already a good deployment option, but not the only one. In the examples above we have been running the frontend, backend and database part of our application on the same computer. However these systems actually have different computational needs. Serving static frontend files for example need bandwidth and disk space but don't really require a fast computer or much memory. Databases on the other hand do need a lot of memory to operate efficiently. + +Therefore if you split out your work into separate layers you would be able to deploy each layer on a system that is designed for the needs of that particular layer. For example the database part can run on a dedicated DaaS (Database-as-a-service) instance, while the frontend can be served on fast CDNs (Content Delivery Networks). There are again plenty of companies providing these services, and fortunately some have free tiers available to trial them out. Some of these free tiers are generous enough that they can be used to deploy and host simple applications, and we will talk about them in more detail later. diff --git a/content/en/guides/deployment-netlify/_index.md b/content/en/guides/deployment/netlify/_index.md similarity index 97% rename from content/en/guides/deployment-netlify/_index.md rename to content/en/guides/deployment/netlify/_index.md index 327572e72..b7cdab096 100644 --- a/content/en/guides/deployment-netlify/_index.md +++ b/content/en/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/content/en/guides/deployment-netlify/another-site/01-netlify-dashboard.png b/content/en/guides/deployment/netlify/another-site/01-netlify-dashboard.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/01-netlify-dashboard.png rename to content/en/guides/deployment/netlify/another-site/01-netlify-dashboard.png diff --git a/content/en/guides/deployment-netlify/another-site/02-sites-page.png b/content/en/guides/deployment/netlify/another-site/02-sites-page.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/02-sites-page.png rename to content/en/guides/deployment/netlify/another-site/02-sites-page.png diff --git a/content/en/guides/deployment-netlify/another-site/03-git-provider.png b/content/en/guides/deployment/netlify/another-site/03-git-provider.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/03-git-provider.png rename to content/en/guides/deployment/netlify/another-site/03-git-provider.png diff --git a/content/en/guides/deployment-netlify/another-site/04-choose-repo.png b/content/en/guides/deployment/netlify/another-site/04-choose-repo.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/04-choose-repo.png rename to content/en/guides/deployment/netlify/another-site/04-choose-repo.png diff --git a/content/en/guides/deployment-netlify/another-site/05-choose-branch.png b/content/en/guides/deployment/netlify/another-site/05-choose-branch.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/05-choose-branch.png rename to content/en/guides/deployment/netlify/another-site/05-choose-branch.png diff --git a/content/en/guides/deployment-netlify/another-site/06-site-is-live.png b/content/en/guides/deployment/netlify/another-site/06-site-is-live.png similarity index 100% rename from content/en/guides/deployment-netlify/another-site/06-site-is-live.png rename to content/en/guides/deployment/netlify/another-site/06-site-is-live.png diff --git a/content/en/guides/deployment-netlify/another-site/index.md b/content/en/guides/deployment/netlify/another-site/index.md similarity index 100% rename from content/en/guides/deployment-netlify/another-site/index.md rename to content/en/guides/deployment/netlify/another-site/index.md diff --git a/content/en/guides/deployment-netlify/common-problems.md b/content/en/guides/deployment/netlify/common-problems.md similarity index 100% rename from content/en/guides/deployment-netlify/common-problems.md rename to content/en/guides/deployment/netlify/common-problems.md diff --git a/content/en/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png b/content/en/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png new file mode 100644 index 000000000..a26198a2e Binary files /dev/null and b/content/en/guides/deployment/netlify/deploying-backends/01-netlify-environment-variables.png differ diff --git a/content/en/guides/deployment/netlify/deploying-backends/index.md b/content/en/guides/deployment/netlify/deploying-backends/index.md new file mode 100644 index 000000000..642d66482 --- /dev/null +++ b/content/en/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/content/en/guides/deployment-netlify/first-site/01-netlify-homepage.png b/content/en/guides/deployment/netlify/first-site/01-netlify-homepage.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/01-netlify-homepage.png rename to content/en/guides/deployment/netlify/first-site/01-netlify-homepage.png diff --git a/content/en/guides/deployment-netlify/first-site/02-netlify-signup.png b/content/en/guides/deployment/netlify/first-site/02-netlify-signup.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/02-netlify-signup.png rename to content/en/guides/deployment/netlify/first-site/02-netlify-signup.png diff --git a/content/en/guides/deployment-netlify/first-site/03-github-account-permissions.png b/content/en/guides/deployment/netlify/first-site/03-github-account-permissions.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/03-github-account-permissions.png rename to content/en/guides/deployment/netlify/first-site/03-github-account-permissions.png diff --git a/content/en/guides/deployment-netlify/first-site/04-deploy-first-project.png b/content/en/guides/deployment/netlify/first-site/04-deploy-first-project.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/04-deploy-first-project.png rename to content/en/guides/deployment/netlify/first-site/04-deploy-first-project.png diff --git a/content/en/guides/deployment-netlify/first-site/05-git-provider.png b/content/en/guides/deployment/netlify/first-site/05-git-provider.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/05-git-provider.png rename to content/en/guides/deployment/netlify/first-site/05-git-provider.png diff --git a/content/en/guides/deployment-netlify/first-site/06-github-further-permissions.png b/content/en/guides/deployment/netlify/first-site/06-github-further-permissions.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/06-github-further-permissions.png rename to content/en/guides/deployment/netlify/first-site/06-github-further-permissions.png diff --git a/content/en/guides/deployment-netlify/first-site/07-install-netlify.png b/content/en/guides/deployment/netlify/first-site/07-install-netlify.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/07-install-netlify.png rename to content/en/guides/deployment/netlify/first-site/07-install-netlify.png diff --git a/content/en/guides/deployment-netlify/first-site/08-choose-repo.png b/content/en/guides/deployment/netlify/first-site/08-choose-repo.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/08-choose-repo.png rename to content/en/guides/deployment/netlify/first-site/08-choose-repo.png diff --git a/content/en/guides/deployment-netlify/first-site/09-choose-branch.png b/content/en/guides/deployment/netlify/first-site/09-choose-branch.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/09-choose-branch.png rename to content/en/guides/deployment/netlify/first-site/09-choose-branch.png diff --git a/content/en/guides/deployment-netlify/first-site/10-site-is-live.png b/content/en/guides/deployment/netlify/first-site/10-site-is-live.png similarity index 100% rename from content/en/guides/deployment-netlify/first-site/10-site-is-live.png rename to content/en/guides/deployment/netlify/first-site/10-site-is-live.png diff --git a/content/en/guides/deployment-netlify/first-site/index.md b/content/en/guides/deployment/netlify/first-site/index.md similarity index 100% rename from content/en/guides/deployment-netlify/first-site/index.md rename to content/en/guides/deployment/netlify/first-site/index.md diff --git a/content/en/guides/deployment-netlify/renaming-site/01-netlify-dashboard.png b/content/en/guides/deployment/netlify/renaming-site/01-netlify-dashboard.png similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/01-netlify-dashboard.png rename to content/en/guides/deployment/netlify/renaming-site/01-netlify-dashboard.png diff --git a/content/en/guides/deployment-netlify/renaming-site/02-list-of-sites.png b/content/en/guides/deployment/netlify/renaming-site/02-list-of-sites.png similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/02-list-of-sites.png rename to content/en/guides/deployment/netlify/renaming-site/02-list-of-sites.png diff --git a/content/en/guides/deployment-netlify/renaming-site/03-site-overview.png b/content/en/guides/deployment/netlify/renaming-site/03-site-overview.png similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/03-site-overview.png rename to content/en/guides/deployment/netlify/renaming-site/03-site-overview.png diff --git a/content/en/guides/deployment-netlify/renaming-site/04-site-settings.png b/content/en/guides/deployment/netlify/renaming-site/04-site-settings.png similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/04-site-settings.png rename to content/en/guides/deployment/netlify/renaming-site/04-site-settings.png diff --git a/content/en/guides/deployment-netlify/renaming-site/05-site-name-input.png b/content/en/guides/deployment/netlify/renaming-site/05-site-name-input.png similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/05-site-name-input.png rename to content/en/guides/deployment/netlify/renaming-site/05-site-name-input.png diff --git a/content/en/guides/deployment-netlify/renaming-site/index.md b/content/en/guides/deployment/netlify/renaming-site/index.md similarity index 100% rename from content/en/guides/deployment-netlify/renaming-site/index.md rename to content/en/guides/deployment/netlify/renaming-site/index.md diff --git a/content/en/guides/deployment-netlify/site-naming-conventions.md b/content/en/guides/deployment/netlify/site-naming-conventions.md similarity index 74% rename from content/en/guides/deployment-netlify/site-naming-conventions.md rename to content/en/guides/deployment/netlify/site-naming-conventions.md index f19db1c80..5f846eef6 100644 --- a/content/en/guides/deployment-netlify/site-naming-conventions.md +++ b/content/en/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/content/en/guides/deployment-render/_index.md b/content/en/guides/deployment/render/_index.md similarity index 80% rename from content/en/guides/deployment-render/_index.md rename to content/en/guides/deployment/render/_index.md index 97e31673e..a6b4316da 100644 --- a/content/en/guides/deployment-render/_index.md +++ b/content/en/guides/deployment/render/_index.md @@ -2,12 +2,13 @@ emoji: 🚀 title: Deploying to Render description: Learn how to deploy your website to Render. +weight: 7 --- In this guide, we'll learn how to set up automatic website deployment to [Render](https://render.com/). {{}} -This guide is intended for trainees completing the Node, Databases or Final Projects. If you have not reached this part of the course yet, please use the [Netlify Deployment guide](../deployment-netlify/index.md) instead. +This guide is intended for trainees completing the Node, Databases or Final Projects. If you have not reached this part of the course yet, please use the [Netlify Deployment guide](../netlify) instead. {{}} diff --git a/content/en/guides/deployment/render/connecting-a-dbms/changing-environment-variables.png b/content/en/guides/deployment/render/connecting-a-dbms/changing-environment-variables.png new file mode 100644 index 000000000..c87ecfaa6 Binary files /dev/null and b/content/en/guides/deployment/render/connecting-a-dbms/changing-environment-variables.png differ diff --git a/content/en/guides/deployment-render/connecting-a-dbms/connection-error.png b/content/en/guides/deployment/render/connecting-a-dbms/connection-error.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/connection-error.png rename to content/en/guides/deployment/render/connecting-a-dbms/connection-error.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/connection-successful.png b/content/en/guides/deployment/render/connecting-a-dbms/connection-successful.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/connection-successful.png rename to content/en/guides/deployment/render/connecting-a-dbms/connection-successful.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/connection-test.png b/content/en/guides/deployment/render/connecting-a-dbms/connection-test.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/connection-test.png rename to content/en/guides/deployment/render/connecting-a-dbms/connection-test.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/db-credentials.png b/content/en/guides/deployment/render/connecting-a-dbms/db-credentials.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/db-credentials.png rename to content/en/guides/deployment/render/connecting-a-dbms/db-credentials.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/db-drivers.png b/content/en/guides/deployment/render/connecting-a-dbms/db-drivers.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/db-drivers.png rename to content/en/guides/deployment/render/connecting-a-dbms/db-drivers.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/index.md b/content/en/guides/deployment/render/connecting-a-dbms/index.md similarity index 67% rename from content/en/guides/deployment-render/connecting-a-dbms/index.md rename to content/en/guides/deployment/render/connecting-a-dbms/index.md index 1c7567cc2..c4044108e 100644 --- a/content/en/guides/deployment-render/connecting-a-dbms/index.md +++ b/content/en/guides/deployment/render/connecting-a-dbms/index.md @@ -2,6 +2,7 @@ title: client > database description: Connecting a client to a database on Render emoji: 🔌 +weight: 4 --- {{}} @@ -54,28 +55,41 @@ This guide uses a database client called [DBeaver](https://dbeaver.io/), but the # Connecting via node.js We learnt in the Databases module to use the `pg` library to connect to a local Postgres database. To connect via render we require an extra flag `ssl: { rejectUnauthorized: false }`, like so: + ```javascript +const connectionString = "postgres://jz:someverysecretpassword@dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com/fullstack_3qby"; + const db = new Pool({ - user: "jz", - host: "dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com", - database: "fullstack_3qby", - password: "NLNXAWPsYPzOn3kKzExavV08DugCC0rx", + connectionString: connectionString, ssl: { rejectUnauthorized: false, }, }); ``` -Note that the `host` does not exactly match what is shown on the render.com dashboard - you should use the information in `External Database URL` to connect from your own computer: +When connecting to Render's database from your local machine you should use the information in `External Database URL`: ![render.com dashboard connections](render-dashboard.png) -However, if you are running your client on render alongside your server, then you will be able to use the `Internal Database URL` instead. In this case, the `host` will indeed match. -You can also directly copy the url into a `connectionString` and it should work in the same way: -```javascript -const db = new Pool({ - connectionString: "postgres://jz:NLNXAWPsYPzOn3kKzExavV08DugCC0rx@dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com/fullstack_3qby", - ssl: { - rejectUnauthorized: false, - }, -}); +However, if you are running your client on render alongside your server, then you will be able to use the `Internal Database URL` instead. + +Note that when committing code to GitHub you should avoid adding any kind of secrets. The `connectionString` above for example contains your database password, and anyone knowing that information will be able to access your database directly. + +To avoid this you should set up these values using environment variables. First in your code change the following: + +```js +const connectionString = process.env.DATABASE_URL; ``` + +Then go to your project's configuration in Render, and set up the `DATABASE_URL` environment variable: + +![render.com environment settings](changing-environment-variables.png) + +Make sure you use the `Internal Database URL` setting. This will let Render know what the database's location is. + +To set this value locally you can use the following code: + +```bash +export DATABASE_URL= +``` + +Note this will only set up this value for the current session. Every time you reload your terminal you will need to re-do this call. To avoid needing to do this all the time, you can opt in using a project called [Dotenv](https://github.com/motdotla/dotenv) diff --git a/content/en/guides/deployment-render/connecting-a-dbms/new-connection.png b/content/en/guides/deployment/render/connecting-a-dbms/new-connection.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/new-connection.png rename to content/en/guides/deployment/render/connecting-a-dbms/new-connection.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/render-dashboard.png b/content/en/guides/deployment/render/connecting-a-dbms/render-dashboard.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/render-dashboard.png rename to content/en/guides/deployment/render/connecting-a-dbms/render-dashboard.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/selecting-postgres.png b/content/en/guides/deployment/render/connecting-a-dbms/selecting-postgres.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/selecting-postgres.png rename to content/en/guides/deployment/render/connecting-a-dbms/selecting-postgres.png diff --git a/content/en/guides/deployment-render/connecting-a-dbms/show-all-databases.png b/content/en/guides/deployment/render/connecting-a-dbms/show-all-databases.png similarity index 100% rename from content/en/guides/deployment-render/connecting-a-dbms/show-all-databases.png rename to content/en/guides/deployment/render/connecting-a-dbms/show-all-databases.png diff --git a/content/en/guides/deployment-render/connecting-github/index.md b/content/en/guides/deployment/render/connecting-github/index.md similarity index 98% rename from content/en/guides/deployment-render/connecting-github/index.md rename to content/en/guides/deployment/render/connecting-github/index.md index 74a1107f9..15e86fa88 100644 --- a/content/en/guides/deployment-render/connecting-github/index.md +++ b/content/en/guides/deployment/render/connecting-github/index.md @@ -2,6 +2,7 @@ title: GitHub > Render description: How to connect your GitHub to Render emoji: 🔌 +weight: 1 --- 1. Click SIGN IN button diff --git a/content/en/guides/deployment-render/connecting-github/sign-in-with-github.png b/content/en/guides/deployment/render/connecting-github/sign-in-with-github.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/sign-in-with-github.png rename to content/en/guides/deployment/render/connecting-github/sign-in-with-github.png diff --git a/content/en/guides/deployment-render/connecting-github/sign-in.png b/content/en/guides/deployment/render/connecting-github/sign-in.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/sign-in.png rename to content/en/guides/deployment/render/connecting-github/sign-in.png diff --git a/content/en/guides/deployment-render/connecting-github/sign-up-complete.png b/content/en/guides/deployment/render/connecting-github/sign-up-complete.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/sign-up-complete.png rename to content/en/guides/deployment/render/connecting-github/sign-up-complete.png diff --git a/content/en/guides/deployment-render/connecting-github/verification-email-link.png b/content/en/guides/deployment/render/connecting-github/verification-email-link.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/verification-email-link.png rename to content/en/guides/deployment/render/connecting-github/verification-email-link.png diff --git a/content/en/guides/deployment-render/connecting-github/verification-email-received.png b/content/en/guides/deployment/render/connecting-github/verification-email-received.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/verification-email-received.png rename to content/en/guides/deployment/render/connecting-github/verification-email-received.png diff --git a/content/en/guides/deployment-render/connecting-github/verification-email-sent.png b/content/en/guides/deployment/render/connecting-github/verification-email-sent.png similarity index 100% rename from content/en/guides/deployment-render/connecting-github/verification-email-sent.png rename to content/en/guides/deployment/render/connecting-github/verification-email-sent.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/connect-button.png b/content/en/guides/deployment/render/creating-a-postgres-db/connect-button.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/connect-button.png rename to content/en/guides/deployment/render/creating-a-postgres-db/connect-button.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/database-active.png b/content/en/guides/deployment/render/creating-a-postgres-db/database-active.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/database-active.png rename to content/en/guides/deployment/render/creating-a-postgres-db/database-active.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/database-creating.png b/content/en/guides/deployment/render/creating-a-postgres-db/database-creating.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/database-creating.png rename to content/en/guides/deployment/render/creating-a-postgres-db/database-creating.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/database-name.png b/content/en/guides/deployment/render/creating-a-postgres-db/database-name.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/database-name.png rename to content/en/guides/deployment/render/creating-a-postgres-db/database-name.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/environment-variables.png b/content/en/guides/deployment/render/creating-a-postgres-db/environment-variables.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/environment-variables.png rename to content/en/guides/deployment/render/creating-a-postgres-db/environment-variables.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/free-plan-and-create-database.png b/content/en/guides/deployment/render/creating-a-postgres-db/free-plan-and-create-database.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/free-plan-and-create-database.png rename to content/en/guides/deployment/render/creating-a-postgres-db/free-plan-and-create-database.png diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/index.md b/content/en/guides/deployment/render/creating-a-postgres-db/index.md similarity index 83% rename from content/en/guides/deployment-render/creating-a-postgres-db/index.md rename to content/en/guides/deployment/render/creating-a-postgres-db/index.md index 2a78c5ae5..1a3d4fca7 100644 --- a/content/en/guides/deployment-render/creating-a-postgres-db/index.md +++ b/content/en/guides/deployment/render/creating-a-postgres-db/index.md @@ -2,6 +2,7 @@ title: PostgreSQL > Render description: How to create a PostgreSQL Database on Render emoji: 🐘 +weight: 3 --- 1. Click on the New + button, then click on PostgreSQL @@ -28,6 +29,8 @@ emoji: 🐘 ![Environment variables in the Connections tab](environment-variables.png) -7. The Connect button could be useful for quick Environment Variable reference +7. If you are using a Render database outside of Render, you'll need to use the External Database URL. If you are using the database inside of Render, you should use the Internal Database URL. + +8. The Connect button could be useful for quick Environment Variable reference ![Connect button showing quick reference to environment variables](connect-button.png) diff --git a/content/en/guides/deployment-render/creating-a-postgres-db/new-postgres.png b/content/en/guides/deployment/render/creating-a-postgres-db/new-postgres.png similarity index 100% rename from content/en/guides/deployment-render/creating-a-postgres-db/new-postgres.png rename to content/en/guides/deployment/render/creating-a-postgres-db/new-postgres.png diff --git a/content/en/guides/deployment-render/deploying-server/authorise-render.png b/content/en/guides/deployment/render/deploying-server/authorise-render.png similarity index 100% rename from content/en/guides/deployment-render/deploying-server/authorise-render.png rename to content/en/guides/deployment/render/deploying-server/authorise-render.png diff --git a/content/en/guides/deployment-render/deploying-server/build-successful.jpg b/content/en/guides/deployment/render/deploying-server/build-successful.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/build-successful.jpg rename to content/en/guides/deployment/render/deploying-server/build-successful.jpg diff --git a/content/en/guides/deployment-render/deploying-server/complete-sign-up.png b/content/en/guides/deployment/render/deploying-server/complete-sign-up.png similarity index 100% rename from content/en/guides/deployment-render/deploying-server/complete-sign-up.png rename to content/en/guides/deployment/render/deploying-server/complete-sign-up.png diff --git a/content/en/guides/deployment-render/deploying-server/connect-repo.jpg b/content/en/guides/deployment/render/deploying-server/connect-repo.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/connect-repo.jpg rename to content/en/guides/deployment/render/deploying-server/connect-repo.jpg diff --git a/content/en/guides/deployment-render/deploying-server/create-web-service.jpg b/content/en/guides/deployment/render/deploying-server/create-web-service.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/create-web-service.jpg rename to content/en/guides/deployment/render/deploying-server/create-web-service.jpg diff --git a/content/en/guides/deployment-render/deploying-server/dashboard-new-button.png b/content/en/guides/deployment/render/deploying-server/dashboard-new-button.png similarity index 100% rename from content/en/guides/deployment-render/deploying-server/dashboard-new-button.png rename to content/en/guides/deployment/render/deploying-server/dashboard-new-button.png diff --git a/content/en/guides/deployment-render/deploying-server/index.md b/content/en/guides/deployment/render/deploying-server/index.md similarity index 99% rename from content/en/guides/deployment-render/deploying-server/index.md rename to content/en/guides/deployment/render/deploying-server/index.md index 7c5912762..d2bde3ab6 100644 --- a/content/en/guides/deployment-render/deploying-server/index.md +++ b/content/en/guides/deployment/render/deploying-server/index.md @@ -2,6 +2,7 @@ title: Deploy a server description: How to deploy a server on Render emoji: 🍦 +weight: 2 --- 1. Make sure you have connected your GitHub account to Render (see [How to connect your GitHub to Render](connecting-github.md)) diff --git a/content/en/guides/deployment-render/deploying-server/name-web-service.jpg b/content/en/guides/deployment/render/deploying-server/name-web-service.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/name-web-service.jpg rename to content/en/guides/deployment/render/deploying-server/name-web-service.jpg diff --git a/content/en/guides/deployment-render/deploying-server/new-web-service.jpg b/content/en/guides/deployment/render/deploying-server/new-web-service.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/new-web-service.jpg rename to content/en/guides/deployment/render/deploying-server/new-web-service.jpg diff --git a/content/en/guides/deployment-render/deploying-server/render-dashboard.png b/content/en/guides/deployment/render/deploying-server/render-dashboard.png similarity index 100% rename from content/en/guides/deployment-render/deploying-server/render-dashboard.png rename to content/en/guides/deployment/render/deploying-server/render-dashboard.png diff --git a/content/en/guides/deployment-render/deploying-server/start-command.jpg b/content/en/guides/deployment/render/deploying-server/start-command.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/start-command.jpg rename to content/en/guides/deployment/render/deploying-server/start-command.jpg diff --git a/content/en/guides/deployment-render/deploying-server/url-to-deployed-web-service.jpg b/content/en/guides/deployment/render/deploying-server/url-to-deployed-web-service.jpg similarity index 100% rename from content/en/guides/deployment-render/deploying-server/url-to-deployed-web-service.jpg rename to content/en/guides/deployment/render/deploying-server/url-to-deployed-web-service.jpg diff --git a/content/en/guides/deployment/render/serving-frontend-through-backend.md b/content/en/guides/deployment/render/serving-frontend-through-backend.md new file mode 100644 index 000000000..22a0231b4 --- /dev/null +++ b/content/en/guides/deployment/render/serving-frontend-through-backend.md @@ -0,0 +1,8 @@ +--- +title: Serving frontend through backend +description: Serving frontend through backend +emoji: 🖥️ +weight: 5 +--- + +Render support frontend deployments either via their CDN, or by changing your backend code to support serving frontend files. If you wish CDN style deployment we suggest you use Netlify instead. For a guide on how to update your backend to support serving frontend files please read [the Fly.io frontend guide](../flyio/serving-frontend) guide. diff --git a/content/en/guides/deployment/supabase/_index.md b/content/en/guides/deployment/supabase/_index.md new file mode 100644 index 000000000..57e092f70 --- /dev/null +++ b/content/en/guides/deployment/supabase/_index.md @@ -0,0 +1,53 @@ +--- +emoji: 🚀 +title: Create database on Supabase +description: Learn how to create a database on Supabase +weight: 9 +--- + +## Intro + +Supabase is a cloud provider providing multiple services. One of it's core services are PostgreSQL databases. Supabase's free tier is much more generous to Render's, however if the database is not accessed for a week it will hibernate the database and you will need to manually restart it on its frontend. + +## Registration + +To set up your database do the following: + +1. Go to their website at https://supabase.com/ and click "Start your project" +2. Sign up using GitHub +3. On the resulting page it will ask you to create your first project. +4. Set the name of the database to `your-project-name` +5. On the database password part click "Generate a password". Make sure you copy and store this value in a secure place, preferably a password manager +6. As a region pick `"East US (Northern Virginia)"` if you are using Netlify for your backend, as this is the closest region to it. If you are using other backend providers you should check which region they are in and select the closest one to them here. +7. Finally click "Create a new project" + +## Connection string / `DATABASE_URL` + +Once your project is ready go to the project's dashboard. Then on the left hand side click Settings (it's the icon with a cogwheel) and then go to the "Database" tab. + +Scroll down to the "Connection Pooling" part, make sure to select "Session" as the "Pool Mode", and finally copy the "Connection String". This will looks something like: + +``` +postgres://postgres.fjdshfkjsfhkuse:[YOUR-PASSWORD]@aws-0-eu-west-2.pooler.supabase.com:6543/postgres +``` + +You need to replace the `[YOUR-PASSWORD]` part with the one you set up during registration. IF you have forgotten that, there will be a "Reset database password" button on this website to set it up again. + +Make sure to click "Save" as well, if you needed to change the "Pool Mode" setting. + +![Settings page](connection-string.png) + +## Accessing the database + +Gather the following details: + +1. The server. This will be something like `aws-0-eu-west-2.pooler.supabase.com` for Supabase +2. The username. This will be something like `postgres.fjdshfkjsfhkuse`. +3. The database name. This will be `postgres`. +3. Your password. This is what you have entered when creating the database. + +Now you have all of the details that you need to use on the command line to login to your server: + +```bash +psql -h server_from_above -U username_from_above database_name_from_above +``` diff --git a/content/en/guides/deployment/supabase/connection-string.png b/content/en/guides/deployment/supabase/connection-string.png new file mode 100644 index 000000000..d1c39b897 Binary files /dev/null and b/content/en/guides/deployment/supabase/connection-string.png differ diff --git a/content/en/html-css/product/ship/index.md b/content/en/html-css/product/ship/index.md index 265553fc1..07efc6ea5 100644 --- a/content/en/html-css/product/ship/index.md +++ b/content/en/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.