Easily deploy create-react-app apps via sftp.
It's possible to set up a basic react app using the amazing create-react-app, but moving from a local project to a deployed production application is not quite so simple. Typically, one must build the app for production, and then move the build directory over to the server. Fine for a once off, but for continuous development, it's a total pain.
This tool should make deployment easier. Deployment is as simple as running:
rup deploy production
Install the tool globally to make the rup
cli available:
npm i -g react-deploy-sftp
Create a react-up.json file as follows, somewhere in your project. This can be in your project root, but for safety, I like to put it in a /deploy
directory that is .gitignored so I never accidentally send private access keys or passwords to public Git repos.
{
"production":{
"buildDir" :"../build",
"remoteDir":"/var/www/myreactapp",
"remoteDirOwner": "owner",
"remoteDirGroup": "www-data",
"tarballName":"temp-deployment.tar",
"host": "1.1.1.1",
"port": 22,
"username": "user",
"password": "coolpassword"
},
"staging":{
"buildDir" :"../build",
"remoteDir":"/var/www/myreactapp",
"remoteDirOwner": "owner",
"remoteDirGroup": "www-data",
"tarballName":"temp-deployment.tar",
"host": "1.1.1.1",
"port": 22,
"username": "user",
"password": "coolpassword"
},
...
}
Notes on the above example react-up.json
file:
- "production" and "staging" correspond to the second command line argument when running
rup
. - You may have as many of these groups as you like, named whatever you like.
- "buildDir" is the location of the build relative to the current working directory.
- "remoteDir" is the location of the react app on the remote server.
- "remoteDirOwner" sets chown owner when making directory
- "remoteDirGroup" sets chown group when making directory
- "tarballName" is the name of the temporary file created during deployment.
- "host" is the ip address of the server
- "port" is the port for ssh/sftp
- "username" is the username for ssh/sftp
- "password" is the password for ssh/sftp
See cli.js
.
- The build directory is rolled up in a tarball.
- Remote project directory is removed
- Remote project directory is recreated empty.
- The tarball is sftp'd across to the remote server.
- The tarball is dearchived.
- The tarball is deleted.
In future I hope to implement other features such as ""init", "setup" and "teardown" etc.
- It's short and easy to type.
- It's a nod to "mup" which stands for "meteor up", a deployment tool for meteor that is just wonderful. I'd be using that if I could...but it's overkill for a simple react app and relies on docker images, which bring way too much overhead in my opinion. Maybe this is overkill for a simple react app too...ah... who knows...I've built it now.
Yes. Make a pull request, or report an issue on github. I'm also on twitter @aidanbreen if you want to discuss features, bugs or just give out.