Imagine you want to run a program on a computer, but you don't want to deal with setting up the computer itself. Azure Container Apps is like a service that lets you do just that for certain programs.

Normally, running these programs (called containerized applications) involves managing servers, which can be complicated and expensive. Azure Container Apps takes care of all that for you. You just provide your program, and they handle the computers and technical details to keep it running smoothly and securely. This saves you time and money.

Pre-requisite and installments

Azure subscrption account

Azure cli installed

logged in your code editor to your account

Docker installation on your local machine

Create a registory on azure (registory is like repository for your docker image )

Example our code has repostory in github with all its version similary docker image has registory

Step 1: Create Basic React application

npx create-react-app my-app

Create-react-app will create Basic React application and the builder folder will be names as build by defaul. try runnng npm build

It will cretae a build folder . However, if you create react or other app using vite with the following cmd

npm create vite@latest my-app

this cmd will allow you to choose framework like react, vue, next. if you create you frontend applcation using this tool and try to create build of your application then the build folder will be named as "dist" by default

Step 1: Create "nginx" folder inside root folder of your applcation and a Dokerfile .

Step 3: Create nginx.conf file inside nginx folder. We are using ngix webserver to server our frontend. since our react app is decoupled from any backend server .

Step 3: Add the following code in nginx.conf file

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  server {
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

Step 4: Now lets write our dockerfile. here is the tick.

If you have created your frontend usng vite you the 1st code snippet inside dockerfile.

If you have created your frontend using create-react-app then use the 2nd code snippet inside dockerfile.

FROM node as dist
WORKDIR /app
ENV REACT_APP_SERVER_URL Replace_with_your_api
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install 
COPY . .
RUN npm run build
FROM nginx
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=dist /app/dist /usr/share/nginx/html

FROM node as build
WORKDIR /app
ENV REACT_APP_SERVER_URL Replace_with_your_api
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install 
COPY . .
RUN npm run build
FROM nginx
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/build /usr/share/nginx/html

Step 4: Now time to create our docker image

cd yourproduct-rootfolder

docker build -t myimage .

Above cmd will start creating image for you. if everything is fine you fill find some consoles like this .

If you gets any error like docker daemon is not runnng then you need to start your docker destop and try re-runnng the cmd

If you have succesfully create your image then you can see those image in you docker destop.

Step 4: Try Runnning docker image locally

docker run -it --rm -p 8080:80 myimage
you can try hitting 8080 on browser if runnng well you can push the image to azure repository in order to deploy as container app.

Step 4: Tagging and Pushing image to azure repository

docker tag imagename myregistry.azurecr.io/imagename:latest

docker push myregistry.azurecr.io/imagename:latest

pushing image will show some consoles on your editor like

Step 4: Check your repository if you have succesfully pushed the image on azure regstory or not.

Go to azure platform ==>Go to contaner registory ===>search "myregistory"==> search "mymagename"

Step 5: Deploy your image to container app

Go to azure platform home page==> go to container apps ==> click on create button

Click create option will land on create page
Fill all project details

Next container: Give a unique name, select your registory and image that was pushed to the registory

Next Binding - keep it default

Next Ingress - Enabled Ingress and allow traffic

Keep other things default . Add port no 80

Next click Tags and make no changes

Next click Reveiw and Create
This will perform all validation and indcate with text passed

Finally you can click create to deploy

Then you can see Deployment in progress screen like this and followed by go to resource after successfull deployment.

Click on go to resource will land you to the the resource page where you can see a application url. you can hit this application url in your browser and your applicaton is ready.

Congratulations you have successfully deployed your frontend as a contaner apps on azure