Step 7: Deploy Your Frontend Application

Video Guide

Optional: Customize Your App’s Logo and Name

Before proceeding with the deployment, you might want to customize your app’s branding by changing the logo and app name. This step is completely your wish but can help personalize your application for your business.

Changing the Logo

• Go to vite.config file & change the icons.

• Next, change the favicon from index.html file. To change the favicon, simply replace the favicon.png file with your desired image.

Updating the App Name

• To customize the app’s name, simply open the index.html file and modify the <title> tag. This will update the name displayed in the browser tab when users visit your app. Adjust it to reflect your app’s branding or purpose.

7.1 Create a New App

• In the dashboard, click on Apps in the left menu.
• Click on the Create New App button.
• Enter a name for your app (e.g., frontend) and click Create New App.

7.2 Setup .env file in App Config

• Configure Your Environment Variables: Each environment variable defines specific settings for your app. Here’s a general breakdown of the important variables and how they might change based on your app’s domain

7.2.1 Stripe Credentials

• Go to stripe & click on your created Subscription Product as made earlier. Look for Pricing, and click on options three dots.
• Set subscriptionPrice to the price that you want for the subscription. Copy the price id. This will be your VITE_STRIPE_PRODUCT_SUBSCRIPTION_KEY

Sample .env

VITE_BACKEND=https://backend.YOURDOMAIN.com/api/v1
VITE_BACKEND_SOCKET_IO=https://backend.YOURDOMAIN.com
VITE_BACKEND_IMAGES_BASE_URL=https://backend.YOURDOMAIN.com
VITE_FRONTEND_DOMAIN=https://YOURDOMAIN.com
VITE_STRIPE_PRODUCT_SUBSCRIPTION_KEY=price_1POsjYSCWiCS3Basdhuiwheuwh

• Navigate to the App Configs section of your newly created app.
• Paste the contents of your .env file into the environmental variables section using Bulk Edit.
• ensure all environment variables are set correctly.

7.3 Connect New Domain in HTTP Settings

• Navigate to the HTTP Settings section.
• Enter your domain (e.g., yourdomain.com) and click on Connect New Domain.
• Ensure to enable HTTPS for secure communication.
• Select the option for Force Https & WebSocket Support to allow real-time communication.

7.4 CapRover Deploy

Here are two convenient methods for deploying your application to CapRover: Drag & Drop, which allows for quick uploads, and Git, which enables seamless version control integration. Choose the method that best fits your workflow. However caprover supports more methods of deployments, you can explore more at here.

7.4.1 Method 1: Drag & Drop

Package Your Application

• Open the terminal preferably Git Bash. Navigate to where your frontend folder is located.
• Create a tarball (.tar) containing the source code and necessary files for deployment (e.g., Dockerfile, app files, etc.) using the below command.

tar -cvf ./deploy.tar --exclude='.map' --exclude='node_modules' --exclude='.git' ./captain-definition ./

• A new file deploy.tar will be created in the same directory. This is the file to be uploaded for deployment.

Drag & Drop to deploy

• Go the deployments & Scroll to Tarball section.

• Simply drag your .tar into the “Upload & Deploy” section of the app page.

• CapRover will handle the deployment process based on your uploaded package.

7.4.2 Method 2: Using Git

• Open your terminal and navigate to the frontend folder where your Git repository is configured.

• Make sure to select the appropriate branch (e.g., main) that you want to push changes from.

• Run the following command to deploy your application:

  caprover deploy