|
1 | | -# Payload Blank Template |
| 1 | +# Vector: Interior Design Website |
2 | 2 |
|
3 | | -This template comes configured with the bare minimum to get started on anything you need. |
| 3 | +This is the website hosting the portfolio for [Vector: Intrior Design](https://vectorinterior.design/). |
| 4 | +It is written using [Nextjs](https://nextjs.org/) and [PayloadCMS](https://payloadcms.com/). |
4 | 5 |
|
5 | | -## Quick start |
| 6 | +It is a rewrite of the arguably cooler and more intricate [first version](./tree/development) due to optimization issues. |
| 7 | +This version uses Nextjs ISR functionality and nginx caching to deliver prerendered pages instead of generating the same page over |
| 8 | +and over at request time. It also using Next's image optimization to better deliver images that are the correct size for every screen. |
6 | 9 |
|
7 | | -This template can be deployed directly from our Cloud hosting and it will setup MongoDB and cloud S3 object storage for media. |
| 10 | +# Environment Variables and Secrets |
8 | 11 |
|
9 | | -## Quick Start - local setup |
| 12 | +## Environment Variables |
10 | 13 |
|
11 | | -To spin up this template locally, follow these steps: |
| 14 | +| Variable | Description | |
| 15 | +|------------|----------------------------------------------------------| |
| 16 | +| DOMAIN | The domain of the website (without protocol) | |
| 17 | +| SMTP_HOST | The smtp host of the email address for password recovery | |
| 18 | +| EMAIL_USER | The email address to use for password recovery | |
12 | 19 |
|
13 | | -### Clone |
| 20 | +## Secrets |
14 | 21 |
|
15 | | -After you click the `Deploy` button above, you'll want to have standalone copy of this repo on your machine. If you've already cloned this repo, skip to [Development](#development). |
| 22 | +Saved in `.secrets/<secret-name>.txt` |
16 | 23 |
|
17 | | -### Development |
| 24 | +| Secret | Description | |
| 25 | +|-------------------|------------------------------------------------------| |
| 26 | +| email-password | The password of the email used for password recovery | |
| 27 | +| payload-secret | A random secret used for payload encryption | |
| 28 | +| postgres-password | The password used for the root user of the database | |
18 | 29 |
|
19 | | -1. First [clone the repo](#clone) if you have not done so already |
20 | | -2. `cd my-project && cp .env.example .env` to copy the example environment variables. You'll need to add the `MONGODB_URI` from your Cloud project to your `.env` if you want to use S3 storage and the MongoDB database that was created for you. |
| 30 | +# Running |
21 | 31 |
|
22 | | -3. `pnpm install && pnpm dev` to install dependencies and start the dev server |
23 | | -4. open `http://localhost:3000` to open the app in your browser |
| 32 | +This site is deploy to a docker compose setup and can be run in any VPS. There are two ways of running this project: |
24 | 33 |
|
25 | | -That's it! Changes made in `./src` will be reflected in your app. Follow the on-screen instructions to login and create your first admin user. Then check out [Production](#production) once you're ready to build and serve your app, and [Deployment](#deployment) when you're ready to go live. |
| 34 | +- **Development:** Ran by using docker's file override system using the command `docker compose -f docker-compose.yml -f docker-compose.dev.yml up -w`. This copies over the entire source code and enables hmr in nextjs. |
| 35 | +- **Deployment**: Ran by using the default `docker-compose.yml` file this method using a multi stage build to only deploy the production ready code. |
26 | 36 |
|
27 | | -#### Docker (Optional) |
| 37 | +## Notes |
28 | 38 |
|
29 | | -If you prefer to use Docker for local development instead of a local MongoDB instance, the provided docker-compose.yml file can be used. |
30 | | - |
31 | | -To do so, follow these steps: |
32 | | - |
33 | | -- Modify the `MONGODB_URI` in your `.env` file to `mongodb://127.0.0.1/<dbname>` |
34 | | -- Modify the `docker-compose.yml` file's `MONGODB_URI` to match the above `<dbname>` |
35 | | -- Run `docker-compose up` to start the database, optionally pass `-d` to run in the background. |
36 | | - |
37 | | -## How it works |
38 | | - |
39 | | -The Payload config is tailored specifically to the needs of most websites. It is pre-configured in the following ways: |
40 | | - |
41 | | -### Collections |
42 | | - |
43 | | -See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend this functionality. |
44 | | - |
45 | | -- #### Users (Authentication) |
46 | | - |
47 | | - Users are auth-enabled collections that have access to the admin panel. |
48 | | - |
49 | | - For additional help, see the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) or the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs. |
50 | | - |
51 | | -- #### Media |
52 | | - |
53 | | - This is the uploads enabled collection. It features pre-configured sizes, focal point and manual resizing to help you manage your pictures. |
54 | | - |
55 | | -### Docker |
56 | | - |
57 | | -Alternatively, you can use [Docker](https://www.docker.com) to spin up this template locally. To do so, follow these steps: |
58 | | - |
59 | | -1. Follow [steps 1 and 2 from above](#development), the docker-compose file will automatically use the `.env` file in your project root |
60 | | -1. Next run `docker-compose up` |
61 | | -1. Follow [steps 4 and 5 from above](#development) to login and create your first admin user |
62 | | - |
63 | | -That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams. |
64 | | - |
65 | | -## Questions |
66 | | - |
67 | | -If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions). |
| 39 | +1. Nginx is one of the services in the docker compose setup and is used as a reverse proxy for nextjs using an encrypted connection. If running in development mode the files `./nginx/fullchain.pem` and `./nginx/privkey.pem` should exist. They can be a self signed certificate. For deployment they should live at `/etc/letsencrypt/live/${DOMAIN}` |
| 40 | +2. Payload CMS has the ability to hot reload database changes without having to migrate. In some cases where it can't determine on its own what to do it will prompt the user. Since the promps aren't answerable through docker, in this case the nextjs server should be run locally with `npm run dev` with the environemnt variable `DATABASE_URI="postgres://postgres:<password>@localhost:5432/postgres"` set. This should be the only reason to run the server locally, everything else should be done through docker dev mode. |
0 commit comments