I want to use Golang as the server and Nuxt as the frontend, I googled it around but couldn't find any examples.
Code for express/node.js that i found out in the nuxt + express. Link is below
const express = require('express')
// Create express instnace
const app = express()
// Require API routes
const users = require('./routes/users')
// Import API Routes
app.use(users)
// Export the server middleware
module.exports = {
path: '/api',
handler: app
}
I can just create golang server api and deploy it as a microservice but will I lose the SSR power of nuxt? as in will google still crawl my web pages if i use a separate server as opposed to monolithic version of nuxt + node.js
link: https://github.com/nuxt-community/express-template
Regards
You should just separate them. One server is for your backend api in golang. Other server is node server for nuxt ssr. Then you can use nginx to route requests to desired server based on path or anything. And everything will work
Related
I have a project, using Nuxt 2 as frontend and Php-Laravel as backend app. The app have multiple language on each side also using localized routes in Nuxt + i18n.
We're sending some notification emails on backend managed by cron jobs, some emails contains a links to directed to front end.
But there is too many options due to localized routes and it is hard to manage.
For example, there is a page on frontend
en/account/payments/12345/invoice
tr/hesap/ödemeler/12345/fatura
es/cuenta/pagos/12345/factura
fr/compte/paiements/12345/facture
it/account/pagamenti/12345/fattura
How can i manage that?
I've tried a create server middleware on Nuxt to create these routes and to work act rest api server only return paths as json, but i can't access vue-router on server middleware.
Could you suggest me a solution?
I've developed vue js front end and I could communicate backend using axios call and when I call I need to specify backend service port and endpoint. how can I use nginx and docker and then after I use nginx and docker how app communicate with backend ? ultimately I need to deploy front end and backend services on kubernetes cluster.
I've read many tutorial about this and I don't have clear idea in concept and also need to implement the solution. I have never use nginx before
Backend : http://localhost:8084
Here is my axios call
import axios from 'axios'
const API_URL = 'http://localhost:8084'
class NotificationDataService {
retrieveAllNotifications() {
return axios.get(`${API_URL}/notification/getall`);
}
}
export default new NotificationDataService()
with Docker (and thus Kubernetes) approach you have to separate the container from your Frontend and the container from your Backend.
In Kubernetes you can use an Ingress. It is a reverse proxy, so you don't need Nginx. https://kubernetes.io/docs/concepts/services-networking/ingress/
To configure the URL of your Backend in your Vue.js application, I advise you not to use a constant variable as you do, but the configuration system of the Framework: https://cli.vuejs.org/guide/mode-and-env.html#modes.
You need to expose your frontend and backend with your Ingress, because your Axios calls are sent from the client to the backend. So you could have :
www.mydomain.com/ for your Frontend
www.mydomain.com/api for your backend
And now your frontend has only made calls to www.mydomain.com/api.
Translated with www.DeepL.com/Translator (free version)
I have a front-end application (Vue.js). I have my own REST API (Laravel). I want my Vue.js app to fetch my data from the REST API. Both apps have been deployed to Heroku and each has their own domains.
Locally, in my Vue.js app, I just had this following code snippet to connect to my REST API:
mounted() {
fetch('http://127.0.0.1:8000/api/testdata', {
method: 'get'
})
.then((response) => {
return response.json()
})
// 'jsonData' refers to the json parsed response
.then((jsonData) => {
this.testData = jsonData.data
})
Since both apps have now been deployed, this obviously doesn't work now. I was wondering what I would have to put inside the fetch() method, now that both apps are on the web.
To view my API data locally with Postman, I can just enter this URL in the 'GET' search: http://127.0.0.1:8000/api/test_data.
Now, I'm not sure what I have to enter to see my deployed API data. I've tried this: https://pure-mountain-87762.herokuapp.com/api/test_data and this: https://pure-mountain-87762.herokuapp.com/test_data.
If I know what to put in Postman to view my data, then I should know what to put in my fetch() method (in theory), since the URL's are the same locally.
Also, does anyone know if there would be anything else to configure after this step has been completed?
Thank you
Yes you add a normal domain url to make requests. It will be Your-app-name.herokuapp.com
Check out if you need CORS allowed methods on your backend
How do you provide a different endpoint for authenticated GraphQL queries using Apollo Server? i.e. /graphql for public queries and /auth/graphql for private queries? I can find plenty of examples for doing both over a single endpoint but none for multiple endpoints.
If you are using apollo-server-express, you can create multiple ApolloServer instance and applyMiddleware to express app.
const app = express();
// create server1, server2 with its schema
// then
server1.applyMiddleware({ app, path: '/auth/graphql' });
server2.applyMiddleware({ app, path: '/graphql' });
I have a laravel + vue app. the authentication is managed fully using laravel Auth and blades. Now I'm building a vue application inside the system. This vue app is integrated with vue-router and vuex. Im using Api controller for any http request from my vue aplication.
app.js
Vue.use(VueRouter);
global.router = new VueRouter({
base: window.location.pathname.replace(/^(\/c\/[^\/]+).*/i,'$1'),
routes: routes
});
new Vue({
el: '#spa',
render: h => h(App),
router,
store: store,
});
Everything else is working good except on how to pass Auth data from laravel to vue. And how to auto log out the user if user is logged out from the main laravel system. Is there any solution or workaround to this?
Thanks
Assuming session information is stored in a cookie and vue app is served on same domain as laravel app exposing login and API, it's available in frontend via document.cookie API. Since cookies are included in every request per default, you don't have to care about sending it along with your AJAX requests.
If vue application is not served on the same domain, you have to use token based approaches as described in API Authentication chapter of Laravel docs. In that case you also have to care about CORS.