|
41 | 41 |
|
42 | 42 | Next, configure your `nitric.yaml` to enable and configure the website:
|
43 | 43 |
|
| 44 | +<Note> |
| 45 | +Along with the website configuration, you will need to add the `preview` key to your `nitric.yaml`, as website support is currently a preview feature and subject to change. |
| 46 | +</Note> |
| 47 | + |
44 | 48 | ```yaml title:nitric.yaml
|
45 | 49 | name: survey-app
|
46 | 50 | services:
|
@@ -211,6 +215,40 @@ This will start the API and the website together, and serve your React frontend
|
211 | 215 |
|
212 | 216 | To test it, visit [http://localhost:5000](http://localhost:5000) in your browser and submit a survey response. You should see a link to view the generated receipt hosted by the backend.
|
213 | 217 |
|
214 |
| -## Conclusion |
| 218 | +## Deploying to AWS |
| 219 | + |
| 220 | +With the frontend tested, you can deploy it to the cloud knowing it will function as intended. Nitric will deploy your frontend and backend together, serving them under the same origin. This eliminates CORS issues and removes the need for headers, complex gateway config, or workarounds. |
| 221 | + |
| 222 | +Deployment to the cloud requires that you have created a stack file. If you had followed the backend guide, you should have this stack file already; otherwise, follow the steps below. |
| 223 | + |
| 224 | +### Create your stack |
| 225 | + |
| 226 | +Create an AWS stack called `aws-staging` for your staging environment. |
| 227 | + |
| 228 | +```bash |
| 229 | +nitric stack new aws-staging aws |
| 230 | +``` |
| 231 | + |
| 232 | +Inside the stack file, set your `region`. |
| 233 | + |
| 234 | +```yaml title:nitric.dev.yaml |
| 235 | +provider: nitric/aws@latest |
| 236 | +region: us-east-2 |
| 237 | +``` |
| 238 | +
|
| 239 | +## Deploy |
| 240 | +Deploy to AWS using the `nitric up` command. Ensure you have set up your [AWS credentials](/providers/pulumi/aws#usage) correctly. |
| 241 | + |
| 242 | +```bash |
| 243 | +nitric up |
| 244 | +``` |
215 | 245 |
|
216 |
| -Serving your React frontend and Nitric backend under the same origin, both locally and in the cloud, eliminates CORS issues and removes the need for headers, complex gateway config, or workarounds. |
| 246 | +This should output a URL pointing to the CDN like `xxxx.cloudfront.net`. You can go to this URL in your browser, and it will take you to the website with your survey form. All API routes will be served under `xxxx.cloudfront.net/apis`. |
| 247 | + |
| 248 | +## Tear down |
| 249 | + |
| 250 | +To avoid unwanted costs of running your test app, you can tear down the stack using the `nitric down` command. |
| 251 | + |
| 252 | +```bash |
| 253 | +nitric down |
| 254 | +``` |
0 commit comments