How to deploy the vue-cli project to product enviroment? - node.js

Recently I begin to use vue-cli to generate a pure front-end project(not use npm express anymore).
When I on the develop phase everything is fine.Cause I can use the magic.
npm run dev
And then I want to run the project on the production environment,but I'm not sure this way is a good idea.
So I google some method to teach me how to deploy the vue-cli project,but I only got
run
npm run build
After that I got a dist folder,and what is the next step?
is there a way like run the node express project ?
node ./bin/www
please help me.

I've got the answer,and don't need the hosting. Here we go.
Step 1 : Build the project and get the dist directory.
Step 2 : Let the nginx reference to this dist directory.(Just treat it like static files)
Step 3 : You can use browser to browse your website now.

Related

Vite manifest not found laravel hostinger

we uploaded our working laravel code on hostinger (shared servers).
Once uploaded we are having this error : Vite manifest not found at: /home/.../blog/public/build/manifest.json
Missing Vite Manifest File
We deleted the line #vite(['resources/css/app.css', 'resources/js/app.js']) from the code.
the application works this time but css and js of login doesn't work.
Do you have any idea of the issue please ?
Best regards,
Hello There hope it's not late.
In order to use vite in your Laravel project for the installed UI files in the Authentication Module, you have to migrate to your project and run the following commands.
npm install
npm run dev
But as long as you are in production run the below command.
npm run build
Then you'll be good to go.
shared hosting is sucks because we don't have ssh access and have very limited choice to do. But it is really cheap. so here is what I do to upload laravel 9 with vue.js on board with vite at hostinger shared hosting.
run npm run build on local
upload all files outside public_html
copy all the data at public directory to public_html. (copy not move)
that should resolve Vite manifest not found error

Netlify: How do you deploy sites that are nested in a folder?

I have a repo that has the backend and frontend (create-react-app) in two separate folders. For the build command, I have something like cd frontend && npm run build and for the publish directory, I have something like frontend/build, but this is not working.
disclaimer: I work for Netlify.
If you were to clone a new copy (no node modules installed in the project, for instance) of your project on a fresh laptop with nothing else except node and npm installed there, how would you build it? Imagine netlify's build process like that. So you're missing at least an "npm install" step in there :)
Anything else missing, like globally installed npm packages? Need to specify them in package.json so that Netlify's build network knows to grab them for you. Ruby gems? Better have a Gemfile in your repo!
Netlify tries to npm install (and bundle install) automatically for you, assuming there is a package.json either in the root of your repository (I'm guessing yours is in frontend/ ?) OR if you set the "base" parameter so that we start our build in the base directory. This is probably a good pattern for you, to set "base" to frontend, and then set your publish directory to build.
You can specify that base parameter in netlify.toml something like this:
[build]
base = "frontend"
Note that netlify.toml must reside in the root of your repository.
For more details on how Netlify builds, check out the following articles:
Overview of how our build network works. This article also shows how you can download our build image to test locally.
Settings that affect our build environment. Useful for telling us about what node version to use, for instance.
Some frequently experienced problems
If after some reading and experimenting, you still can't figure things out, ping the helpdesk.
The top answer is correct ^. For anyone looking to simply change the base directory (lets say there is only one npm install/start) you need to change the BASE DIRECTORY, which you will find in the build settings. Simply go to: site-settings -> build & deploy - and you will see it where I pointed in the picture attacted. Hopefully that helps someone in need of this. see here

React npm run build, what is that, why we need that?

Currently I made a simple app with react, it works perfectly and I use react-scripts. I installed React by following the Facebook github page, and it written that "When you're ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. ". After I press npm run build, a folder build created, but I do not know what to do with this folder. I tried some method like, move all folders except build and npm run, but it did not work. Anyone can explain me what is this folder "build" ? Thank you
npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.

Have the server build VS. check in & push a locally built app

What are some pro/cons to pushing built code vs. having the server build it?
This is a general question, but here's my specific scenario to illustrate what I'm talking about:
On Heroku I've got a React app that has a simple express server to do OAuth. Currently, I have a postinstall hook in my package.json that runs a webpack production config to do some extract-text stuff and create a dist/ directory with my bundled, uglifyied code. To get all of this to run on Heroku I had to mark pretty much all of my dependencies as 'dependencies' instead of 'devDependencies'.
I know it's a bad practice to check my dist/ into git but it would save me from having to install a dozen plus node_modules on the server. Any thoughts?

How to Deploy angular 2 CLI project in ubuntu production server hosted locally

Im am building a locally hosted ubuntu server. I want to deploy Angular 2 cli project on this server. im a newbie to angular 2. kindly help
The following will build your project and take care of minification, etc...
ng build --prod
That will generate a folder called "dist" - you can simply take the contents of that and copy them to your /var/www (or whatever the root of your webserver is)

Resources