Problem in life vps server (Vue and Laravel api)

Hi @automica thanks for your response, this is the problem I faced 5 months ago, I don't remember how did I solve it, today, my server ip address changed to new one and I have same issue now, u say; 'guess you were using npm to serve the site? is all of this disabled locally?'. I don't know what should I disable locally?

I’m not sure quite what I meant 5 months ago either :) Can you explain where you are seeing localhost with the port number? If you are hitting your remote server to access the site, then your Vue component will need to be posting / getting to that remote IP or resolved hostname. It could be you have not set the app url correctly in your .env and this needs updating

5 months ago when I deployed my application on vps, I faced the same problem which I have now anyway, my problem is; I have a page in this link http://35.184.16.20/#/order/pickup in this page, I have a http request using axios to the server to access this route http://35.184.16.20/api/location-type the problem is; instead of that route http request goes to http://localhost:8000/api/location-type.

in vue part in the app.js file I have //axios.defaults.baseURL = 'http://localhost:8000/api/'; axios.defaults.baseURL = 'http://35.184.16.20/api/'; when I push to server I'll comment out the localhost. It was working fine, after my server ip address changed this problem raised.

what should exactly I should change in the .env file while deploying on the server.

this is .env in the life server

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:yr2m+9Jtfi8XjEVFK3K2FU8qwtOrtSr/Qzi69+DQk34=
APP_DEBUG=true
APP_URL=http://35.184.16.20

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=myid
PUSHER_APP_KEY=somekey
PUSHER_APP_SECRET=somesecret
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

the way i deploy is; I push from my laptop to a repo in github and then pull that from the server

Have you tried clearing the config cache? Since you're changing the baseURL on the server (I guess), the cached baseURL is localhost:8000 (I assume). Make the change locally, clear the cache and push the changes to remote and continue. Hope this helps.

do you know how to solve it?

yes, I changed .env to production as following, but still having the same problem

APP_NAME=Laravel
APP_ENV=production
APP_KEY=base64:hkzyStjgzyyDQk7DjIK0nXHOIUQ/5mUYcM0fQP6hCnE=
APP_DEBUG=false
APP_URL=http://35.184.16.20

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=db_username
DB_PASSWORD=db_password

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=myid
PUSHER_APP_KEY=somekey
PUSHER_APP_SECRET=somesecret
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

is there anything i miss in the .env?

... and did you also run npm run prod ?

Yes i did run npm run prod i do not push directly to the server, i push to github and then pull from server, From the early morning i worked on this problem till evening. i removed the app uninstall the appache and reinstall it and then clone my app from github still same problem. this is became a nightmare

@ziaakbari I feel you... especially when this is on prod. Can you show your app.js file? And could you please have a look, if you're using ziggy? If that's the case, please run php artisan ziggy:generate and then npm run prod with your prod .env - and / or inspect your ziggy.js file!

I do not use ziggy this is my app.js file

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
import VueRouter from 'vue-router';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';

/* import 'vue-material-design-icons/styles.css'; */


require('./bootstrap');
require('./store/subscriber')

window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(VueMaterial)
/* 
import Vue2TouchEvents from 'vue2-touch-events'
 
Vue.use(Vue2TouchEvents) */
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('pagination', require('laravel-vue-pagination'));

import store from "./store";

export const bus = new Vue();
Vue.component('app', require('./components/App.vue').default);

Vue.material.locale.dateFormat = 'dd/MM/yyyy'

import router from './routes.js'
import Admin from './components/backend/Admin';
import Home from './components/frontend/Home';
import axios from 'axios';

//axios.defaults.baseURL = 'http://localhost:8000/api/';
axios.defaults.baseURL = 'http://35.184.16.20/api/';
//some time when I push to server api still points to localhost
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
store.dispatch('auth/attempt', localStorage.getItem('token')).then(() => {
    const app = new Vue({
        el: '#app',
        router,
        store,
        components: {
            Home,
            Admin
        }
    });
})

and this is the component which I send http request to the server

<template>
  <div class="origin">
//... here are is template content............
  </div>
</template>

<script>
export default {
  name: "Origin",
  data: () => ({
    accessoryList: null,
  }),
//....
  methods: {
    getAccessories() {
      axios
        .get("location-type")
        .then((res) => {
          this.accessoryList = res.data;
        })
        .catch((err) => {
          console.log("Error: ", err);
        });
    },
  },
  created() {
    this.getAccessories();
  },
  components: {
  },
};
</script>

<style lang="scss" scoped>
</style>

and this is my route in the api.php

Route::group(['namespace' => 'Order'], function () {
  Route::get('location-type', 'OrderController@locationType');
//...
});

@ziaakbari hello! I'm a newbie here. I also have the same problem as yours, but I upload the whole project using FTP.

I check the files in putty but I didn't see our folder. So I just npm run dev in root folder, I can see the login page and get authenticated but I can't see other pages.

Still our site doesn't work the way it intended to be.