Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.amplify.aws/gen1/react/build-a-backend/server-side-rendering/nuxt/ below:

Website Navigation

• Skip to main content

Use Amplify categories APIs from Nuxt 3 - React

If you have not already done so, please read the introduction documentation, Use Amplify Categories APIs in Server Side Rendering, to learn about how to use Amplify categories APIs in server-side rendering.

This documentation provides a getting-started guide to using the generic runWithAmplifyServerContext adapter (exported from aws-amplify/adapter-core) to enable Amplify in a Nuxt 3 project. The examples in this documentation may not present best practices for your Nuxt project. You are welcome to provide suggestions and contributions to improve this documentation or to create a Nuxt adapter package for Amplify and let others use it.

NOTE: This guide assumes that you have a deep knowledge of Nuxt 3.

Nuxt 3 offers universal rendering by default, where your data fetching logic may be executed on both the client and server sides. Amplify offers APIs that are capable of running within a server context to support use cases such as server-side rendering (SSR) and static site generation (SSG), though Amplify's client-side APIs and server-side APIs of Amplify are slightly different. You can set up an AmplifyAPIs plugin to make your data fetching logic run smoothly across the client and server.

1. If you haven’t already done so, create a plugins directory under the root of your Nuxt project
2. Create two files 01.amplify-apis.client.ts and 01.amplify-apis.server.ts under the plugins directory

In these files, you will register both client-specific and server-specific Amplify APIs that you will use in your Nuxt project as a plugin. You can then access these APIs via the useNuxtApp composable.

Example implementation:

Learn more

Expand to view the example implementation

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

Example implementation:

Learn more

Expand to view the example implementation

Using the Storage list API in ~/pages/storage-list.vue:

Using the GraphQL API in ~/pages/todos-list.vue:

The above two pages can be rendered on both the client and server sides by default. useNuxtApp().$Amplify will pick up the correct implementation of 01.amplify-apis.client.ts and 01.amplify-apis.server.ts to use, depending on the runtime.

Only a subset of Amplify APIs are usable on the server side, and as the libraries evolve, amplify-apis.client and amplify-apis.server may diverge further. You can guard your API calls to ensure an API is available in the context where you use it. E.g., you can use if (process.client) to ensure that a client-only API isn't executed on the server.

The auth middleware will use the plugin set up in the previous step as a dependency; therefore you can add the auth middleware via another plugin that will be loaded after the previous one.

1. Create a 02.auth-redirect.ts file under plugins directory

Example implementation:

Learn more

Expand to view the example implementation

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

Following the specification of Nuxt, your API route handlers will live under ~/server, which is a separate environment from other parts of your Nuxt app; hence, the plugins created in the previous sections are not usable here, and extra work is required.

1. If you haven’t already done so, create a utils directory under the server directory of your Nuxt project
2. Create an amplifyUtils.ts file under the utils directory

In this file, you will create a helper function to call Amplify APIs that are capable of running on the server side with context isolation.

Example implementation:

Learn more

Expand to view the example implementation

You can then use runAmplifyApi function to call Amplify APIs in an isolated server context.

Take implementing an API route GET /api/current-user , in ~/server/api/current-user.ts:

Then you can fetch data from this route, e.g. fetch('http://localhost:3000/api/current-user').

Similar to API routes, the previously added auth middleware are not usable under /server, hence extra work is required to set up a auth middleware to protect your routes.

1. If you haven’t already done so, create a middleware directory under the server directory of your Nuxt project
2. Create an amplifyAuthMiddleware.ts file under the middleware directory

This middleware will be executed before a request reach your API route.

Example implementation:

With this middleware, when executing fetch('http://localhost:3000/api/current-user') without signing in a user on the client side, the fetch will receive a 403 error, and the request won’t reach route /api/current-user.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4