{"id":568,"date":"2024-05-21T13:48:42","date_gmt":"2024-05-21T13:48:42","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=568"},"modified":"2024-07-26T08:02:11","modified_gmt":"2024-07-26T08:02:11","slug":"setting-up-laravel-with-vue-authentication-in-development-and-production","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/setting-up-laravel-with-vue-authentication-in-development-and-production\/","title":{"rendered":"Setting Up Laravel with Vue Authentication in Development and Production"},"content":{"rendered":"\n<p>Setting up a Laravel application with Vue.js authentication can be divided into two main phases: development and production. Each phase has specific steps to ensure the application runs smoothly and efficiently. This guide will walk you through both processes in detail.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Development Setup<\/h2>\n\n\n\n<p>During the development phase, we aim to set up an environment that allows for easy coding, testing, and debugging. Here&#8217;s a step-by-step process to set up a Laravel application with Vue.js authentication.\n\n\n\n<p><strong>1. Install Laravel<\/strong>\n\n\n\n<p>Start by installing Laravel using Composer:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">composer create-project --prefer-dist laravel\/laravel my-app\ncd my-app<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#composer%20create-project%20--prefer-dist%20laravel%2Flaravel%20my-app%0Acd%20my-app\">\n                            <button class=\"copy-button\" data-label=\"composer create-project --prefer-dist laravel\/laravel my-app\ncd my-app\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>2. Install Laravel UI<\/strong>\n\n\n\n<p>Laravel UI provides a simple way to scaffold all of the routes and views you need for authentication using Vue.js:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">composer require laravel\/ui<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#composer%20require%20laravel%2Fui\">\n                            <button class=\"copy-button\" data-label=\"composer require laravel\/ui\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>3. Scaffold Authentication with Vue<\/strong>\n\n\n\n<p>Use the following Artisan command to scaffold the authentication views and routes using Vue.js:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">php artisan ui vue --auth<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#php%20artisan%20ui%20vue%20--auth\">\n                            <button class=\"copy-button\" data-label=\"php artisan ui vue --auth\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>4. Install NPM Dependencies<\/strong>\n\n\n\n<p>Next, install the required Node.js dependencies using NPM:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">npm install<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install\">\n                            <button class=\"copy-button\" data-label=\"npm install\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>5. Compile Assets<\/strong>\n\n\n\n<p>During development, you should use the development server for hot reloading, which compiles your assets and serves them on the fly:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">npm run dev<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20run%20dev\">\n                            <button class=\"copy-button\" data-label=\"npm run dev\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>6. Serve the Laravel Application<\/strong>\n\n\n\n<p>To start the Laravel development server, use:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">php artisan serve<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#php%20artisan%20serve\">\n                            <button class=\"copy-button\" data-label=\"php artisan serve\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">Why These Commands Are Used<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>composer require laravel\/ui<\/code><\/strong>: Adds the Laravel UI package, which provides the basic UI scaffolding for authentication.<\/li>\n\n\n\n<li><strong><code>php artisan ui vue --auth<\/code><\/strong>: Generates the Vue.js scaffolding and authentication views, routes, and controllers.<\/li>\n\n\n\n<li><strong><code>npm install<\/code><\/strong>: Installs all Node.js dependencies required for compiling front-end assets.<\/li>\n\n\n\n<li><strong><code>npm run dev<\/code><\/strong>: Starts the Vite development server, enabling hot module replacement for a better development experience.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Production Setup<\/h2>\n\n\n\n<p>When deploying to production, the goal is to optimize performance and security. The steps differ slightly to ensure the application is lean and efficient.\n\n\n\n<p><strong>1. Prepare the Server<\/strong>\n\n\n\n<p>Ensure your server has the necessary software installed. For Ubuntu 22.04, this includes Apache, PHP, Composer, and Node.js.\n\n\n\n<p><strong>2. Clone the Repository<\/strong>\n\n\n\n<p>Clone your Laravel project repository to the server:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">cd \/var\/www\/html\/\ngit clone https:\/\/github.com\/your-repo\/your-project.git ai-arena\ncd ai-arena<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20%2Fvar%2Fwww%2Fhtml%2F%0Agit%20clone%20https%3A%2F%2Fgithub.com%2Fyour-repo%2Fyour-project.git%20ai-arena%0Acd%20ai-arena\">\n                            <button class=\"copy-button\" data-label=\"cd \/var\/www\/html\/\ngit clone https:\/\/github.com\/your-repo\/your-project.git ai-arena\ncd ai-arena\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>3. Set Up Environment Variables<\/strong>\n\n\n\n<p>Copy the <code>.env.example<\/code> file to <code>.env<\/code> and set your environment-specific variables:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">cp .env.example .env\nvim .env<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cp%20.env.example%20.env%0Avim%20.env\">\n                            <button class=\"copy-button\" data-label=\"cp .env.example .env\nvim .env\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>4. Install PHP Dependencies<\/strong>\n\n\n\n<p>Install the necessary PHP dependencies without development packages and optimize the autoloader:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">composer install --no-dev --optimize-autoloader<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#composer%20install%20--no-dev%20--optimize-autoloader\">\n                            <button class=\"copy-button\" data-label=\"composer install --no-dev --optimize-autoloader\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>5. Generate Application Key<\/strong>\n\n\n\n<p>Generate the Laravel application key:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">php artisan key:generate<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#php%20artisan%20key%3Agenerate\">\n                            <button class=\"copy-button\" data-label=\"php artisan key:generate\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>6. Run Migrations<\/strong>\n\n\n\n<p>Apply the database migrations:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">php artisan migrate --force<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#php%20artisan%20migrate%20--force\">\n                            <button class=\"copy-button\" data-label=\"php artisan migrate --force\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>7. Set Directory Permissions<\/strong>\n\n\n\n<p>Ensure the correct permissions are set for storage and cache directories:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-12\">sudo chmod -R 777 storage\nsudo chown -R www-data:www-data storage bootstrap\/cache<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20chmod%20-R%20777%20storage%0Asudo%20chown%20-R%20www-data%3Awww-data%20storage%20bootstrap%2Fcache\">\n                            <button class=\"copy-button\" data-label=\"sudo chmod -R 777 storage\nsudo chown -R www-data:www-data storage bootstrap\/cache\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>8. Create Storage Link<\/strong>\n\n\n\n<p>Create a symbolic link from the public directory to your storage directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-13\">php artisan storage:link<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#php%20artisan%20storage%3Alink\">\n                            <button class=\"copy-button\" data-label=\"php artisan storage:link\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>9. Install Node.js and npm<\/strong>\n\n\n\n<p>If Node.js is not already installed, install it:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-14\">curl -fsSL https:\/\/deb.nodesource.com\/setup_21.x | sudo -E bash -\nsudo apt install -y nodejs<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#curl%20-fsSL%20https%3A%2F%2Fdeb.nodesource.com%2Fsetup_21.x%20%7C%20sudo%20-E%20bash%20-%0Asudo%20apt%20install%20-y%20nodejs\">\n                            <button class=\"copy-button\" data-label=\"curl -fsSL https:\/\/deb.nodesource.com\/setup_21.x | sudo -E bash -\nsudo apt install -y nodejs\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>10. Install Node.js Dependencies<\/strong>\n\n\n\n<p>Install the Node.js dependencies specified in <code>package.json<\/code>:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-15\">npm install<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install\">\n                            <button class=\"copy-button\" data-label=\"npm install\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>11. Build Assets for Production<\/strong>\n\n\n\n<p>Compile and optimize your front-end assets for production:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-16\">npm run build<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20run%20build\">\n                            <button class=\"copy-button\" data-label=\"npm run build\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>12. Configure Apache<\/strong>\n\n\n\n<p>Set up Apache to serve your Laravel application. Create a new virtual host configuration file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-17\">sudo vim \/etc\/apache2\/sites-available\/aiarena.zahiralam.com.conf<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20vim%20%2Fetc%2Fapache2%2Fsites-available%2Faiarena.zahiralam.com.conf\">\n                            <button class=\"copy-button\" data-label=\"sudo vim \/etc\/apache2\/sites-available\/aiarena.zahiralam.com.conf\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-18\">&lt;VirtualHost *:80&gt;\n    ServerName aiarena.zahiralam.com\n    DocumentRoot \/var\/www\/html\/ai-arena\/public\n\n    &lt;Directory \/var\/www\/html\/ai-arena\/public&gt;\n        Options Indexes FollowSymLinks\n        AllowOverride All\n        Require all granted\n    &lt;\/Directory&gt;\n\n    ErrorLog ${APACHE_LOG_DIR}\/aiarena-error.log\n    CustomLog ${APACHE_LOG_DIR}\/aiarena-access.log combined\n&lt;\/VirtualHost&gt;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%3CVirtualHost%20%2A%3A80%3E%0A%20%20%20%20ServerName%20aiarena.zahiralam.com%0A%20%20%20%20DocumentRoot%20%2Fvar%2Fwww%2Fhtml%2Fai-arena%2Fpublic%0A%0A%20%20%20%20%3CDirectory%20%2Fvar%2Fwww%2Fhtml%2Fai-arena%2Fpublic%3E%0A%20%20%20%20%20%20%20%20Options%20Indexes%20FollowSymLinks%0A%20%20%20%20%20%20%20%20AllowOverride%20All%0A%20%20%20%20%20%20%20%20Require%20all%20granted%0A%20%20%20%20%3C%2FDirectory%3E%0A%0A%20%20%20%20ErrorLog%20%24%7BAPACHE_LOG_DIR%7D%2Faiarena-error.log%0A%20%20%20%20CustomLog%20%24%7BAPACHE_LOG_DIR%7D%2Faiarena-access.log%20combined%0A%3C%2FVirtualHost%3E\">\n                            <button class=\"copy-button\" data-label=\"&lt;VirtualHost *:80&gt;\n    ServerName aiarena.zahiralam.com\n    DocumentRoot \/var\/www\/html\/ai-arena\/public\n\n    &lt;Directory \/var\/www\/html\/ai-arena\/public&gt;\n        Options Indexes FollowSymLinks\n        AllowOverride All\n        Require all granted\n    &lt;\/Directory&gt;\n\n    ErrorLog ${APACHE_LOG_DIR}\/aiarena-error.log\n    CustomLog ${APACHE_LOG_DIR}\/aiarena-access.log combined\n&lt;\/VirtualHost&gt;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Enable the site and restart Apache:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-19\">sudo a2ensite aiarena.zahiralam.com.conf\nsudo systemctl restart apache2<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20a2ensite%20aiarena.zahiralam.com.conf%0Asudo%20systemctl%20restart%20apache2\">\n                            <button class=\"copy-button\" data-label=\"sudo a2ensite aiarena.zahiralam.com.conf\nsudo systemctl restart apache2\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>13. Install SSL Certificate<\/strong>\n\n\n\n<p>Secure your site with an SSL certificate using Certbot:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-20\">sudo apt install certbot python3-certbot-apache\nsudo certbot --apache -d aiarena.zahiralam.com<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20apt%20install%20certbot%20python3-certbot-apache%0Asudo%20certbot%20--apache%20-d%20aiarena.zahiralam.com\">\n                            <button class=\"copy-button\" data-label=\"sudo apt install certbot python3-certbot-apache\nsudo certbot --apache -d aiarena.zahiralam.com\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">Summary of Production Commands<\/h3>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-21\">cd \/var\/www\/html\/\ngit clone https:\/\/github.com\/your-repo\/your-project.git ai-arena\ncd ai-arena\n\ncp .env.example .env\nnano .env\n\ncomposer install --no-dev --optimize-autoloader\nphp artisan key:generate\nphp artisan migrate --force\n\nsudo chmod -R 777 storage\nsudo chown -R www-data:www-data storage bootstrap\/cache\nphp artisan storage:link\n\ncurl -fsSL https:\/\/deb.nodesource.com\/setup_16.x | sudo -E bash -\nsudo apt install -y nodejs\n\nnpm install\nnpm run build\n\nsudo a2ensite aiarena.zahiralam.com.conf\nsudo systemctl restart apache2\n\nsudo apt install certbot python3-certbot-apache\nsudo certbot --apache -d aiarena.zahiralam.com<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20%2Fvar%2Fwww%2Fhtml%2F%0Agit%20clone%20https%3A%2F%2Fgithub.com%2Fyour-repo%2Fyour-project.git%20ai-arena%0Acd%20ai-arena%0A%0Acp%20.env.example%20.env%0Anano%20.env%0A%0Acomposer%20install%20--no-dev%20--optimize-autoloader%0Aphp%20artisan%20key%3Agenerate%0Aphp%20artisan%20migrate%20--force%0A%0Asudo%20chmod%20-R%20777%20storage%0Asudo%20chown%20-R%20www-data%3Awww-data%20storage%20bootstrap%2Fcache%0Aphp%20artisan%20storage%3Alink%0A%0Acurl%20-fsSL%20https%3A%2F%2Fdeb.nodesource.com%2Fsetup_16.x%20%7C%20sudo%20-E%20bash%20-%0Asudo%20apt%20install%20-y%20nodejs%0A%0Anpm%20install%0Anpm%20run%20build%0A%0Asudo%20a2ensite%20aiarena.zahiralam.com.conf%0Asudo%20systemctl%20restart%20apache2%0A%0Asudo%20apt%20install%20certbot%20python3-certbot-apache%0Asudo%20certbot%20--apache%20-d%20aiarena.zahiralam.com\">\n                            <button class=\"copy-button\" data-label=\"cd \/var\/www\/html\/\ngit clone https:\/\/github.com\/your-repo\/your-project.git ai-arena\ncd ai-arena\n\ncp .env.example .env\nnano .env\n\ncomposer install --no-dev --optimize-autoloader\nphp artisan key:generate\nphp artisan migrate --force\n\nsudo chmod -R 777 storage\nsudo chown -R www-data:www-data storage bootstrap\/cache\nphp artisan storage:link\n\ncurl -fsSL https:\/\/deb.nodesource.com\/setup_16.x | sudo -E bash -\nsudo apt install -y nodejs\n\nnpm install\nnpm run build\n\nsudo a2ensite aiarena.zahiralam.com.conf\nsudo systemctl restart apache2\n\nsudo apt install certbot python3-certbot-apache\nsudo certbot --apache -d aiarena.zahiralam.com\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Setting up a Laravel application with Vue.js authentication involves different steps for development and production environments. In development, we focus on creating a flexible environment that supports rapid iteration and testing. In production, the focus shifts to performance and security, ensuring the application runs smoothly and efficiently. By following the steps outlined above, you can set up and deploy your Laravel application effectively in both environments.\n\n\n\n<p>\n","protected":false},"excerpt":{"rendered":"<p>Setting up a Laravel application with Vue.js authentication can be divided into two main phases: development and production. Each phase has specific steps to ensure [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[87,86,81,85,84,88],"class_list":["post-568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-authentication","tag-development-environment","tag-laravel","tag-production-environment","tag-ssl","tag-vue-js"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=568"}],"version-history":[{"count":2,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/568\/revisions"}],"predecessor-version":[{"id":769,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/568\/revisions\/769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media\/768"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}