Laravel API and Nuxt.js application deployment process

2022-01-17 15:02 Tajul Islam Saikat imported from Stackoverflow

I have created an application with laravel and Nuxt.js. Laravel is used for admin panel and api, nuxt.js is used for frontend users. How and where to deploy both apps? I don't have any knowladge about vps server. And also not have enough time to manage vps server. It is complicated to me. I want to deploy both apps in cpanel based shared hosting. . What can I do for the deployment of both apps? And where to deploy? And anyone can give the easy solution or guide for the deployment process?

See also questions close to this topic

How to host go api on GCP

I am new to this deployment and on my local computer my project api written in GOLANG which is already dockerized and uses mariadb as backend. It will execute on port 8080 when I run the command "docker-compose up". What are the different ways to deploy on GCP and which one is the easy one?
Hosting a Strapi 4 + Gatsby 4 website in the same NodeJs server

I am working on a business site with Events and Blog page that can be updated. For this I have chosen Gatsby 4 and Strapi 4. But in most of the tutorials, they have hosted these two separately like Heroku and Netlify/Digital Ocean. I am hoping for a cost effective NodeJs server from a local hosting service. How can I use the same NodeJS server to deploy a Gatsby 4 + Strapi 4 website?
reactjs project working fine on local...but not working after deployment...any suggestion?

I'm trying to deploy my first reactjs app. (It's a quiz app) In local the app is working fine.. after deploy is not working as expected. Here you can find the deploy version and a soon you start to play answering the first question you will notice the problem that the question is not changing. Here is the github repository. I did google a lot , I try to deploy it in both github and netlify but I can't manage to resolve this problem. Any help is appreciate. Thanks
array.slice strange behaviour with nuxt-edge
EDIT AND SOLVED: I've found the origin of the problem: I thought arr.slice returned the new array but, actually, it returns the deleted element. See the documentation The solution is simply to put the slice function before the bracket and not in it:
```
    remove (index) {
      const arrayCopy = this.liens.slice()
      arrayCopy.splice(index, 1)
      this.$emit('update:liens', arrayCopy)

    }
```
Thank you kissu for your time!

I was previously using nuxt 2.xx and since switching to nuxt-edge the vue behavior changed with array.slice. Let me explain :

My code is very basic and is used to add/remove items of an array in a child component "stockLiens". This array is passed to a parent component "currentEtabCommentUser" via .sync

Everything was working fine before but since I'm with nuxt-edge, if I have - for instance - an array of 3 items and I want to delete the 2nd one, it is the only item left!

My stockLiens component Javascript is the following:
```
props: {
    liens: {
      type: Array,
      default: () => []
    }
},
methods: {
    // I used concat() and slice() to avoid mutating a prop in the component
    add () {
      const arrayConcat = this.liens.concat([{ url: '', description: '' }])
      this.$emit('update:liens', arrayConcat)
    },
    remove (index) {
      const arrayCopy = this.liens.slice()
      console.log(this.liens) // line 108
      console.log(arrayCopy) // line 109
      this.$emit('update:liens', arrayCopy.splice(index, 1))
      console.log(arrayCopy) // line 111
    }
}
```
When I run the script, the text in the firefox console is the following:

On the picture, you can see that :
- stockLiens:108 is an array of 3 items (it makes sense since it is this.liens)
- stockLiens:109 is an array of 2 items! (strange since it's a simple array.slice() of this.liens) The 2 items are the old index 0 and the old index 2 (I've clicked on old index 1)
- stockLiens:111 is the same array that on line 109. (strange again because it should have been spliced in line 110)
- currentEtabCommentUser:186 is an array of 1 item : the old index 1 (since line 186 is just a listener on this.liens, it should be the same array that on stockLiens:111. I really don't understand anything!)
My currentEtabCommentUsercomponent:
```
<stockLiens
   :liens.sync="liens"
/>

<script>
  watch: {
    liens () {
      console.log(this.liens) // line 186
    }
  }
</script>
```
I've tried to change .sync, to copy the array with for(i...), to get() / set(v) the liens property, ... I've looked on many forum during hours (2 days now) but I can't understand the problem.

Can someone help me please ? Thank you in advance!

My stockLiens component HTML:
```
<v-card
   v-for="(url, i) in liens"
  :key="i"
>
            <v-text-field
              v-model="url.url"
              label="Url"
            />
            <v-text-field
              v-model="url.description"
              label="Description"
            />
          <v-divider vertical />
          <v-btn
            icon
            @click="remove(i)"
          >
            <v-icon>mdi-delete-forever-outline</v-icon>
          </v-btn>
</v-card>
```
First load of web icons load very slow
I have a proyect in Nuxtjs (vuetify), I'm using material design icons, and at the first load time of websites, icons load takes 5/7 seconds to appear: This is the first load

5/7 secondas later:

Why it happens? Maybe if i download icons and put it in assets folder, it will not happens?

Edit:

I use icons like this:
```
<v-icon color="white">mdi-home</v-icon>
```
Using Firebase Functions with Nuxt 3
Environment
- Operating System: macOS 10.15.7
- Node Version:v16.14.2
- Nuxt Version: 3.0.0-rc.2
- Firebase: 9.7.0
- firebase-admin: 10.2.0
- firebase-functions: 3.21.0
- firebase-functions-test: 0.3.3
In firebase.json the following config is set:
```
{
"functions": { "source": ".output/server" }
}
```
I have a file under the "server" directory containing the following function:
```
import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
    functions.logger.info("Hello logs!", {structuredData: true});
    response.send("Hello from Firebase!");
});
```
When I run:
```
NITRO_PRESET=firebase npm run build
firebase emulators:start --only functions
```
then go to my firebase emulator log, it does not show the new helloWorld() function being initialized. Also, when going to "http://localhost:5001/$PROJECTNAME/us-central1/helloWorld", it returns "Function us-central1-helloWorld does not exist, valid functions are: us-central1-server" which suggests that my function has not been initialized.

Is there any way I can write firebase cloud functions in my Nuxt 3 app from files in my server directory?

I saw a similar discussion here that said it was possible to change the nuxt.config.ts functions object between deploying functions,storage,firestore and deploying server and hosting. I am trying to write firebase functions solely in the "server" directory without creating a "functions" directory and the root of my project. Is this possible?

I have also opened a discussion on GitHub here

My coding mistake or problem with the integrity of the data?

I'm learning Laravel from Laracasts videos and so far I've made simple blog with 4 posts that are dynamic but only 2 of them when I click on the name of the post open up the other 2 show error 404 not found

Example of a working one - https://ctrlv.cz/dgUM Example of a not working one - https://ctrlv.cz/MZrP

web.php code with routes

<?php

use Illuminate\Support\Facades\Route;
use App\Models\Post;
use Spatie\YamlFrontMatter\YamlFrontMatter;

Route::get('/', function () {
    $files = File::files(resource_path("posts"));
    $posts = [];

    foreach ($files as $file) {
        $document = YamlFrontMatter::parseFile($file);

        $posts[] = new Post(
        $document->title,
        $document->excerpt,
        $document->date,
        $document->body(),
        $document->slug
        );
    }
    
    return view('posts', [
   'posts' => $posts
    ]);
});

Route::get('posts/{post}', function ($slug) {
    return view ('post', [
        'post' => Post::find($slug)
  ]);
})->where('post', '[A-z_\-]+');

post.php

<?php

namespace App\Models;

use Illuminate\Support\Facades\File;

class Post
{
    public $title;
    public $excerpt;
    public $date;
    public $body;
    public $slug;

    public function __construct($title, $excerpt, $date, $body, $slug)
    {
        $this->title = $title;
        $this->excerpt = $excerpt;
        $this->date = $date;
        $this->body = $body;
        $this->slug = $slug;
    }
   
    public static function all()
    {
        $files = File::files(resource_path("posts/"));

        return array_map(fn($file) => $file->getContents(), $files);
    }

    public static function find($slug)
    {
        if (! file_exists($path = resource_path("posts/{$slug}.html"))) {
            throw new ModelNotFoundException();
        }

        return cache()->remember("posts.{$slug}", 3600, fn() => file_get_contents($path));

    }
}

How to check authorization before loading Route Model Binding
I ask this question after doing various searches without finding any clarifying information that helps me solve the problem that I am presenting.

I have created a controller with the following command:
```
php artisan make:controller UserController --api -m User -r -R
```
Which creates the controller and the FormRequest classes. Inside the controller, let's just focus on the 'update' method, since that's the one I'm having some trouble with.
```
<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreUserRequest;
use App\Http\Requests\UpdateUserRequest;
use App\Models\User;

class UserController extends Controller
{
    /**
     * Update the specified resource in storage.
     *
     * @param  \App\Http\Requests\UpdateUserRequest  $request
     * @param  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    public function update(UpdateUserRequest $request, User $user)
    {
        //
    }

    ...
```
As you can see from the method arguments, this method uses what we call Route Model Binding

After this, I define my route in the routes file 'api.php' as follows:
```
<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->group(function () {

    Route::apiResource('user', UserController::class);

});
```
Which registers all the routes and within them the 'update' route.

In the FormRequest class named 'UpdateUserRequest', which uses the 'update' method in the previously created controller, I define the 'authorize' method to return false on all checks just for testing. The class would look similar to this:
```
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rule;

class UpdateUserRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }
    
    ...
```
Now, the problem that I am presenting, when I access the route:
```
http://127.0.0.1:8000/api/user/100?
```
Using Postman, I make a request to that route with the PUT method and Laravel returns the following error:
```
{
    "message": "No query results for model [App\\Models\\User] 100"
}
```
This is because I don't have a user with 'id' 100, I only have 2 users in my database for testing purposes.

My question is this: Isn't Laravel supposed to return an error on this request? Telling me that the action is not allowed, since in the FormRequest 'UpdateUserRequest' class, in the 'authorize' method, I always return false.

I think Laravel is loading the middleware \Illuminate\Routing\Middleware\SubstituteBindings::class before middleware \Illuminate\Contracts\Auth\Middleware\AuthenticatesRequests::class.

I know that in the app/Http/Kernel.php file I can modify the middleware priority, overriding the $middlewarePriority property, but I've tried it and I don't get the expected result.

Because from my perspective, it doesn't make much sense, taking the previous example that a user who doesn't have permissions to update the model User tries to access the route and Laravel returns an error saying that the user trying to modify with that id exists or not, without first verifying that the user trying to perform the (update) action has or does not have permissions to perform it.

http to https and www to non-www not working correct with laravel 8 URI links

I searched a lot of about this topic to redirect all urls to https://my-domain

I want delete the www and add https.

I found a lot of answers this one work good

<IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} off [OR]
    RewriteCond %{HTTP_HOST} ^www\. [NC]
    RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
    RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]
</IfModule>

but the problem its just working with the home page link. for example: when I write

https://www.example.com it redirect to => https://example.com

but the problem is when i try: https://www.example.com/about-us

its redirect ti https://example.com/index.php how can i solve that I am using Laravel 8

I want all type of URL to non-www and https. and how can I redirect index.php and index.html to https://example.com/

This is my .htaccess file:

<IfModule mod_rewrite.c>
  <IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
  </IfModule>

  RewriteEngine On

  # Handle Authorization Header
  RewriteCond %{HTTP:Authorization} .
  RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

  # Redirect Trailing Slashes If Not A Folder...
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} (.+)/$
  RewriteRule ^ %1 [L,R=301]

  # Handle Front Controller...
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.php [L]
  
  RewriteCond %{HTTPS} off [OR]
  RewriteCond %{HTTP_HOST} ^www\. [NC]
  RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
  RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]
</IfModule>

Am trying to launch in Cpanel, but am getting a Module not found error

enter image description hereI'm new to Cpanel and am trying to launch my python Django project, I think I've set up everything correctly but am getting this error: File "/opt/alt/python38/lib64/python3.8/importlib/init.py", line 127, in import_module return _bootstrap._gcd_import(name[level:], package, level) ModuleNotFoundError: No module named '<my_module_name>' [UID:2291][2142962] Child process with pid: 2149437 was killed by signal: 15, core dump: 0

so I tried rearranging my apps in settings.py, which has led me to believe that the problem maybe due to the fact that, my app are not being identified. I had created my project using python version 3.9.10, but my cpanel can only support version 3.8.6, so I had to downgrade, and I think this maybe the root of all my issues.

Any help offered would be much appreciated, thanks in advance
how can i send registration activation link email from my custom domain email (activate@tiguh.com) using php

i am working on a project (PHP) that allows online registration to access the authenticated only services provided. i want to send the activation link to their email from my custom email address (activate@tiguh.com). can please help me guys. language is (PHP)

i have cpanel access mail() is not working i have tried mail() in another cpanel (another subdomain) it works. i asked the host provider why mail() is not working in my domain and he replies me with the below image.

Got Error while installing mysqlclient in django project on cPanel

Requirements.txt contains:

asgiref==3.4.1
Django==3.2.9
django-isbn-field==0.5.3
mysql-connector-python
mysqlclient
phonenumberslite==8.12.42
Pillow==9.0.1
python-decouple==3.6
python-stdnum==1.17
pytz==2021.3
six==1.16.0
sqlparse==0.4.2

Got error:

Error
ERROR: Failed building wheel for mysqlclient
ERROR: Command errored out with exit status 1: /home/bookbestie/virtualenv/bookbestie/3.8/bin/python3.8_bin -u -c 'import io, os, sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-nk4wll31/mysqlclient_306f3e44780f440a9c0a625d98f95d89/setup.py'"'"'; __file__='"'"'/tmp/pip-install-nk4wll31/mysqlclient_306f3e44780f440a9c0a625d98f95d89/setup.py'"'"';f = getattr(tokenize, '"'"'open'"'"', open)(__file__) if os.path.exists(__file__) else io.StringIO('"'"'from setuptools import setup; setup()'"'"');code = f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' install --record /tmp/pip-record-frd2zcuu/install-record.txt --single-version-externally-managed --compile --install-headers /home/bookbestie/virtualenv/bookbestie/3.8/include/site/python3.8/mysqlclient Check the logs for full command output.
WARNING: You are using pip version 21.3.1; however, version 22.0.4 is available.
You should consider upgrading via the '/home/bookbestie/virtualenv/bookbestie/3.8/bin/python3.8_bin -m pip install --upgrade pip' command.

I am time hosting for the first time. I browsed other posted questions but couldn't find a solution.

Flask redirecting leads to time-out error
I have this simple redirect from '/' to '/home', handled by flask with

app.py
```
@app.route('/') #Redirects to home page
def redirect_home():
    return redirect("/home")
```
When I use it with my browser it always leads a connection timeout error, althoug when using cURL on my vps (with -L) it does lead to the webpage correctly

I believe it has to do with my nginx setup: sites-available
```
location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_set_header Host $host;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
    }
```
I used to face this issue before on my old vps and I remember fixing it by adding something to the nginx configuration but I don't remember what it was
add nodes to dockers swarm from different servers

I am new to docker swarm, I read documentation and googled to the topic, but results was vague, Is it possible to add worker or manager node from distinct and separate Virtual private servers?
Configure Gmail API on Ubuntu VPS

How to configure Gmail API on a AWS Ubuntu VPS? I am able to make it work properly on my Linux Machine, but after I run the code on my VPS, it asks me to authenticate by visiting the URL. I copied the URL and tried authenticating myself. While authenticating myself in browser, I am redirected to localhost:<random-port>?state=... and cannot authenticate myself as it cannot connect to localhost. How can I configure this properly on my Ubuntu VPS?

i have used the default code provided by google developers: https://developers.google.com/gmail/api/quickstart/python

Related questions

Laravel API and Nuxt.js application deployment process

See also questions close to this topic