. Currently I am developing a Nuxt app that uses strapi “headless CMS” for its back-end. I know how to set up the development environment in my local PC. Currently my Nuxt app is running at http://localhost:3800/ and my strapi admin panel is running at http://localhost:1337/admin.
I read some blog articles and some pages on strapi and Nuxt documentations and also searched the web for my question but I did not find any answer that is suitable for me. My real question is that when in the future I want to deploy my app (for example in a host server in my country) in an online address like this: https://my-app-hamid.com do I need to change my folder structure? Currently I use two separate folders for my front and back of my app and each one has the standard structure of “Nuxt” and “strapi”. I mean that I must merge them to one folder structure or it is OK for an online app?
Also I want to know what changes occurs to my local-host addresses? Is that correct that I could access to those addresses in https://my-app.com-hamid:3800 and https://my-app-hamid.com:1337/admin, if I configure them in “Nuxt” and “strapi” server configurations? I mean that is it enough to only change the host name in “nuxt.config.js” and strapi “./config/server.js” files or I need to change a lot or maybe using two host? Could anyone please help me that which code I should insert to those files to access the same url in the future online app? Or if I am wrong explain me the structure of whole online app? I apologize if my question is not suitable in your opinion but I have little info about hosting websites and need help in this case. Usually tutorials and articles don't give me details of the process and only say that we must run commands like npm run build ,etc. So I decided to ask this question.
What I think that must be change is shown in the codes below:
nuxt.config.js files:
// current nuxt configuration
server: {
port: 3800
},
// future online configuration
server: {
port: 3800,
host: 'https://my-app.com'
}strapi ./config/server.js
// current code in server.js
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
admin: {
auth: {
secret: env('ADMIN_JWT_SECRET', '*******'),
},
},
});
// future online app
module.exports = ({ env }) => ({
host: env('HOST', 'https://my-app.com'),
port: env.int('PORT', 1337),
admin: {
auth: {
secret: env('ADMIN_JWT_SECRET', '*******'),
},
},
});But maybe that's completely wrong. I only guess that.
You need to host it somewhere with a Node.js server, so let's say Heroku. Then, when it's running there, you can update the URL that your app is looking for to have the same usage as when it's running locally.
You can follow up this tutorial to at least host it on Heroku.
When it's up there, you can try the commands of the Nuxt strapi module.
I'm not sure if there is a tutorial for exactly Strapi + Nuxt + Heroku, but the install should be doable even if you struggle. Take your time and watch some videos, you'll get there!
As for the URL, Heroku can provide one to you, if you want a custom domain like https://my-app-hamid.com, you can look for a registrar like https://porkbun.com/, buy a domain and do a bunch of A/CNAME records I guess (Heroku maybe have something to help you on this one too).
PS: there should be no difference for the server.js, use env variable to have the flexibility between the environments. Locally, you'll use an .env file and remotely, you will input those into the dashboard section of Heroku.
(of course, you can host it anywhere but Heroku is still the best when you get started and you're kinda lost)
TDLR: try to get there steps by steps.