From 5431d566a2022d37e9932b47a3f2d90555d3bd1d Mon Sep 17 00:00:00 2001 From: Phil Zona Date: Wed, 24 Jan 2018 08:42:24 -0600 Subject: [PATCH 1/5] Finish tech edit --- .../deploy-a-react-app-on-linode.md | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 docs/development/deploy-a-react-app-on-linode.md diff --git a/docs/development/deploy-a-react-app-on-linode.md b/docs/development/deploy-a-react-app-on-linode.md new file mode 100644 index 00000000000..1741e40ef49 --- /dev/null +++ b/docs/development/deploy-a-react-app-on-linode.md @@ -0,0 +1,138 @@ +--- +author: + name: Phil Zona + email: phil.b.zona@gmail.com +description: 'Learn to deploy a locally developed React application to your Linode using Rsync.' +keywords: ['react','reactjs','deploy','rsync'] +license: '[CC BY-ND 4.0](https://creativecommons.org/licenses/by-nd/4.0)' +published: 2018-01-31 +modified: 2018-01-31 +modified_by: + name: Linode +title: "Deploy a React App on Linode" +contributor: + name: Phil Zona + link: https://twitter.com/philzona +external_resources: +- '[React - A JavaScript library for building user interfaces](https://reactjs.org/)' +- '[Deploy a React App with Sass Using NGINX](http://zabana.me/notes/build-deploy-react-app-with-nginx.html)' +--- + +## What is React? + +[React](https://reactjs.org/) is a popular JavaScript library for building user interfaces. While React is often used as a frontend for more complex applications, it's also powerful enough to be used for full client-side applications on its own. + +Since a basic React app is essentially static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide will show how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. + +## Before You Begin + +1. Familiarize yourself with our [Getting Started](/docs/getting-started) guide and complete the steps for setting your Linode's hostname and timezone. + +2. This guide will use `sudo` wherever possible. Complete the sections of our [Securing Your Server](/docs/security/securing-your-server) to create a standard user account, harden SSH access and remove unnecessary network services. + +3. You will need to have a web server, such as [NGINX](https://linode.com/docs/web-servers/nginx/how-to-configure-nginx/) or [Apache](https://linode.com/docs/web-servers/apache/apache-web-server-on-ubuntu-14-04/) installed and configured to host a website on your Linode. + +4. This guide assumes you already have a React app you'd like to deploy. If you don't have one, you can bootstrap a project quickly using [create-react-app](https://github.com/facebookincubator/create-react-app). + +5. Make sure [Git](https://linode.com/docs/development/version-control/how-to-configure-git/) is installed on your system: + + sudo apt install git + +5. Update your system: + + sudo apt update && sudo apt-get upgrade + +## Configure Linode for Deployment + +The steps in this section should be performed on your Linode. + +### Create Host Directory + +1. Navigate to your *web root*, or the location from which you'll be serving your React app, and create a directory where your app will live. Most of the time, this will be `/var/www`, but you can adjust the path and the directory name for your needs: + + sudo mkdir -p /var/www/mydomain.com + +2. Set permissions for the new directory to allow your regular user account to write to it: + + sudo chmod 755 -R /var/www/mydomain.com + +### Configure Web Server + +1. Ensure your web server is configured to serve from the "work tree" file path we configured in the previous step. + + If you're using Apache, this will be the `DocumentRoot` in your virtual host file: + + {{< file "/etc/nginx/sites-available/mydomain.com.conf" aconf>}} + + ServerAdmin webmaster@mydomain.com + ServerName mydomain.com + ServerAlias www.mydomain.com + DocumentRoot /var/www/mydomain.com/ ## Modify this line as well as others referencing the path to your app + ErrorLog /var/www/mydomain.com/logs/error.log + CustomLog /var/www/mydomain.com/logs/access.log combined + +{{< /file >}} + + If you're using NGINX, this will be found in the line starting with `root` in the server block for your site: + + {{< file-excerpt "/etc/nginx/conf.d/myapp.conf" nginx >}} +server { + listen 80; + listen [::]:80; + + root /var/www/mydomain.com; ## Modify this line + index index.html index.htm; + +} +{{< /file-excerpt >}} + +2. Restart your web server to apply the changes. Use whichever command applies to your web server: + + sudo systemctl restart apache2 + sudo systemctl restart nginx + +## Configure Local Computer + +1. Navigate to the directory where your local project lives. For example: + + cd ~/myapp + + If you don't have an existing project to use, you can create one at this stage using [create-react-app](https://github.com/facebookincubator/create-react-app). + +2. Using a text editor, create a deployment bash script called `deploy` in your app's root directory. Replace `exampleuser` with the username of your limited user account, and `mydomain.com` with your Linode's FQDN or public IP address. + + {{< file "~/myapp/deploy" bash >}} +#!/bin/sh + +echo "Switching to branch master" +git checkout master + +echo "Building app" +npm run build + +echo "Deploying files to server" +rsync -avP build/ exampleuser@mydomain.com:/var/www/mydomain.com/ +echo "Deployment complete" +{{< /file >}} + + This script will check out the master branch of your project on Git, build the app using `npm run build`, and then sync the build files to the remote Linode using Rsync. If your React app was not built with `create-react-app`, the build command may be different and the built files may be stored in a different directory (such as `dist`). Modify the script accordingly. + +3. Make the script executable: + + sudo chmod u+x deploy + +4. Run the script: + + ./deploy + + Enter your Unix password when prompted. + +5. In a browser, navigate to your Linode's domain name or public IP address. If the deploy was successful, you should see your React app displayed. + +6. Make a few changes to your app's `src` directory and then re-run the `deploy` script. Your changes should be visible in the browser after refreshing the page. + +## Next Steps + +Deployment can be a complex topic and there are a number of factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn't necessarily suitable (on its own) for a large scale production application. + +More advanced build tools such as [Travis](https://travis-ci.org/), [Jenkins](https://jenkins.io), and [Wercker](http://www.wercker.com/) can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deploy and deploying to multiple servers (such as test and production boxes). See our guides on [Jenkins](/docs/development/ci/automate-builds-with-jenkins-on-ubuntu/) and [Wercker](/docs/development/ci/how-to-develop-and-deploy-your-applications-using-wercker/) to get started. From 4bb74037147abcf24acf83ec825e30f57a2a3a74 Mon Sep 17 00:00:00 2001 From: Jared Kobos Date: Wed, 31 Jan 2018 17:09:34 -0500 Subject: [PATCH 2/5] Complete tech edit --- docs/development/javascript/_index.md | 12 ++++++++++++ .../deploy-a-react-app-on-linode.md | 13 +++++++------ 2 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 docs/development/javascript/_index.md rename docs/development/{ => javascript}/deploy-a-react-app-on-linode.md (76%) diff --git a/docs/development/javascript/_index.md b/docs/development/javascript/_index.md new file mode 100644 index 00000000000..63695a13bd5 --- /dev/null +++ b/docs/development/javascript/_index.md @@ -0,0 +1,12 @@ +--- +author: + name: Linode + email: docs@linode.com +description: '' +keywords: ["development", "javascript", "front end", "react"] +license: '[CC BY-ND 4.0](https://creativecommons.org/licenses/by-nd/4.0)' +aliases: [] +published: 2018-01-31 +title: Javascript +show_in_lists: true +--- diff --git a/docs/development/deploy-a-react-app-on-linode.md b/docs/development/javascript/deploy-a-react-app-on-linode.md similarity index 76% rename from docs/development/deploy-a-react-app-on-linode.md rename to docs/development/javascript/deploy-a-react-app-on-linode.md index 1741e40ef49..77af63a98cf 100644 --- a/docs/development/deploy-a-react-app-on-linode.md +++ b/docs/development/javascript/deploy-a-react-app-on-linode.md @@ -3,6 +3,7 @@ author: name: Phil Zona email: phil.b.zona@gmail.com description: 'Learn to deploy a locally developed React application to your Linode using Rsync.' +og_description: 'Use Rsync to deploy a React application from your local computer to a Linode.' keywords: ['react','reactjs','deploy','rsync'] license: '[CC BY-ND 4.0](https://creativecommons.org/licenses/by-nd/4.0)' published: 2018-01-31 @@ -22,7 +23,7 @@ external_resources: [React](https://reactjs.org/) is a popular JavaScript library for building user interfaces. While React is often used as a frontend for more complex applications, it's also powerful enough to be used for full client-side applications on its own. -Since a basic React app is essentially static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide will show how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. +Since a basic React app is static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide will show how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. ## Before You Begin @@ -58,7 +59,7 @@ The steps in this section should be performed on your Linode. ### Configure Web Server -1. Ensure your web server is configured to serve from the "work tree" file path we configured in the previous step. +1. Ensure your web server is configured to serve from the "work tree" file path configured in the previous step. If you're using Apache, this will be the `DocumentRoot` in your virtual host file: @@ -99,7 +100,7 @@ server { If you don't have an existing project to use, you can create one at this stage using [create-react-app](https://github.com/facebookincubator/create-react-app). -2. Using a text editor, create a deployment bash script called `deploy` in your app's root directory. Replace `exampleuser` with the username of your limited user account, and `mydomain.com` with your Linode's FQDN or public IP address. +2. Using a text editor, create a deployment script called `deploy` in your app's root directory. Replace `exampleuser` with the username of your limited user account, and `mydomain.com` with your Linode's FQDN or public IP address. {{< file "~/myapp/deploy" bash >}} #!/bin/sh @@ -129,10 +130,10 @@ echo "Deployment complete" 5. In a browser, navigate to your Linode's domain name or public IP address. If the deploy was successful, you should see your React app displayed. -6. Make a few changes to your app's `src` directory and then re-run the `deploy` script. Your changes should be visible in the browser after refreshing the page. +6. Make a few changes to your app's `src` directory and then re-run the `deploy` script. Your changes should be visible in the browser after reloading the page. ## Next Steps -Deployment can be a complex topic and there are a number of factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn't necessarily suitable (on its own) for a large scale production application. +Deployment can be a complex topic and there are many factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn't necessarily suitable (on its own) for a large scale production application. -More advanced build tools such as [Travis](https://travis-ci.org/), [Jenkins](https://jenkins.io), and [Wercker](http://www.wercker.com/) can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deploy and deploying to multiple servers (such as test and production boxes). See our guides on [Jenkins](/docs/development/ci/automate-builds-with-jenkins-on-ubuntu/) and [Wercker](/docs/development/ci/how-to-develop-and-deploy-your-applications-using-wercker/) to get started. +More advanced build and continuous integration tools such as [Travis](https://travis-ci.org/), [Jenkins](https://jenkins.io), and [Wercker](http://www.wercker.com/) can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deploy and deploying to multiple servers (such as test and production boxes). See our guides on [Jenkins](/docs/development/ci/automate-builds-with-jenkins-on-ubuntu/) and [Wercker](/docs/development/ci/how-to-develop-and-deploy-your-applications-using-wercker/) to get started. From 0547a0ef23ceb3eb328531956dcfacd73bbbfc18 Mon Sep 17 00:00:00 2001 From: Edward Date: Mon, 12 Feb 2018 10:49:01 -0500 Subject: [PATCH 3/5] copy edits to deploy react --- .../deploy-a-react-app-on-linode.md | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/docs/development/javascript/deploy-a-react-app-on-linode.md b/docs/development/javascript/deploy-a-react-app-on-linode.md index 77af63a98cf..e0a3d8af863 100644 --- a/docs/development/javascript/deploy-a-react-app-on-linode.md +++ b/docs/development/javascript/deploy-a-react-app-on-linode.md @@ -23,7 +23,7 @@ external_resources: [React](https://reactjs.org/) is a popular JavaScript library for building user interfaces. While React is often used as a frontend for more complex applications, it's also powerful enough to be used for full client-side applications on its own. -Since a basic React app is static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide will show how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. +Since a basic React app is static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide shows how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. ## Before You Begin @@ -31,25 +31,25 @@ Since a basic React app is static (it consists of compiled HTML, CSS, and Javasc 2. This guide will use `sudo` wherever possible. Complete the sections of our [Securing Your Server](/docs/security/securing-your-server) to create a standard user account, harden SSH access and remove unnecessary network services. -3. You will need to have a web server, such as [NGINX](https://linode.com/docs/web-servers/nginx/how-to-configure-nginx/) or [Apache](https://linode.com/docs/web-servers/apache/apache-web-server-on-ubuntu-14-04/) installed and configured to host a website on your Linode. +3. You will need a [web server](/docs/web-servers/) configured to host a website on your Linode. 4. This guide assumes you already have a React app you'd like to deploy. If you don't have one, you can bootstrap a project quickly using [create-react-app](https://github.com/facebookincubator/create-react-app). -5. Make sure [Git](https://linode.com/docs/development/version-control/how-to-configure-git/) is installed on your system: +5. Make sure [Git](/docs/development/version-control/how-to-configure-git/) is installed on your system: sudo apt install git -5. Update your system: +6. Update your system: sudo apt update && sudo apt-get upgrade -## Configure Linode for Deployment +## Configure your Linode for Deployment The steps in this section should be performed on your Linode. ### Create Host Directory -1. Navigate to your *web root*, or the location from which you'll be serving your React app, and create a directory where your app will live. Most of the time, this will be `/var/www`, but you can adjust the path and the directory name for your needs: +1. Navigate to your *web root*, or the location from which you'll serve your React app, and create a directory where your app will live. Most of the time, this will be `/var/www`, but you can adjust the path and the directory name for your needs: sudo mkdir -p /var/www/mydomain.com @@ -59,11 +59,13 @@ The steps in this section should be performed on your Linode. ### Configure Web Server -1. Ensure your web server is configured to serve from the "work tree" file path configured in the previous step. +1. Ensure your web server is configured to serve from the file path created in the previous step. - If you're using Apache, this will be the `DocumentRoot` in your virtual host file: + **Apache** - {{< file "/etc/nginx/sites-available/mydomain.com.conf" aconf>}} + Modify the `DocumentRoot` in your virtual host file: + + {{< file "/etc/nginx/sites-available/mydomain.com.conf" aconf >}} ServerAdmin webmaster@mydomain.com ServerName mydomain.com @@ -74,7 +76,9 @@ The steps in this section should be performed on your Linode. {{< /file >}} - If you're using NGINX, this will be found in the line starting with `root` in the server block for your site: + **NGINX** + + Modify the line starting with `root` in the server block for your site: {{< file-excerpt "/etc/nginx/conf.d/myapp.conf" nginx >}} server { @@ -87,7 +91,7 @@ server { } {{< /file-excerpt >}} -2. Restart your web server to apply the changes. Use whichever command applies to your web server: +2. Restart the web server to apply the changes. Use whichever command applies to your web server: sudo systemctl restart apache2 sudo systemctl restart nginx @@ -98,7 +102,7 @@ server { cd ~/myapp - If you don't have an existing project to use, you can create one at this stage using [create-react-app](https://github.com/facebookincubator/create-react-app). + If you don't have an existing project to use, you can create one using [create-react-app](https://github.com/facebookincubator/create-react-app). 2. Using a text editor, create a deployment script called `deploy` in your app's root directory. Replace `exampleuser` with the username of your limited user account, and `mydomain.com` with your Linode's FQDN or public IP address. @@ -134,6 +138,6 @@ echo "Deployment complete" ## Next Steps -Deployment can be a complex topic and there are many factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn't necessarily suitable (on its own) for a large scale production application. +Deployment can be a complex topic and there are many factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn't necessarily suitable on its own for a large scale production application. -More advanced build and continuous integration tools such as [Travis](https://travis-ci.org/), [Jenkins](https://jenkins.io), and [Wercker](http://www.wercker.com/) can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deploy and deploying to multiple servers (such as test and production boxes). See our guides on [Jenkins](/docs/development/ci/automate-builds-with-jenkins-on-ubuntu/) and [Wercker](/docs/development/ci/how-to-develop-and-deploy-your-applications-using-wercker/) to get started. +More advanced build and continuous integration tools such as [Travis](https://travis-ci.org/), [Jenkins](https://jenkins.io), and [Wercker](http://www.wercker.com/) can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deployment and deploying to multiple servers (such as test and production boxes). See our guides on [Jenkins](/docs/development/ci/automate-builds-with-jenkins-on-ubuntu/) and [Wercker](/docs/development/ci/how-to-develop-and-deploy-your-applications-using-wercker/) to get started. From 0243b57307e45b1e2e16a4a3820497c9b09b7f66 Mon Sep 17 00:00:00 2001 From: Edward Date: Tue, 13 Feb 2018 16:47:42 -0500 Subject: [PATCH 4/5] Javascript to JavaScript --- docs/development/javascript/deploy-a-react-app-on-linode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development/javascript/deploy-a-react-app-on-linode.md b/docs/development/javascript/deploy-a-react-app-on-linode.md index e0a3d8af863..0b6b4eb7bfa 100644 --- a/docs/development/javascript/deploy-a-react-app-on-linode.md +++ b/docs/development/javascript/deploy-a-react-app-on-linode.md @@ -23,7 +23,7 @@ external_resources: [React](https://reactjs.org/) is a popular JavaScript library for building user interfaces. While React is often used as a frontend for more complex applications, it's also powerful enough to be used for full client-side applications on its own. -Since a basic React app is static (it consists of compiled HTML, CSS, and Javascript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide shows how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. +Since a basic React app is static (it consists of compiled HTML, CSS, and JavaScript files), it is easy to deploy from a local computer to a Linode using [Rsync](https://rsync.samba.org/). This guide shows how to set up your Linode and local machine so that you can easily deploy your app whenever changes are made. ## Before You Begin From 443b5e642fd02b1eccbd62bd2fd7acf0c86753ab Mon Sep 17 00:00:00 2001 From: Edward Date: Thu, 15 Feb 2018 14:29:07 -0500 Subject: [PATCH 5/5] description update --- docs/development/javascript/_index.md | 3 +-- docs/development/javascript/deploy-a-react-app-on-linode.md | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/development/javascript/_index.md b/docs/development/javascript/_index.md index 63695a13bd5..0a5438885ae 100644 --- a/docs/development/javascript/_index.md +++ b/docs/development/javascript/_index.md @@ -2,10 +2,9 @@ author: name: Linode email: docs@linode.com -description: '' +description: 'React is a popular JavaScript library for building user interfaces.' keywords: ["development", "javascript", "front end", "react"] license: '[CC BY-ND 4.0](https://creativecommons.org/licenses/by-nd/4.0)' -aliases: [] published: 2018-01-31 title: Javascript show_in_lists: true diff --git a/docs/development/javascript/deploy-a-react-app-on-linode.md b/docs/development/javascript/deploy-a-react-app-on-linode.md index 0b6b4eb7bfa..6564ac19379 100644 --- a/docs/development/javascript/deploy-a-react-app-on-linode.md +++ b/docs/development/javascript/deploy-a-react-app-on-linode.md @@ -10,7 +10,7 @@ published: 2018-01-31 modified: 2018-01-31 modified_by: name: Linode -title: "Deploy a React App on Linode" +title: "Deploy a React Application on Linode" contributor: name: Phil Zona link: https://twitter.com/philzona