{"id":20828344,"url":"https://github.com/codewithmuh/react-aws-ec2-nginx","last_synced_at":"2025-04-10T04:14:45.920Z","repository":{"id":230892706,"uuid":"780386103","full_name":"codewithmuh/react-aws-ec2-nginx","owner":"codewithmuh","description":"Deploy React Application on AWS EC2 Ubuntu Server With Nginx, Domain and SSL Setup","archived":false,"fork":false,"pushed_at":"2024-04-03T23:21:19.000Z","size":345,"stargazers_count":14,"open_issues_count":0,"forks_count":28,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T04:14:40.926Z","etag":null,"topics":["aws","codewithmuh","domain","ec2-instance","nginx","nodejs","react","ssl-certificates","ubuntu-server"],"latest_commit_sha":null,"homepage":"https://youtube.com/@codewithmuh?sub_confirmation=1","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codewithmuh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-01T11:18:35.000Z","updated_at":"2025-03-10T17:38:36.000Z","dependencies_parsed_at":"2024-04-04T00:29:26.983Z","dependency_job_id":"17f8b943-1809-4d01-a4ab-666720dcf279","html_url":"https://github.com/codewithmuh/react-aws-ec2-nginx","commit_stats":null,"previous_names":["codewithmuh/react-aws-ec2-nginx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithmuh%2Freact-aws-ec2-nginx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithmuh%2Freact-aws-ec2-nginx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithmuh%2Freact-aws-ec2-nginx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithmuh%2Freact-aws-ec2-nginx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithmuh","download_url":"https://codeload.github.com/codewithmuh/react-aws-ec2-nginx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154999,"owners_count":21056543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","codewithmuh","domain","ec2-instance","nginx","nodejs","react","ssl-certificates","ubuntu-server"],"created_at":"2024-11-17T23:14:37.270Z","updated_at":"2025-04-10T04:14:45.899Z","avatar_url":"https://github.com/codewithmuh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Setting up a ReactJS Application on AWS EC2\n\nSetting up a web application on an AWS EC2 instance involves several steps, from launching the server to configuring Nginx to serve your application. In this guide, we’ll walk through each step to deploy a ReactJS application on an AWS EC2 Ubuntu server.\n![1i (3)](https://github.com/codewithmuh/react-aws-ec2-nginx/assets/51082957/19ac2fc1-648f-4bed-9835-4bb653c0904a)\n\n## Table of Contents:\n\n1. [Launching an AWS EC2 Ubuntu Server](#launching-an-aws-ec2-ubuntu-server)\n2. [Connecting to the AWS EC2 Instance](#connecting-to-the-aws-ec2-instance)\n3. [Installing Node.js, NPM, and Nginx](#installing-nodejs-npm-and-nginx)\n4. [Cloning the ReactJS App to EC2](#cloning-the-reactjs-app-to-ec2)\n5. [Installing Required Dependencies](#installing-required-dependencies)\n6. [Creating a Production Build](#creating-a-production-build)\n7. [Configuring Nginx](#configuring-nginx)\n8. [Starting the Application](#starting-the-application)\n9. [Domain and SSL setup](#domain-and-ssl-setup)\n10. [Conclusion](#conclusion)\n\n### Complete YouTube Video Tutorial:\n\nhttps://youtu.be/UK_OVKDRArs?si=G620QaGNjJOA0LGR\n\n### Step 1: Launch an AWS EC2 Ubuntu Server\n\n- Log in to the AWS Management Console.\n- Navigate to the EC2 Dashboard.\n- Click on “Launch Instance” and choose an Amazon Machine Image (AMI) with your preferred OS.\n\n### Step 2: Connecting to the EC2 Instance\n\n- Use your preferred SSH terminal to connect to the EC2 instance.\n  - For example, if you’re on a Mac, you can use the Terminal app.\n\n### Step 3: Installing Node.js, NPM, and Nginx\n\n```bash\nsudo apt-get update -y\ncurl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -\nsudo apt install -y nodejs\nsudo apt install npm -y\nsudo apt install nginx -y\n```\n### Step 4: Cloning ReactJS App to EC2\n\n- For Public Repository:\n  ```bash\n  git clone \u003cYOUR-GIT-Repo\u003e\n  ```\n- For Private Repository:\n  ```bash\n  git clone \u003cYOUR-GIT-Repo\u003e\n  ```\n\nit will ask you for your GitHub username and password. You can use a Personal Access Token instead of a password.  \n\n### Step 5: Install all the required dependencies\n  ```bash\n  cd \u003cproject-folder\u003e\n  npm install\n  ```\n### Step 6: Create Production Build\n  ```bash\n  npm run build\n  sudo mkdir /var/www/vhosts/frontend/\n  sudo cp -R build/ /var/www/vhosts/frontend/\n  ```\n### Step 7: Create Nginx File\nwith this command, you can check if already a default nginx file exists. You have to remove it.\n\n\n```bash\ncd /etc/nginx/sites-enabled/\nsudo rm -rf default\n```\n\n- Create a configuration file for Nginx using the following command:\n  ```bash\n  sudo vim /etc/nginx/sites-available/\u003cnginx-file-name\u003e\n  ```\n\n- Paste the provided server configuration inside the file created.\n\n  ```bash\n  server {\n    listen 80 default_server;\n    server_name _;\n\n    location / {\n        autoindex on;\n        root /var/www/vhosts/frontend/build;\n        try_files $uri /index.html;\n      }\n  }\n  ```\n  \n- Activate the configuration using the following command:\n\n  ```bash\n  sudo ln -s /etc/nginx/sites-available/\u003cnginx-file-name\u003e /etc/nginx/sites-enabled/\n  ```\n### Step 8: Start the Application\n- Restart Nginx and allow the changes to take place.\n  ```bash\n  sudo systemctl restart nginx\n  sudo service nginx restart\n  ```\n- Additionally, in case of errors, you can check error logs and status.\n### Step 9: Domain and SSL setup\n**Domain**\n\nFirst, you have to Public IP address or ec2 instance as An R3cord of your domain, it can be on any domain provider like GoDaddy. You can also watch the video.\n\n**SSL Setup**\n\n  ```bash\n  sudo apt-get install certbot python3-certbot-nginx\n  sudo certbot --nginx -d \u003cdomain-name\u003e\n  sudo systemctl reload nginx\n  ```\n### Step 10: Conclusion\nDeploying a ReactJS application on an AWS EC2 instance requires careful configuration and setup. By following these steps, you can successfully launch your application and serve it using Nginx, ensuring a seamless user experience.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithmuh%2Freact-aws-ec2-nginx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithmuh%2Freact-aws-ec2-nginx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithmuh%2Freact-aws-ec2-nginx/lists"}