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>
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 adistfolder that should be sent to nginx.Here is a sample nginx configuration