nuxtjs / vuejs / nodejs, what to upload - vue.js

i'm new to node js, vuejs AND nuxtjs in the same times. I'm currently developping an application and my server is full. It seem that when i'm runing npm run build locally and just uploading .nuxt folder it's working well. am i doing this well ?

For deploying you application there different steps available in the official docs. Here is the available options in nuxt.
Also check this commands and deployments for nuxtjs.
Server Deployment
To deploy a SSR application we use target: 'server', where server is the default value.
npm run build
Nuxt will create a .nuxt directory with everything inside ready to be deployed on your server hosting.
Once your application is built you can use the start command to see a production version of your application.
npm run start
Static Deployment (Pre-rendered)
Nuxt gives you the ability to host your web application on any static hosting.
To deploy a static generated site make sure you have target: 'static' in your nuxt.config.js (for Nuxt >= 2.13):
// nuxt.config.js
export default {
target: 'static'
}
npm run generate
Nuxt will create a dist/ directory with everything inside ready to be deployed on a static hosting service.

Related

PWA - Register service worker in dev mode

I would like to try PWA with create react app version 4.0, i did manage to generate new project as below
npx create-react-app my-app --template cra-template-pwa-typescript
When i try to run npm start i don't see any service-worker.js registered in chrome browser but if i build and serve then it works fine. I would like to register service-worker.js in dev mode, so i followed this article Easy Workbox Integration with create-react-app I have removed the production environment check in serviceWorkerRegistration.ts but no luck.
serviceWorkerRegistration.ts
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
Please advise ?
The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.
from here: https://create-react-app.dev/docs/making-a-progressive-web-app/

nuxt spa is stuck on loading screen when deployed on CPanel while it works fine on local server

I have a nuxt project which was written by someone else. I built a production build by using nuxt build --spa and tested the build in dist folder locally b using PHP's built in server and it worked fine.
But after deploying to the CPanel hosting, it's just stuck on the loading screen and does not load. I'm new to Nuxt so I'm not sure what is the problem here. The url of the staging site is here http://staging.sustainabilityinnocenter.com. Please let me know what could be the problem

Vue Static images not working when deployed on web server

I have created a Vue-cli project and it working fine on my local server. And when I 'npm run build' and deployed it to my web server I see my static-images and icon-fonts not working.
My App link : http://www.bootstrapdash.com/demo/star-admin-pro-vue/

OpenShift application for web app with minified static files (npm run build)

I'm currently developing a web application composed of:
api: an API built with Flask in Python
app: a web app built with vue-cli (based on webpack), and minified with npm run build
I've successfully built the api with an OpenShift Python S2I (source-to-image) image: python-36-rhel7.
I'd like to be able to automatically build the static web app from source and serve it through Nginx or Apache, in a separate app from the same project.
It should:
download the app source from the git repo (context-dir=/app/)
install npm
build it with npm install and npm run build
serve the built html+js+css files
There exist a node.js S2I image but it seems to be more suited for Express.js apps.
What would be the best way to build and serve a minified static web app on OpenShift?

Net Core Web Api and VueJS publish

First sorry my english. Im developing a Webapi net core 2 app in the backend and a VueJs app in the front end.
After run npm run build command I can see the vuejs app just created 1 Index.html file and a folder named static with all js, css, vendors inside.
I want to run both project in the same domain:port. I just run dotnet publish -c release and I place in the folder wwwroot the vue app and then modified startup.cs as:
DefaultFilesOptions DefaultFile = new DefaultFilesOptions();
DefaultFile.DefaultFileNames.Clear();
DefaultFile.DefaultFileNames.Add("Index.html");
app.UseDefaultFiles(DefaultFile);
app.UseStaticFiles();
This work perfect when I browse my webapi:5000 it's load automatically the Index.html, but my question is if this is a good practice. I dont care about compile both project and manually copy vue app inside wwwroot before the deploy.
Thanks.
For this I suggest you use this repository: https://github.com/MarkPieszak/aspnetcore-Vue-starter
It implements a webpack middleware with hot reload. When build your net core api it runs a "pipeline" that install dependencies, build your client and copy the static files onto your wwwroot ready to work across your api.