Auto deploy your build folder to the server in ReactJS

In my last tutorial I showed you how to Use npm-watch to auto build your ReactJS app, after this tutorial I was curious to know if I can actually auto deploy my build folder to my server because each time I get changes from the client I had to manually upload all the files again and again to my server. So for me ftp-deploy came into the rescue. So let’s get started.

Requirements

• ftp-deploy

1. Create or Go to your ReactJS app folder.
2. Install ftp-deploy

npm install --save-dev ftp-deploy

3. Create a ftp.js file inside your app root folder and insert this.

var Deploy = require('ftp-deploy');
var ftpDeploy = new Deploy();
 
var config = {
    host : "yourftphost",
    user : "yourftpusername",
    password : "yourpassword",
    port: 21,
    localRoot: __dirname + '/build',
    remoteRoot: '/',
    include: ['*'],
    deleteRemote: true 
}
ftpDeploy.deploy(config, function(err, res) {
    if (err) console.log(err)
    else console.log('finished:', res);
});
ftpDeploy.on("uploading", function(data) {
    data.totalFilesCount; 
    data.transferredFileCount;
    data.filename; 
});
ftpDeploy.on("uploaded", function(data) {
    console.log(data); 
});
ftpDeploy.on("log", function(data) {
    console.log(data);
});
ftpDeploy.on("upload-error", function(data) {
    console.log(data.err);
});

4. Now open your package.json file and insert this inside your scripts object.

"postbuild": "node ftp.js"

5. That’s it, now whenever you’ll create your build npm run build your files will get auto deploy in your server.

Note: You can use my previous tutorial of auto-build and this tutorial to automate your ReactJS app.

ftp.js file explanation

1. First line to create a var Deploy and call ftp-deploy node module.

2. Second line to create a var ftpDeploy and assign it to the module.

3. Then a config javascript object was created to define all your deployment configuration.

• host: Your ftp hostname here.
• user: Your ftp username here.
• password: Your ftp password here.
• port: 21 (default)
• localRoot: __dirname(for your root React folder) + “Your react build folder location”
• remoteRoot: ‘/’ for the root folder of your server you can also put your subdirectory name after / e.g ‘/yoursubdirectory’.
• include: * for all the files in the build folder.
• deleteRemote: true delete ALL existing files at destination before uploading.

4. Next creating deploy method and assigning your configuration to deploy your files on the server.

Here is the GIT repository for that