In this blog post, I will guide you through deploying an Amazon Clone application on Aptible, showcasing how this platform can simplify and secure the process. I'll cover essential steps, from creating an Aptible account to provisioning a PostgreSQL database, setting up the backend and frontend applications, configuring environment variables, and deploying your applications. Following this comprehensive guide, developers can gain valuable experience deploying web applications on Aptible, a secure and scalable cloud infrastructure platform. The provided instructions and code snippets will simplify the deployment process and help you understand how to harness cloud infrastructure effectively. Features of the Amazon Clone Built using Next.js Styled with Tailwind CSS Backend generated using Amplication State Management with Zustand Typescript for type safety Login Signup using JWT Tokens API calls using Axios Recharts for charts Next UI for exceptional prebuilt components React Pro Sidebar for a prebuilt excellent sidebar. Admin Panel Table Pagination Functionalities of the Amazon Clone Categories CRUD (Create/Read/Update/Delete) Products CRUD (Create/Read/Update/Delete) Order Management Dashboard for Admin Admin Login User Login & Signup User view products User search products The user adds products to the cart User place order And many more features that you can watch from the video below This blog post is a part of my YouTube video. Check out the fantastic video below: https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true Introducing Aptible: Simplify and Secure Your Application Deployment Before diving into the details of deploying your Amazon Clone application on Aptible, let's take a moment to introduce Aptible and understand why it's an excellent choice for hosting your web applications. Aptible is a cloud platform designed to simplify and streamline the Deployment and management of web applications, particularly for developers and teams prioritising security and compliance. With Aptible, you can focus on building and scaling your applications while leaving the complexities of infrastructure, security, and compliance to the platform. One of Aptible's standout features is its commitment to security. It provides robust security controls and compliance certifications, making it an ideal choice for applications that handle sensitive data or need to meet regulatory requirements. Aptible takes care of security updates, data encryption, and access controls, allowing you to focus on your application code. Now, let's get started. Step 1: Create a new Aptible Account. Head to Aptible and click the login button to create a new account and sign up. After signup, you will be redirected to the Aptible Environments page. Step 2: Choose Environment Now, you will see your created environments on this page. What are Environments? Environments live within Stacks and provide logical isolation of resources. Environments on the same Stack share networks and underlying hosts. Now, choose your environment and click on it. This is your environment screen. From here, you can manage your apps and databases, see your activity, backups, and many more settings. Step 3: Provision a new PostgreSQL Database We have used the PostgreSQL Database for our Amazon clone, so let's provision a new Database on Aptible. Click on the Database Tab. Now, you will be able to see the Database screen. You can manage and provision new databases from here in your Aptible Environment. Now click on the New Database button to start creating a new database. You can see the UI change to Choose a database selection as soon as you click it. Now, we need to select a database. Click on the database selection dropdown. It will show you all the supported databases by Aptible. Currently, Aptible supports the following Database types: CouchDB PostgreSQL MongoDB Redis Elasticsearch InfluxDB MySQL SFTP RabbitMQ You can check their supported database page to see if they have added more databases. Now, from the list of databases, select PostgreSQL 14. You can see a field as a database handle when you select it. You can name the database of your choice using this field. We are going to name it. . amazon-db Now click on the button. Save changes Now, Aptible will start provisioning your database. Wait for it to complete. While the database is being provisioned, let's move on to the next step, as this will run in the background and be completed in a few minutes. Step 4: Setup Amazon Clone backend on Aptible Now, let's deploy our backend app on Aptible. Head over to the tab and click on . Apps New App Now, you will see the new app creation window. In this window, you need to provide the name of your app. We are going to name it . amazon-backend Now click on the . Create App button Now, Aptible will start creating your app inside the selected environment. Now, you will need to paste your SSH key in this step. If you want to generate a new SSH key or want to learn how Aptible uses your key, visit . Aptible SSH Docs After pasting your SSH key, click on . This will store your SSH key in Aptible so that you don't have to repeat the process the next time you create an app in Aptible. Save key Now we need to push our code to Aptible's git repo. For this step, we would be required to create a inside the root of our server code. Dockerfile You need to copy the following snippet inside the Dockerfile # Development Dockerfile
# This Dockerfile is intended for development use and includes development dependencies and tools.

# Use a Node.js base image with development tools
FROM node:16.0.0 AS development

# Create a directory where the application will be built
WORKDIR /app

# Copy over the dependency manifests, both the package.json
# and the package-lock.json are copied over
COPY package*.json ./

# Install packages and their dependencies
RUN npm install


# Copy over the Prisma schema
COPY prisma/schema.prisma ./prisma/

# Generate the Prisma client based on the schema
RUN npm run prisma:generate

# Copy over the code base
COPY . .

RUN npx prisma db push
# Create the bundle of the application
RUN npm run build

# Expose a specific port on the Docker container for development purposes
ENV PORT=3000
EXPOSE ${PORT}

# Start the development server using the previously built application
CMD ["npm", "start"] Now open up your terminal and write the following steps: Step 1: Create a git repo git init Step 2: Stage all files git add . Step 3: Commit the changes git commit -m "Initial Commit for backend code. After you have committed your changes, you need to copy the Aptible remote url and add it to your repo. git remote add aptible git@beta.aptible.com:youtube-a32/amazon-backend.git After this step, we must push the code to the Aptible's scan branch. Copy the scan command from Aptible and paste it into your terminal. git push aptible main:aptible-scan Now, this will push our code to Aptible's git repository. Now, in Aptible, it will show you this screen. We can configure our environment variables and DB for the app from here. Let's select a DB. Click on the button. Connect Existing Database Now select the that we created in the previous step and name the environment variable as . amazon-db db_url Now click on the button to start the deployment process. Save and Deploy This will start the deployment process. This process may take a certain time. Wait for it to complete. Now, our app has been deployed successfully. Now, we need to run the docker command. Select the cmd and click on the button. Create Endpoint Now, Aptible will start provisioning your endpoint. Our endpoint was successfully provisioned. Now, let's head over to the endpoint. And you can see that we have successfully deployed our Node server to Aptible. Now, let's do the same for our Next app. Step 5: Deploy Amazon Clone Frontend to Aptible Deploying the front end is quite simple. We will follow all the previous steps and deploy our app to Aptible. You need to replace the file in your next app with the code below. next.config.js /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "dctahvizk",
    NEXT_PUBLIC_API:"app-61711.on-aptible.com"
  },
  images: {
    domains: ["res.cloudinary.com"],
  },
  // typescript: {
  //   ignoreBuildErrors: true,
  // },
};

module.exports = nextConfig; Here, we have added the environment variable. NEXT_PUBLIC_API Make sure that you replace it with your endpoint. Now, create a new Aptible app and name it . amazon-next-app Before moving forward, let's add the for your next app. Dockerfile # Use an official Node.js runtime as the base image
FROM node:18

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of your app's source code
COPY . .

# Build the production version of the app
RUN npm run build

# Expose the port your Next.js app will run on
EXPOSE 3000

# Start your Next.js app
CMD ["npm", "start"] Create the at the root level of your app and paste this code. Dockerfile Now open up your terminal and write the following steps: Step 1: Create a git repo git init Step 2: Stage all files git add . Step 3: Commit the changes git commit -m "Initial Commit for frontend code. After you have committed your changes, you need to copy the Aptible remote url and add it to your repo. git remote add aptible git@beta.aptible.com:youtube-a32/amazon-next-app.git After this step, we must push the code to the Aptible's scan branch. Copy the scan command from Aptible and paste it into your terminal. git push aptible main:aptible-scan Our code was pushed to Aptible. Now, let's deploy it. Click on the button. Save & Deploy Our Deployment was successful. Now, let's run the docker cmd and provision an endpoint. Now, our endpoint was successfully provisioned. Open the endpoint in your browser. And you can see that our Next app was successfully deployed on Aptible. Conclusion In conclusion, this blog post has provided a comprehensive guide on deploying an Amazon Clone application on the Aptible platform. We covered essential steps such as creating an Aptible account, provisioning a PostgreSQL database, setting up the backend and frontend applications, configuring environment variables, and deploying the applications. By following this guide, developers can gain valuable experience in deploying web applications on Aptible, a secure and scalable cloud infrastructure platform. The provided instructions and code snippets simplify the deployment process and help developers understand how to leverage cloud infrastructure effectively. Aptible offers a robust environment for hosting web applications, making it an excellent choice for developers looking to deploy and manage their projects securely. This tutorial equips developers with the knowledge and practical skills needed to take advantage of Aptible's capabilities for deploying web applications.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The Ultimate Guide to Integrating Cloudinary With Next.js

Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More. 

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

🔥here's How I Built a Stunning Chat App With React 🚀

A Glance Into Amplication: Easy NodeJS App Development

Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More.

The Advantages of Using REST API with Amplication for Your NodeJS Apps

🔥here's How I Built a Stunning Chat App With React 🚀

A Glance Into Amplication: Easy NodeJS App Development

Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More.

The Advantages of Using REST API with Amplication for Your NodeJS Apps

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps