DEV Community

Samuel Akong
Samuel Akong

Posted on • Edited on

Aptible Deployment Walkthrough: Creating a Next.js, Tailwind CSS, Zustand, and Nest.js Full Stack Amazon Replica

Amazon Clone

Discover the simplicity and security of deploying an Amazon Clone application on Aptible. This comprehensive guide takes you through essential steps, from creating your Aptible account to provisioning a PostgreSQL database, setting up the backend and frontend applications, configuring environment variables, and deploying your entire application stack. Whether you're a seasoned developer or just starting, this guide provides valuable insights into deploying web applications effectively on Aptible's secure and scalable cloud infrastructure platform.

Key Features:

  1. Next.js for robust application structure
  2. Tailwind CSS for a stylish and responsive design
  3. Backend generated with Amplication
  4. Zustand for efficient state management
  5. Typescript for enhanced type safety
  6. JWT Tokens for secure user authentication
  7. Axios for seamless API calls
  8. Recharts for dynamic and interactive charts
  9. Next UI and React Pro Sidebar for prebuilt components
  10. Admin Panel for comprehensive management
  11. Table Pagination for improved user experience

Functionality Highlights:

  1. CRUD operations for Categories and Products
  2. Order Management for streamlined processes
  3. Admin Dashboard for comprehensive administration
  4. Secure Admin and User Login & Signup
  5. User-friendly product views and searches
  6. Shopping cart functionality for users
  7. Seamless order placement

Unlock the full potential of cloud infrastructure with Aptible by following the instructions and code snippets provided in this guide. The blog post is accompanied by a detailed YouTube video, offering an immersive visual experience. Dive into the deployment journey and gain practical insights for deploying and managing web applications effectively on Aptible.

Aptible Amazon: Unleashing Secure Deployment Delight

Embark on a journey to deploy your Amazon Clone application on Aptible, a cloud platform designed to simplify and elevate the hosting experience for web applications. Before delving into the deployment details, let's acquaint ourselves with Aptible and explore why it stands out as an excellent choice for developers prioritizing security and compliance in their projects.

Aptible's Purpose:
Aptible is tailored to streamline the deployment and management of web applications, placing a special emphasis on the needs of developers and teams who prioritize security and compliance. By choosing Aptible, developers can concentrate on building and scaling their applications, leaving the intricate aspects of infrastructure, security, and compliance to the platform.

Security First:
Aptible shines with its unwavering commitment to security. Offering robust security controls and holding various compliance certifications, Aptible emerges as an ideal platform for applications dealing with sensitive data or those subject to regulatory requirements. From security updates to data encryption and access controls, Aptible takes care of the essentials, empowering you to channel your efforts into crafting impeccable application code.

Let's Dive In:
With this foundation laid, it's time to delve into the details of deploying your Amazon Clone application on Aptible. This guide will walk you through the process, leveraging Aptible's strengths to ensure a secure and seamless deployment experience. Let's get started on this transformative journey.

Step 1: Sign Up on Aptible

Visit Aptible, click "Sign Up," and follow the prompts to create your new account.

Image description

Step 3: Environments
Upon logging in, you'll find the Environments page neatly organized, providing an overview of your deployment environments. Aptible makes it easy to manage different environments for development, staging, and production, ensuring a seamless transition from testing to deployment.

Image description

Step 4: Create A New App
Navigate to the Apps Page Locate and click on the "Apps" tab or section. This is where you'll manage all your applications.

Image description
Step 5: Redirected to the Database Page
After creating your app, you will be automatically redirected to the "Databases" page. This page is where you manage the databases associated with your applications.

Step 6: Click "Create New Database"
To set up a database for your app, locate the "Create New Database" button on the Databases page.

Image description
Clicking this button will initiate the process of configuring a new database instance.

Certainly! If you've decided to use PostgreSQL 14 as the database for your application on Aptible, here's how you can specify that during the database creation process:

Step 7: Choose PostgreSQL 14 as the Database Type
When configuring the database details during the database creation process, you will encounter a field or dropdown labeled "Database Type" or similar. In this section:

Database Type: Select "PostgreSQL 14" from the available options.
This step is crucial as it specifies the specific version of PostgreSQL that you want to use for your application. PostgreSQL 14 may offer new features, optimizations, and security updates compared to previous versions, so it's a good choice if you want to leverage the latest capabilities.

Step 8: Create the Database
After selecting PostgreSQL 14, Write "amazon-db" as the database name., click the "Save Changes" button. Aptible will then provision the resources for a PostgreSQL 14 database instance.

Image description
Step 9: Accessing the Database Details
On the Aptible Dashboard, navigate to the "Databases" page.
Look for the database you've just created and click on its name or a related action button to access the database details.

Step 11: Navigate to the "Connection URLs" Page
Within the database details page, you'll likely find a tab or section labeled "Connection" or "Connection URLs." Click on this tab to access the "Connection URLs" page.

Step 12: Copy Connection Details
Copy the provided connection URLs. Use the provided buttons or copy options to copy the URLs to your clipboard.

Image description
Step 13: Update .env Details
Open your application's .env file in your preferred code editor.

Locate the entries related to database configuration. These typically include:

DB_URL: Update this with the primary connection URL obtained from the Aptible "Connection URLs" page.

DB_URL=your_primary_connection_url
Enter fullscreen mode Exit fullscreen mode

DB_USER: If your connection URL includes a username, update the DB_USER accordingly.

DB_USER=your_database_username
Enter fullscreen mode Exit fullscreen mode

DB_PASSWORD: If your connection URL includes a password, update the DB_PASSWORD accordingly.

DB_PASSWORD=your_database_password
Enter fullscreen mode Exit fullscreen mode

DB_NAME: Ensure that the DB_NAME is set to "db" as specified.

DB_NAME=db
Enter fullscreen mode Exit fullscreen mode

Your updated .env file might look something like this:

DB_URL=your_primary_connection_url
DB_USER=your_database_username
DB_PASSWORD=your_database_password
DB_NAME=db
Enter fullscreen mode Exit fullscreen mode

Image description
Navigate to the Apps Page:
Locate and click on the "Apps" tab or section. This is where you manage all your applications.

Image description

Click "Create App":
Look for the "Create App" button. This initiates the process of setting up a new application.

Fill in App Details:
Aptible will prompt you to provide basic information about your app. In this case, set the following details:

App Name: Enter "amazon-backend" as the name for your new application.

Image description
Step 14: Write the following code in your vs-code terminal
Image description
Step 15: After writing the above code a file will be created in C:\Users\Name.ssh
click on id_rsa.pub

Image description
Step 15: Add Your SSH Key
On the page that says enter your ssh key enter the key you copied from the "rsa.pub" file.

Step 16: Create Config File
In the same folder where your "id_rsa.pub" file is located create a new file and name it "config" and write the below code in it.

Image description

In your terminal write this
Image description

Step 17: Server Terminal
In your server terminal write this codes.

Image description

Image description

Step 18: Copy the marked codes accordingly and paste in your server terminal make sure not to copy the middle one.

Image description

Step 19: Copy your server .env codes and paste in the environment variables box as shown below

Image description
Image description

After saving make sure you choose create the endpoint cmd Docker
Image description
Go to the provided link to view your backend

Image description

Step 20: Provisioned Backend
This is the backend provisioned by aptible after the link opens add /api to the URL to view the backend.
Image description

Step 21: Head Over To Client
Open "next-config.js" in your client file and make the following changes.

Image description

Go to "client > src > lib > api > api-client.ts and change the code as follows.

Image description
Step 21: Create A New App and Name it "amazon-next-app"

Image description

Step 22: Client Terminal
Go to your vs-code client terminal and write the codes as follows

Image description
Image description
Image description

Step 23: PROVISIONED AMAZON CLONE
Image description

Congratulations! You've successfully provisioned your "amazon-backend" app on Aptible, laying the foundation for a robust and secure backend infrastructure. By leveraging the power of Aptible's platform, you've streamlined the deployment process and ensured a reliable environment for your application.

Final Words
Aptible has proven to be an invaluable tool in simplifying the complexities of deployment and infrastructure management. Its intuitive interface, coupled with robust features such as the "Connection URLs" page, makes the development process smoother and more efficient.

As you embark on your journey to build and scale your "amazon-backend" app, keep in mind the versatility and scalability that Aptible provides. The seamless integration with PostgreSQL 14, coupled with easy configuration updates through the .env file, empowers developers to focus on building exceptional applications without the hassle of intricate deployment tasks.

Conclusion
In conclusion, Aptible stands as a reliable partner in your development endeavors. Its commitment to providing a secure, compliant, and developer-friendly platform shines through in every step of the process. Whether you're a solo developer or part of a large team, Aptible's capabilities empower you to deploy, manage, and scale your applications with confidence.

Explore more about what Aptible has to offer by visiting Aptible, Their platform is a testament to the evolution of deployment technologies, making it easier than ever to turn your ideas into reality.

Happy coding and deploying with Aptible!

Top comments (0)