DEV Community

hirooka kazuya
hirooka kazuya

Posted on

dev diary 20251115

Yesterday's Development Progress

Amplify Files (Backend)

Sandbox Launch: Executed the sandbox launch.

Synchronization: The content synchronization from the local environment to the AWS console is not automatic.

It syncs when you stop the sandbox with Ctrl+C and then restart it with npx ampx sandbox.

Performance: The console's stack and database are not deleted when stopped, so restarting doesn't take much time.

Future Work: We should look for a way to make this synchronization automatic.

This might be related to the absence of package.json and tsconfig.json files directly under the amplify directory. This needs to be checked in the official documentation.

Verification: The synchronization can be verified on the console by checking the field items in DynamoDB (I've forgotten the exact location).

Important Note: The browser cache persists, so you must clear it with Ctrl+Shift+R to see updates.

Documentation Preference: For the fundamental code, it's better (and often faster) to follow the official AWS documentation as AI models struggle with the current AWS configurations, likely due to frequent changes and updates.

Reference: [https://docs.amplify.aws/react/build-a-backend/data/set-up-data/]

App Files (Frontend)

The frontend was also built by referencing the official AWS site mentioned above.

Implemented a sample code that allows a user to sign up (Cognito authentication) and log in to a Todo application.

Data Access: The definitions made in amplify/data/resource.ts are available on the frontend as a client object.

For example, calling client.models.Todo.list(); fetches the data as an object:

{
  data: [ // Actual array of Todos
    { id: "1", status: "Buy milk", isDone: false },
    { id: "2", status: "Check email", isDone: true }
  ],
  // Other info (metadata for data fetching, like tokens)
  nextToken: null 
}
Enter fullscreen mode Exit fullscreen mode

Mutations (Create, Update, Delete): These appear to be defined by default and can be implemented simply, for example:

client.models.Todo.create({
    status: window.prompt("Todo content?"),
    isDone: false,
});
Enter fullscreen mode Exit fullscreen mode

Once this mechanism is understood, most apps can be built.

Process Summary

Replicability: The configuration methods for both the frontend and backend are now contained within this development folder. We can implement the same setup in the future by copying and pasting this base file.

Documentation Cleanup: Frankly, I don't remember all the installations within the development folder. They are recorded in the development diary, but they need to be organized now. We should organize as we go to avoid problems later on, instead of just rushing forward.

Top comments (0)