Scribd
Upload
374 views18 pages

How To Deploy Your Frontend and Backend in Vercel and Hostinger

The document provides steps to deploy a frontend and backend using Vercel and Hostinger. It describes setting up accounts, deploying the frontend to Vercel, connecting the Git repository, deploying the backend to Hostinger, linking the databases, and connecting the frontend and backend.

Uploaded by

ESTELON RITA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
374 views18 pages

How To Deploy Your Frontend and Backend in Vercel and Hostinger

The document provides steps to deploy a frontend and backend using Vercel and Hostinger. It describes setting up accounts, deploying the frontend to Vercel, connecting the Git repository, deploying the backend to Hostinger, linking the databases, and connecting the frontend and backend.

Uploaded by

ESTELON RITA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

How to Deploy your Frontend and Backend in Vercel and Hostinger

➢ Go to https://vercel.com/

➢ Click Sign up.

➢ Click Hobby and enter your name, then Click continue.


➢ Click Continue with Github

➢ Then Click Login


➢ Click Continue with Github again.
➢ Open the code of your frontend in vs code and open the terminal then type npm install -g vercel and click enter.

➢ Then enter vercel login to the terminal.

➢ Select the option that says continue with github and click enter.
➢ Your browser should show something like this.

➢ Go back to the terminal of your frontend code and type vercel in the terminal.

➢ Type “y”

➢ Click enter.

➢ When ask to link it to other Projects, Type N.


➢ Enter the name of your project, do note that the project name will influence the name of the domain of your
frontend.

➢ Click Enter

➢ Type N, unless you want to modify these:

➢ If the result is something the like this, then your frontend is good to go(almost)

➢ Go to your vercel Dashboard and click the project you just deployed.
➢ Click the Connect to Git

➢ Click the Github button.

➢ It may prompt you to install vercel to your github, just click continue to install vercel.

➢ Select the repository of your project then click connect.


➢ Scroll down to Production Branch and enter your branch name then click save.

➢ Go to the Hostinger, the Manage in your Hosting Plan

➢ If you’re using a shared account, then click that manage in the account.
➢ Click the Website name Dropdown to select which website you’re going to use.

➢ Go to the Advanced option then Click git.

➢ Copy the GitHub link of your repository.


➢ Paste in the repository text field and do specify which branch your backend is located.

➢ In the Directory text field, follow this kind of naming your directories/folder.

➢ Wait a few seconds, then click deploy.

➢ Go to Files, then click File Manager


➢ Click the left option.

➢ Click the public_html.

➢ Click the First folder.

➢ Click the folder inside it.

➢ Go to the public directory.

➢ Copy all of its contents by highlighting it and pressing CTRL + C.


➢ Go back to the First folder you’ve been to after clicking the public_html and paste the contents of your public
directory.

➢ Open the index.php

➢ Go to the line 34 and change the two periods to the name of the second folder you’ve been to.

➢ Click CTRL + S to save or just click the save button at the upper right of the screen.
➢ You should be able to access your backend by accessing your-domain/the-first folder-inside-public-html.

➢ Now Copy the link of your deployed backend and paste to the axios.defaults.baseURL in the main.js of your
frontend.

➢ Then push the changes in your frontend.


➢ If you use jwt the same way as I do, go back in the file manager directory of your backend in hostinger, then click
upload button the upper right options.
➢ Click the File

➢ Upload the .env file in your backend code.

➢ Go to the Database, then click the Management option.


➢ Create your database by filling out this text fields, then click create.

➢ Go to your database in the phpMyAdmin of laragon/wamp/xampp, then export your database

➢ Now, edit file your exported in vs code


➢ Look for the line the says – Database:

➢ Copy the name of your newly created database in hostinger and paste it there.
➢ You might encounter an error in the collations, so change all collations in your tables to “utf8mb4_swedish_ci”.

➢ Save the File.


➢ Now, go to the phpMyAdmin in Hostinger.

➢ Click the Enter phpMyAdmin.

➢ Import your database.

➢ Scroll Down, then click Import.

➢ Go to the Database.php in your backend. It is located in this path: app\Config\Database.php


➢ Change the username, password, and database to the ones you put in the management.

➢ It should something like this:

➢ Save the File, then push the changes in your backend.


➢ Just to ensure you updated your code, click the Deploy again.

You might also like