I have deployed Vue apps to a shared hosting environment before. But I’m having trouble doing so with my first Ionic app. Can anyone point me to documentation that describes how to do this?
As a point of reference, what I’ve done to deploy my previous Vue.js apps is:
In the dev environment I have a top level folder to hold the whole app. I create the backend in that folder (i.e., my app.js file would be there along with folders for the various js files needed for the backend.) Then, I create my Vue app in that top level folder, let’s call that folder client. Then, I have all my Views, Components, Router directories in the client folder. In the Vue world, I have added the following into my vue.config.js file:
outputDir: path.resolve(__dirname, ‘…/server/public’),
This then sets the dist files to go into the public folder. Then I run ‘run build’. This process does not delete the other non-vue files I have in that folder. After running ‘run build’, I copy the files from public to my public folder on my cpanel website.
I also have the following in my app.js file:
//Handle production
if(process.env.NODE_ENV === ‘production’) {
//static folder
app.use(express.static(__dirname + ‘/public/’))
//handle SPA
app.get(/.*/, (req, res) => res.sendFile(__dirname + ‘/public/index.html’));
}
All of this enables me to run my backend under the same domain as the front end (minimizing CORS issues and keeping things pretty simple.)
Now, with Ionic, it seems the build process destroys whatever is in the folder before it starts. I also can’t seem to find documentation on how to select a directory. And I’m ok with using the dist folder, if I can just figure out what I need to do with those files. I’ve tried putting them in the public folder on my server but they aren’t coming up. I get a blank page with a status 500 error.