How can i run the index file? How can I serve it on github.
app:build Opening index.html over file:// won't work
You can host your app on firebase hosting.
Go to https://console.firebase.google.com , and create a project.
Download the firebase-tools and deploy your built files there.
Additionally, you can also use the cloud messaging from firestore in your app.
For localhost, you can use "serve" module.
Related
Okay, I'm trying to publish my Nuxt.js app on my web host but I've run into some issues. I do not want a static site.
After running "npm run build" locally, I transferred the files to my web host with FileZilla. Then I'm supposed to fill in the statements shown in the picture below.
And this is where my problems begin. The app does not want to start at all, and i am nor sure what to put as "Application startup file". And according to my web host, the overall problem is that there is no startup file for Nuxt applications. I am completely new to Nuxt and do not have that knowledge and therefore I now turn to you, is it the case that there is no starup file for Nuxt?
The web host also mentioned that it is more difficult to get a Nuxt application upp and running on shared hosting, is that correct? Will I not be able to get my app up and running in this place?
My web host had received this error message when they tried to start my app. Maybe there are some clues in there to find.
ERROR Request failed with status code 404 15:58:38
at createError ({{my-adress}}/14/lib/node_modules/axios/lib/core/createError.js:16:15)
at settle ({{my-adress}}/14/lib/node_modules/axios/lib/core/settle.js:17:12)
at Unzip.handleStreamEnd ({{my-adress}}/14/lib/node_modules/axios/lib/adapters/http.js:260:11)
at Unzip.emit (events.js:315:20)
at endReadableNT (internal/streams/readable.js:1327:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Hope someone can help!
Without some more context, I can't tell you exactly what your issue is but I suspect it is to do with how the web server on your shared hosting is configured to serve files. When you visit a route, it's not correctly finding that index.html page.
A Nuxt static application deploys with a structure where each page route has its own rendered index.html page inside a folder - if I'm not mistaken.
Your web path may look like example.com/hello but in reality it resolves as example.com/hello/index.html. Some web servers will struggle by default with this structure if not setup correctly.
Honestly, if I were you I'd deploy the project to either Vercel or Netlify.
Both have incredibly generous free tiers that will let you host your application for (if it's not making any money) for a very long time at a good scale.
They both run on automatically scaling infrastructure so you don't need to worry how much resources your site is consuming or how many users you get. It will maintain responsive and reliable without any detriment to load speed.
They'll also automatically handle building and deploying the application on your behalf. All you need to do is connect the service to a Github repository.
They also provide CDN's and other optimisations such as compression for you as well to make your site much faster.
Nuxt has a dedicated page on Netlify deployment. I recommend you give it a read:
https://nuxtjs.org/docs/2.x/deployment/netlify-deployment/
When you do npm run build (or npm run generate), your final content will be available in the /dist directory (the console should tell it to you at the end). It contains an index.html file, this is the one that serves as entry point.
Btw, before going any further double check that this is working locally:
npm run build
npm run start (URL and port will be given to you)
If it works locally, you can proceed.
.nuxt is essentially used for development purposes, caching and so on. And should not be tracked by Git, nor deployed.
I'd like to advice against using FTP for deploys (especially if not secured). Prefer a more modern way, like pushing your latest git commit and let the platform handle the hook or fetching your new code and bundling your app for you.
As recommended above, Netlify is one of the best place to easily host your Nuxt app: simple, fast and headache-free. Also, check #jordan's link about the various platform deployments, you may find yours (if it's good/well known).
I may come here a little late, but this is the way I configure the "Application startup file" when deploying a Nuxt app in shared hosting using the NodeJS Selector app (that commonly you find in CPanel)
Since basically the startup file in NodeSelector is executed as if you would run node startup_file.js, you can create an app.js at the root of the project, and add the following code:
require('#nuxt/cli').run(['start']);
This is basically the same as nuxt start, which is basically the start script in your package.json
Hope this can help others having the same issue. I leave here the same issue posted in git:
https://github.com/nuxt/nuxt.js/issues/7192
I uploaded a front-end mapping platform on Github Pages which I developed with vue.js + vue2leaflet.
The thing is, on my local environment I consume the data on the map from my local database.
With Github pages only hosting my front-end, I wanted to consume a .xlsx file instead of the database. But I cannot expose this file on github since it has sensible information.
The github repository is this. (Currently consuming a api just to showcase.)
The GithubPage is using the gh-pages branch. I deploy after building it and pushing the dist folder to this branch.
I am creating a SPA (single page application) with vue-cli.
I run npm run build script then upload dist files in the public_html folder but didn't work
My hosting service uses direct admin as a web control panel.
I read the deployment guide but didn't help me
hosting service that I use works with Linux, PHP, and Apache
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.
Read public_path guide
I am building an iOS app from an existing Vue/Laravel based project. I have found that by configuring capacitor.config.json with:
{
"bundledWebRuntime": false,
"webDir": "public",
"server": {
"url": "http://192.168.99.100" //the location of my docker server
}
}
that I can get the index.html and app.js bundle from the Laravel server and run the app fine that way. However this seems to defeat much of the purpose of bundling and deploying an application such as saving the latency for fetching app.js etc.
If I remove the "server" field from capacitor.config.json, then the app runs from the built version of app.js and index.html found locally on the iOS device. However, I find that I can no longer communicate with the Laravel server for data requests even when configuring the baseUrl for axios to the same http://192.168.99.100
This had nothing to do with Axios. Rather I needed to enable CORS for the iOS device, which I did using the spatie/laravel-cors package.
I see that it uses HTML, CSS, and JS, but does that package with the app or does it need a server if it is a static page?
Also if a server is needed could i get away with hosting on Github pages.
Your HTML, CSS, and JS files are bundled with the app bundle and loaded from local storage. This means that your content comes from file:// (unless you have certain plugins installed that create an http server on localhost).
You'll only need a server if you need one as a backend (which you'd communicate with via XHR/Ajax).