|
2 | 2 |
|
3 | 3 | [](https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3Dsample-nodejs-react-postgres-template%26template_owner%3DDefangSamples)`
|
4 | 4 |
|
5 |
| -This sample project demonstrates how to deploy a full-stack application using React for the frontend, Node.js for the backend, and PostgreSQL for the database. The project uses Docker to containerize the services, making it easy to run in both development and production environments. |
| 5 | +This sample project demonstrates how to deploy a full-stack application using React for the frontend, Node.js for the backend, and PostgreSQL for the database. |
6 | 6 |
|
7 | 7 | In this sample, we have set up the essential files you need to deploy in production using [Neon](https://neon.tech/) to host your database. We use a connection string to connect Neon to your code. By replacing the pre-configured connection string at .env and at the compose file to yours, you will be ready to deploy this sample with Neon.
|
8 | 8 |
|
9 |
| -## Essential Setup Files |
| 9 | +## Prerequisites |
10 | 10 |
|
11 |
| -1. Download [Defang CLI] (https://github.com/defang-io/defang) |
12 |
| -2. (optional) If you are using [Defang BYOC] (https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) authenticated your AWS account. |
13 |
| -3. (optional for local development) [Docker CLI] (https://docs.docker.com/engine/install/) |
| 11 | +1. Download [Defang CLI](https://github.com/DefangLabs/defang) |
| 12 | +2. (Optional) If you are using [Defang BYOC](https://docs.defang.io/docs/concepts/defang-byoc) authenticate with your cloud provider account |
| 13 | +3. (Optional for local development) [Docker CLI](https://docs.docker.com/engine/install/) |
14 | 14 |
|
15 | 15 | ## Development
|
16 | 16 |
|
17 |
| -To start the development environment, run `docker compose -f ./compose.yaml -f ./compose.dev.yaml up`. This will start the Postgres container, the React container, and the NodeJS container. The development container (compose.dev.yaml) will override the production container (compose.yaml). |
| 17 | +To run the application locally, you can use the following command: |
18 | 18 |
|
| 19 | +```bash |
| 20 | +docker compose -f compose.dev.yaml up --build |
| 21 | +``` |
19 | 22 | Or run without using Docker by doing the following:
|
20 | 23 |
|
21 |
| -1. run npm install to install the nodejs dependencies in both the `client` directory and the `server` directory |
| 24 | +1. run `npm install` to install the nodejs dependencies in both the `client` directory and the `server` directory |
22 | 25 | 2. create or modify the .env file in both the `client` directory and the `server` directory with localhost, or create a .env.local to override the .env file.
|
23 |
| -3. run npm start |
| 26 | +3. run `npm start` |
24 | 27 |
|
25 |
| -## Deploying |
| 28 | +## Configuration |
| 29 | +For this sample, you will need to provide the following [configuration](https://docs.defang.io/docs/concepts/configuration): |
26 | 30 |
|
27 |
| -1. Open the terminal and type `defang login` |
28 |
| -2. Add your connection string as a defang config value by typing `defang config set DATABASE_URL` and pasting your connection string (which should be in the format `postgres://username:password@host:port/dbname`) |
29 |
| -3. Update your `compose.yaml` file to replace `<YOUR_USERNAME>` with your username (which you can get by running `defang whoami`. "Tenant" is your username.) |
30 |
| -4. Type `defang compose up` in the CLI. |
31 |
| -5. Your app will be running within a few minutes. |
| 31 | +> Note that if you are using the 1-click deploy option, you can set these values as secrets in your GitHub repository and the action will automatically deploy them for you. |
| 32 | +
|
| 33 | +### `DATABASE_URL` |
| 34 | +A connection to the database, which should be in the format of `postgres://username:password@host:port/dbname`. |
| 35 | +```bash |
| 36 | +defang config set DATABASE_URL |
| 37 | +``` |
| 38 | + |
| 39 | +### `REACT_APP_API_URL` |
| 40 | +A URL for the React App. For this, you will need to update the `compose.yaml` file to replace `<YOUR_USERNAME>` with your username, which you can get by running `defang whoami`. |
| 41 | + |
| 42 | +## Deployment |
| 43 | + |
| 44 | +> [!NOTE] |
| 45 | +> Download [Defang CLI](https://github.com/DefangLabs/defang) |
| 46 | +
|
| 47 | +### Defang Playground |
| 48 | + |
| 49 | +Deploy your application to the Defang Playground by opening up your terminal and typing: |
| 50 | +```bash |
| 51 | +defang compose up |
| 52 | +``` |
| 53 | + |
| 54 | +### BYOC (AWS) |
| 55 | + |
| 56 | +If you want to deploy to your own cloud account, you can [use Defang BYOC](https://docs.defang.io/docs/tutorials/deploy-to-your-cloud): |
32 | 57 |
|
33 | 58 | ---
|
34 | 59 |
|
|
0 commit comments