Building and Deploying an Nue JS App on Akash | Akash Network

This guide assumes you have basic knowledge of Nue and are familiar with Docker and the Akash ecosystem.

1. Building a Vue.js Application

Set up your Vue.js environment: Install Vue CLI if it’s not already installed:

npm install -g @vue/cli

Create a new Vue.js project:

vue create my-vue-app

Follow the prompts to configure your project.

Build your application for production:

cd my-vue-app
npm run build

The production-ready files will be located in the dist folder.

2. Packaging for Deployment

Packaging for Deployment:

Create a Dockerfile in your project root:

 FROM node:16-alpine

WORKDIR /app

COPY ./dist /app

RUN npm install -g serve

CMD ["serve", "-s", "."]

Build the Docker image:

docker build -t my-vue-app .

Push the image to a container registry like Docker Hub or GHCR:

docker tag my-vue-app <your-registry>/my-vue-app:latest
docker push <your-registry>/my-vue-app:latest

Set up an SDL file: Use your SDL template to create deploy.yaml:

---
version: "2.0"

services:
  web:
    image: <your-registry>/my-vue-app:latest
    expose:
      - port: 80
        as: 80
        to:
          - global
profiles:
  compute:
    web:
      resources:
        cpu:
          units: 0.1
        memory:
          size: 128Mi
        storage:
          size: 512Mi
  placement:
    devnet:
      pricing:
        web:
          denom: uakt
          amount: 100
deployment:
  devnet:
    web:
      profile: web
      count: 1

3. Deploying the Application

Option 1: Using Akash CLI

Set up Akash CLI: Follow the Akash CLI setup guide.

Create and deploy your app:

Fund your wallet: Follow the guide to fund your wallet.
Deploy the SDL:

akash tx deployment create deploy.yaml --from <your-wallet> --node https://rpc.akash.network:443 --chain-id akashnet-2

Monitor deployment logs and get the lease ID:

akash query deployment list --owner <your-address> --node https://rpc.akash.network:443

Option 2: Using the Akash Console

Log in to the Akash Console: Open the Akash Console.
Create your deployment:
- Upload the deploy.yaml file in the deployment wizard.
- Review the generated manifest and submit the deployment.
Select a provider: Choose a provider, bid on resources, and wait for the deployment to become active.

4. Verifying Your Deployment

Once your deployment is live: 1. Access your app through the IP and port provided by the Akash Network. 2. Configure your domain (if required) to point to the IP using an A record.

Useful Links

- Akash CLI setup: https://docs.akash.network/cli/install
- Funding wallet: https://docs.akash.network/guides/funding-wallet
- Akash Console: https://console.akash.network/