Pushed first Laravel/Vue app to remote server... Vue templates not working

Hi,

What you need to do is to make sure that you have everything installed the same on your production server as on your local machine. If you see curly brackets then you do not have php installed on your production server.

You can try netlify.com for a fast deployment.

You can / should also get an account on a digital ocean and also forge. This is by far the easiest way to spin up a laravel project to a production.

What the 2 of the above would do is they have a thing called deployement script which looks something like this:

git pull origin master
composer update
composer install --no-interaction --prefer-dist --optimize-autoloader
echo "" | sudo -S service php7.2-fpm reload
npm install
php artisan view:clear
php artisan cache:clear

And finally, the quickest way to show the world your project would be to use laravel valet and use share command which will generate temporary url.

Happy coding!

Hi aurawindsurfing Thanks for the reply. I have actually used Netlify for a couple of static sites, its great! But, are you sure you can run Laravel/PHP on there? I didnt thik so, but could be wrong!

With regards to my existing deployment. I can reach the login page, and i can log in OK. So i guess that means PHP is installed and working.

Netlify - I'm pretty sure you can, I was not sure at what stage you are.

If you see curly braces that might mean few things. I would try to deply on forge and digital ocean and see if that helps. The PHP itself could be configured more proper way, it could be also thing called short_tag_open that does couse strage behaviours. You really have to go step by step and nail it down.

Have a look here: http://php.net/manual/en/language.basic-syntax.phptags.php

Also give your url, maybe we will be able to help.

Happy coding!

@SpecialPatrolGroup, when you pushed your site up did you amend your .env file to match the new environment, especially the APP_URL and make sure it matches your live url and not localhost.

If this doesn't fix things when you access you site in a browser do you see any errors in your browsers developer tools either on console or network tabs that might indicate if something isn't loading correctly. If you can share the url I could have a look.

One other thing to double check is if you developed on Windows and deployed to linux that your filenames are all in the correct case as Windows isn't case-sensitive but linux is

@D9705996 Thanks for your reply. I've concluded that this had to be a Vue.js (or maybe Laravel?) issue because I've realised that the Database is working fine. On the Add/Edit pages (which do not have any Vue) im able to create new items which are being added to the DB.

Its only on the page which lists all the items (and has Vue.js) that is broken. Im seeing the handle bar brackets and there's no data. No I dont have any errors in Devtools.

Weird. This is only happening on my remote version (im using the free 000webhost). My localhost is fine.

I might try and deploy it to Digital Ocean.

I doubt it's the hosting provider (although could be wrong). Is your site publically available?If so can you share the url to the page that isn't working. I can take a look to see if I can see anything obvious

Install Vue dev tools in chrome and see if you actually have Vue enabled on that page.

Hi @D9705996. Sure, if you'd like to take a quick look that'd be appreciated! I've created a test login:

https://mywealth.000webhostapp.com/

login = [email protected] password = password

@aurawindsurfing. Yes Vue is being detected by the Vue devtools extension.

@specialpatrolgroup - When you look at the source of your page after logging in your are not loading your Javascript in a script tag anywhere

In chrome

view-source:https://mywealth.000webhostapp.com/

You should just need to add this to your layout

<script src="/js/app.js"></script>

I did notice that at the end of your script it looks like your provider is injecting some sort of JavaScript into the page to show their popup branding which might be interfering with you layout (as this worked in dev).

If so you might need to move the script into the tag

Hi @D9705996. Thanks for looking into that very much. I've just figured out that particular problem - it was simply that the mywealth.js on the Remote was an old version!

So in the end, just a simple problem! Its working now, but now, theres a new problem. The Addition calculation is not working (instead its concatenating). I'll tackle that tomorrow. It works on my local - maybe its just the same issue (one of the files needs uploading).

off to bed! thanks again!

@SpecialPatrolGroup - Your JavaScript issue is being cause by the datatype being returned from your API

"amount":"1000"

The quotes around the values signifies the value is a string not an number so you code is concatenating the values as a string hence the AUD 10000200010000.

The simplest way to fix this would be to add a cast to your model in the backend (obviously to match your intended dayatype if its not an integer)

  protected $casts = [
    'amount' => 'integer'
  ];

https://laravel.com/docs/5.7/eloquent-mutators#attribute-casting

This should fix things if not you can explicitly force the data type in your javascript.

  return parseInt(item.amount) + parseInt(sum);

Let me know if you have any issues.

@SpecialPatrolGroup - Also if you problem has been fixed can you please mark the discussion as solved so others with the same issue can find the solution