This question already has answers here:
Which command do I use to generate the build of a Vue app?
(19 answers)
Closed 4 years ago.
I think I have a bit of a mess here. I have my vue app running in my localhost environment. I want to deploy to a server I have hired. Which are the steps to accomplish this?
I have installed nodejs and npm on the server. At a first glance I tried to go the way I always did when using php, running nodejs app through apache server but it seems it is not the best option from what I read. In my local machine I run:
npm run serve
to start a server to run my vue app locally. Should I do same thing on my remote server? Are there better options?
Should I do same thing on my remote server?
Definitely no.
Notice in your package.json file you should have a script called "build", i.e. you can execute it with the command:
$ npm run build
Once executed, it should compile your Vue project and place the resulting files in a dist folder at the root of your project.
Notice that these files are plain HTML, JS (for browser, since Vue is only for front end) and CSS (plus any of your project assets if applicable).
Since you are familiar with PHP, you should know what to do with those files. Should your project be "simple" and not require backend services (like AJAX, REST, etc.), you can actually serve them on a simple server (no need for PHP, Node, etc.).
Otherwise, you should have plenty tutorials and resources online explaining how to publish those files on a simple server.
Related
I have an issue with my application(a chatbot made with Vite/Node.js). When I run the command: npm run dev in the terminal inside vscode, I can open the localhost and use the application. But when I try to upload the files to my ftp server, and then open the website to run the applicaton, it does not work. I have looked for hours, and found out that the reason for this issue, is that my ftp server, does not have node.js and npm installed. So I guess my question is. How do I install node.js and npm on my ftp server, so that I am able to run this "npm run dev" command on the server? Btw, I am a beginner developer, with under 1 year of experience.
This is a pretty board question. But as you have discovered you can not use node on websites that are statically hosted. You can only use javascript, CSS, and HTML.
If you want to have a server, node running with a framework like express, then you need to host the server. But that is a giant topic, you could google it; there are many ways to host a back end service that is running node. (for instance an EC2 container on AWS)
We have just a single webpage with some links on clicking them it will redirect to different sources. As of now we are using "npm run build" to create the production package.
But because of the build files having dependencies with node, i cannot host it in a particular server.
Is there a way to create the Reactjs production build without using node ?
I suggest using Netlify to host your react app easily .
Below are some resources that can help you along the way.
https://www.netlify.com/with/react/
https://www.youtube.com/watch?v=sGBdp9r2GSg
You can have a build and upload it manually to your Netlify account,
You can use the CLI (netlify-cli) or you can your account to git .
Similar approach can be followed with git pages for example.
What packages do you have in your package.json file? Did you use a React project template that uses Node server-side features? It seems like you want to host your React project statically, not necessarily get rid of Node and npm.
For example, I've worked on lots of React projects using npm and create-react-app that we were able to host with a .NET backend and Microsoft IIS (instead of Node). The output is .html, .js, and other static files that you can host anywhere.
When you build a react app, the files at folder build contains everything it needs to run
If your hosting server hasn't integration with CI/CD, then you must deploy manually only the build folder, not the root folder (the folder that contains package.json).
I believe your issue is just a confusion/misunderstanding on how react works, how to deploy it, and how to run it.
React needs to be built on an environment where node, npm, and other tools are available. It can be on a build server or in your local machine.
After built, react app is just a folder with a bunch of html, css, js files which will run on the client browser, so, there's no dependency on NODE anymore.
These static files must be served with a simple static file server (apache, nginx, iis, etc),
I recommend you build the app locally on your machine and then deploy manually to your host through ftp, ssh or web interface.
If react is overkill to your needs, then don't use it.
The best approach is to host it in a cloud service that can do the full CI/CD integrated with git, all automated (Google GCP, AWS, Azure, Netlify, etc)
Really have some difficulties building React Boilerplate (https://github.com/react-boilerplate/react-boilerplate) to copy built files to external hosting server.
After npm run build command I FTP all generated files into a separate folder at my remote host, say, http://example.com/test/react.
However, all paths inside the app are pointing to / path, so on deeper level (/test/react) the app would not load.
I have not found anything in documentation about this for React Boilerplate. Any help or suggestion?
Does angular run on node server?
If yes then does ng serve run node server or angular server?
If it runs node server then can I upload file on this node server using angular?
My actual requirement is to edit a file (say en.json) in my project using angular. Can I do that just using the angular server because it runs on node?
First of all, Angular isn't a 'server'. It's a framework. If you're talking about specific CLIs, running ng serve will start a Node server, it's all in their documentation, clear as day. Anyways, you shouldn't even try editing files using Angular, you can make http requests towards an endpoint via Angular and make your NodeJS server edit that specific file on your back-end. For uploading files check this npm package out, I've personally used it numerous times while I worked with Angular.
Here's the thing, I have a folder, using Nodejs and socket.io(it's a chat) and I also have a server running Tomcat 8. I have worked with .war and .ear files before in Tomcat, but I'm new in this nodejs deployment thing.
Do you guys have like a tutorial or can you explain me how can I like package my app and then deploy it, or upload the folder, I don't know, something.
You don't need tomcat to run your node.js application. Just be sure node is installed on your server and the port you are using is allowed on your server's firewall and you are good to go. (Don't forget to install your npm packages through your packages.json of course)
Usually a node.js app is run like below;
node server.js
And that's all. If you'd like to keep it alive or restart in any case of issue you can use forever (https://www.npmjs.com/package/forever)
If you want to load balance with reverse proxy or if you want to configure ssl etc. you can use nginx or haproxy etc.
If you want to automate your deployment you can create a hook to your git source (github, bitbucket etc.) and write down a script to stop / start your node processes, fetch modified files, install npm packages etc.