Separate Laravel Vue to only Vue 2

Question

Basically we already use: API for the routes, and auth-sanctum to login (so I guess it won't be a problem).

How to separate this to backend and frontend?

I already tested this with express (probably not the way to go), could run but I would rather run via npm run dev just like any other Vue project out there.

Below an example, of what we've done, we have to run both npm run hot and npm run serve

server.js

const express = require("express");
const url = require('url');
const proxy = require('express-http-proxy');
// create new express app and save it as "app"
const app = express();
// server configuration
const PORT = 3000;
// serve static assets
app.use(express.static("public"));
// create a route to serve index.html

const apiProxy = proxy('urlhere/api', {
  proxyReqPathResolver: req => url.parse(req.baseUrl).path
});

// app.use('/api', proxy(process.env.BASE_URL));
app.use('/api/*', apiProxy);

app.get("/", (

req, res) => {
  res.sendFile("./index.html", { root: __dirname + "/public/" });
});
// make the server listen to requests
app.listen(PORT, () => {
  console.log(`Server running at: http://localhost:${PORT}/`);
});

package.json

"serve": "node server.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

public/index.html

<body>

  <div id="app"></div>

  <!-- Layout helpers -->
  <!-- <script src="/js/app.js"></script> -->
  <!-- <script src="/bundle.js"></script> -->
  <script src="http://localhost:8080/bundle.js"></script>


  <!-- built files will be auto injected -->
</body>

what do you mean by "Separate Laravel Vue to only Vue 2" and "How to separate this to backend and frontend?". Do you mean to say separate folder structure and run both on their own independent servers? — Adi
– Adi, Commented Nov 6, 2023 at 21:35
Yeah exacly that, i'm serving via express and using reverse proxies to access the routes but it feels so much hacky — NataJdaCOliveira
– NataJdaCOliveira, Commented Nov 6, 2023 at 21:38
So is your current structure already mixed like laravel and vue or have you already separated? Also is this only for development purpose? — Adi
– Adi, Commented Nov 6, 2023 at 21:47
It's for production, I already separated and manage to serve it via express, but it makes no sense to me since I have to run both npm run hot and serve, and then do reverse proxies to access the laravel APIs (which still contains both front and back, but I guess separating the backend later is easier). Currently im having to add all the web.php routes to the proxy — NataJdaCOliveira
– NataJdaCOliveira, Commented Nov 6, 2023 at 21:52
So i did something similar, the answer to this post by @Denis might help with a little tweaks, I had similar nginx config but i used location /api { try_files $uri $uri/ /index.php?$query_string; } and some other configs as well. — Adi
– Adi, Commented Nov 6, 2023 at 22:42

Denis Sinyukov · Accepted Answer · 2023-11-06 21:40:26Z

To separate frontend and backend you need a server. A simple solution is nginx. On the frontend you do an npm run build. Eventually you have a dist folder that should be sent to nginx.

Here is a sample nginx configuration

server {

    listen 80;
    server_name localhost;
    server_tokens off;
    root /var/www/front/dist;
    index index.html index.htm;

    access_log vuijs-access.log combined;
    error_log vuijs-error.log error;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass https://localhost:8082;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Collectives™ on Stack Overflow

Separate Laravel Vue to only Vue 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related