Introduction
Before I knew this I was making the backend and the front-end separately and the cors handle all the cross-origin requests,
But here is the problem cause I am broke I can't afford to pay for a good server then I went with Heroku,
and the free plan has a sleeping time when the server isn't used they shut it down and rerun it when somebody uses it then the whole npm run this is a lot of time to wait for the user,
so I decided to go with the same origin to cut this downtime to half then I made my research and I didn't found a lot so I decided to make one for me and the people beginners like me
let's start
If you wanna make the backend and the frontend of the same origin you can do it in two ways
From Nuxt Docs
here basically you write a regular express app
const app = require('express')()
then identify your port the server will run on
const port = process.env.PORT || 3000
then you load nuxt and write a line of code to check are you in development or not
const { loadNuxt, build } = require('nuxt');
const isDev = process.env.NODE_ENV !== 'production'
then we make async function then use nuxt.render middleware
async function start(){
// Render every route with Nuxt.js
const nuxt = await loadNuxt(isDev ? 'dev' : 'start')
//render Routes with nuxt render
app.use(nuxt.render)
//build on dev mode because of hot reloading (reload the page when any change happens)
if(isDev){
build(nuxt)
}
//listen to port
app.listen(port, '0.0.0.0')
console.log("loading on "+ port)
}
start();
then go to nuxt.config.js
middleware:['name of your middleware']
if you are interested to use this method
you can read more on
Nuxt Docs
Server Middleware
this is the simpler way to do it you have to do three things
1- Make api file and put all your express code on it
2- add this to the end of your index.js code
module.exports = app
// Start standalone server if directly running
if (require.main === module) {
const port = process.env.PORT || 3001
app.listen(port, () => {
// eslint-disable-next-line no-console
console.log(`API server listening on port ${port}`)
})
}
3- add serverMiddleware to nuxt.config.js
serverMiddleware: {
'/api': '~/api'
},
if you wanna use it directly without doing anything there is a ready to use the template on GitHub
in the last thanks for reading, I hope you found this helpful for you,
if you want me for work you can DM me on any of my social media on my profile
Check my new Startup Dremor
Top comments (0)