I want to upload my React project to an external server. I already have a project and I use node server locally to run it using webpack.
I don't have any deployment experience prior to this. So any insights regarding deployment would be helpful.
You can follow these steps:
SSH to the server using server credentials.
sudo su
git clone repository address [Only if the repository hasn't been cloned yet]
cd projectFolder
git checkout <branchYouWantToDeploy>
git pull origin <branchYouWantToDeploy>
npm install
npm run build:production
apachectl graceful [only for apache servers]
service nginx reload [only for nginx servers]
exit
If git and npm are not installed in the server, you can follow these links respectively:
GIT
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
NODE
https://nodejs.org/en/download/package-manager/
npm is installed with Node.js npm is distributed with Node.js- which
means that when you download Node.js, you automatically get npm
installed on your computer.
You may/may not need to follow all the steps depending upon the type and complexity of your project and server. However those should be good enough to start. You can always add more details regarding your project and deployment server in your question.
Here are some medium blog post that might you to go in-depth:
Understanding React deployment
Deploy react-webpack to Digital Ocean with Nginx and Github
Related
I'm currently using NextJS and to run a production build, I use npm run build followed by npm run start. This all works well on my local machine.
However, I need to deploy this app on an offline machine where I may not have an internet connection to install all the node packages.
I've taken a look at npm pkg and npm pack utilities, but not quite sure which is the best one to use in the context of a nextjs app.
Would appreciate any advice on the best way to do this.
Edit: thinking along the lines of how I would build my maven project and have a .jar output which I can use to deploy to any other machine as a single deployable file.
Say I have a node.js application (some web server for the manner of sake). So I have a directory structure with a src which contains my code and a package.json which includes some metadata about my project and all the packages needed to run it. So I run npm install to get all the packages and run node server.js to run the application.
I have a CI pipeline for my application that upon PR to master runs tests, and if succeeds, merges to master. The next step I want is to deploy the application on a server.
This means that eventually I need my source code plus all the dependencies on the server, and run node server.js.
Is it correct to publish my application as a package (as part of the CI pipeline), and then on the server run npm install to fetch it? Or is npm installing packages only makes sense for packages that serve as some functionality for other applications?
The reason I doubt this is that when you run npm install (at least on a directory with a package.json) you get all the packages in the node_modules directory, which makes me believe that the second option I stated is true.
NOTE
The application is running on a Windows server, no Dockers.
I use vuetify (vue)
Is it mandatory for each deployment to production for remove node modules and run npm install? Or just run npm run build?
I have two option :
Option 1 : Every deployment, I run the npm run build directly
Option 2 :
Delete the contents of dist folder
Delete node_modules folder
npm install
npm run build
Which is the best option?
npm install
This command installs a package, and any packages that it depends on. If the package has a package-lock or shrinkwrap file, the installation of dependencies will be driven by that, with an npm-shrinkwrap.json taking precedence if both files exist. See package-lock.json and npm-shrinkwrap.
If you did not install or update the package before releasing the project, you do not need to execute npm install, otherwise, you need to execute it to ensure that dependent packages on the production environment is consistent with your local dependent package version.
If you are using an automatic build deployment tool like jenkins, for convenience you can execute the install command before each build. It's okay.
Imagine more environments, not just a production:
development
testing1
staging
uat
production
Can we upload the npm run build result (compressed js) or node_modules to our git repository? ANSWER IS NOT!!. So if you need to have a version of your app running in any of these environments, you must to execute npm run build. And this command needs the classic npm run install. I think this last sentence, answer your question.
(ADVICE) Docker to the rescue
assumption 1 your client-side app (vue) is not complex(no login, no session, no logout, etc ), you could publish it using a basic nginx, apache, basic-nodejs.
assumption 2 you are able to have one more server for docker private repository. Also if you are in google, amazon o azure, this service is ready to use, of course a payment is required
In one line, with docker you must execute just one time npm install and npm run build. Complete flow is:
developer push some changes to the git repository
manually or automatically a docker build in launched.
inside Dockerfile, npm install and npm run build is executed. Also a minimal server with nodejs (example) is configured pointing to your builded assets
your new docker image is uploaded to your docker private repository
that's all
If your quality assurance team needs to perform some tests to your new app, just a docker image download is required. If everything is ok, you pass to the next stage (staging or uat) or production. Steps will be the same: just download the docker image.
Optimizations
Use docker stages to split build and start steps
If your app does not have complex flows(no login, no session, no logout, etc ), replace node basic server with a simple nginx
I need login and logout
In this case, nginx or apache does not helps you because they are a simple static servers.
You could use a minimal nodejs code like this:
https://github.com/jrichardsz/nodejs-static-pages/blob/master/server.js
Adding /login , /logout, etc
Or use my server:
https://github.com/utec/geofrontend-server
which has a /login, /logout and other cool features for example: How are you planning to pass your backend api urls to your vue app in any of your environments?.
I am very very new to React JS and have tried to install it on my VPS server that is running Cent OS.
Node.js seems to be working,
I have build a React project using the following code as a root level user on SSH:
npx create-react-app my-react-project
cd my-react-project
npm start
but when trying to view in browser I get a blank page (instead of react js default template)?
I see many people install this locally but I haven't found any examples on a hosted VPS, is this something I am doing wrong?
Any help would be much appreciated, thanks!
if you have ssh access to your VPS, the rest is pretty the same as your local environment.
You can copy/paste your project to your CentOS host and use the following commands in order to run it:
cd your_project_folder_which_includes_package_json_file
npm install
npm start
Also, if you are using this server as a production host, You should consider getting a production build of your React app on your local env by running npm run build and then publishing the build folder on your server and serving it using a static file server or using a reverse-proxy such as Nginx as a static server.
Actually this page in React documentation does a good job in explaining the details of deploying a React app, I encourage you to take a look at it.
I'm new to node.js. After creating modularized project with express, tests, .nvmrc etc. it's finally time to deploy the app. How it should be done? in java you bundle your project into a single file, self containing and you put in into a server with some configuration. what about node.js?
Should i just copy the whole directory with sources and node_modules to production machine and use systemd, pm2 or other process manager to just run it? but i heard some of the dependencies might be system-dependend so they may work incorrectly
or should i copy only sources and run npm install --production on the production machine? but this way the deployment is only possible when npm repositories are online. also it takes time to build the application and it has to be done on all machines in the cluster. also what about quickly rolling back to previous version in case there is some bug? again, time and online npm repos are needed
another option is to build a docker image. but it seems awkward that the only way to easily and safely deploy the app is using third party technology
how it's being done in real life scenarios?
sure don't copy the whole directory especially node_modules.
all the packages installed on your system should be installed with --save option example: npm install --save express if you do so you will have in your package.json the dependencies required for your project whether they are dev dependencies or production dependencies.
I don't know what your project structure looks like, but as a node application you have to run npm init . in your project to setup the package.json file and then you can start adding your dependencies with --save.
usually we use git
version control system
to deploy to the server, first we push our code to a git repository then we pull from it to the server git
you have to add .gitignore in your project and ignore node_modules from being committed to your git repository.
then you can pull to your server and run npm install on the server. and sure you need to launch your web server to serve your application example ngnix
you can try Heroku for an easy deployment, all you have to do is to setup your project with Heroku, and when you push your code, Heroku manages the deployment . Heroku