Deploy Vue.js app to an Apache server 2020 (shared Linux hosting) - Code with bro

Hi guys, today, i'll be sharing with you guys how to actually deploy/host your vue app on an apache server. I had a similar issue and notices there aren't enough resource out there on how to do it so, I decided to share with you guys how I succeeded in doing that. Hope that helps!
Note: Please note that some functionalities or part of your code might not work properly when you use a local server. like fetching from an external API etc. but when you actually host it on an actual server online. it all works 100%
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
@codewithbro
Create an account on npm here: www.npmjs.com/...
Our created Package: www.npmjs.com/....
Source code: github.com/Fot....
- - - - - - - - - - - - - - - - - - - - - -
Follow us on social networks:
Instagram: / code_withbro
#vuejs #webdevelopment #programming #softwaredeveloper #softwareengineer #webdeveloper #developer #iosdeveloper #mobiledevelopment #coding #coder #javascript #developer #computerscience #computersciencestudent #100daysofcode #html #css #programmer #vue #npmpackage #npm #package #CodeNewbies #Code_with_bro #code_withbro

[@LucaPizzinato]

Bro.. you are my hero!! You saved my sanity

[@codewithbro95]

glad to help:)

[@miguelangelvillafuerte3328]

brother, you solve a question that have since lot time ago... THANKS SO MUCH ! Respect for you !

[@codewithbro95]

Happy to help :)

[@evanhauk]

Thank you, just needed the dot in front of path!!

[@codewithbro95]

Glad it helped!

[@roderickaguilar6227]

Yo sé que no hablas espanol. Yo tampoco entiendo nada de lo que hablas, pero diste con la solución, gracias. Saludos de Venezuela

[@cagn154]

thank u so so so so so so much!!!!!!!!!!!!!!!! thank you from the bottom of my heart!!!!!

[@vimmasi1]

You helped me a lot, bro. Thanks!

[@codewithbro95]

You welcome man 🔥🔥

[@4498rx]

thank you bro i faced this problem today and i solved it with your advice

[@codewithbro95]

It's always a pleasure ✊🏾

[@nelsonomondi5542]

gracious for the video amigos

[@codewithbro95]

much obliged✨

[@brunosthoughts4756]

thak youuuu dude!!!!!! now I am able to post my projects on github pages :)

[@codewithbro95]

You are highly welcome bro, Please don't forget to subscribe. We hosting a build soon.. stay tuned!

[@nikoing]

Thank you so much, I was limited on that point, it was difficult to use Vue CLI becaise of deploying problem.
Thanks alot

[@claudiocabrera4312]

Gracias!!!!! dias y dias buscando la solucion, saludos desde Argentina!!

[@diems2]

add this in your vue.config.js :
module.exports = defineConfig({
publicPath: './'
})
then run: npm run build and the index.html paths are relatives to index.html automaticaly

[@ibrahimyakut328]

Create a file named vue.config.js in the home directory where the package.json file is located and paste the following code into it.
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
now npm run build to deploy again

[@codewithbro95]

Yeah, i figued it out with some mates on here... thanks for pointing this out as well...

[@danieladiko5808]

it really help , you are a life saver

[@codewithbro95]

Grad we helped, Please don't forget to like and subscribe for more interesting dev content...
Please note that there's a better way of doing this, you can do it directly from your vue.config.js and add publicPath as "./"
PS: Turn on the notification bell so you'll get notified each time we post a new video.🙂

[@r00nscapenab]

hello, i have vuejs and vite so i dont have vue.config.js, i have vite.config.js. I followed your steps but i stil get blank (whites screen) on my app. any thoughts?

[@ahmedosama9815]

bro when I open my project it opens a blank page with navbar sit on the top. it does not open homePage directly like in node server, so I should open it from the navbar. please help to make it open homePage directly or / page

[@1lyv698]

When i use svelte had has a problem like this. Why haven't dot?

[@juancarlosaliaga6411]

Gracias este tutorial pude resolver la publicación de mi sitio en un servidor Debian 10. Thanks very much.

[@tolosricardos2111]

thank you very much

[@salmanmansoor1272]

really helped me out. thankyou. you eaned yourself a sub. just one thing. rest of my App works perfectly on apache server however images are still not loading and giving 404 error. please help me out

[@codewithbro95]

Hi there! are you hosting that online or locally on your computer? generally, it works fine when on an actual online server! Please let us know!

[@igwanwan_dagoat1523]

Do you still help people out?

[@codewithbro95]

Yes we do:)

[@codewithbro95]

We recently wrote a script which helps do the job with no stress.
Here: github.com/FotieMConstant/vue-pather
Note: This script is most helpful when you want to be productive.

[@bedrock_the_ninth388]

Running jus "npm run serve" in the root directory would have been enough :/

[@codewithbro95]

That's right, though it only works if you want to host on a node server. Remember we are not hosting on a node server!
We are hosting on an Apache server.