{"id":15987284,"url":"https://github.com/shen-ui/updated-todolist","last_synced_at":"2025-04-04T22:13:05.259Z","repository":{"id":183968894,"uuid":"362408499","full_name":"shen-ui/Updated-ToDoList","owner":"shen-ui","description":"An updated Todo-List application built off React.js, Node.js, MySQL. Backend is hosted on AmazonAWS (RDS, EC2).","archived":false,"fork":false,"pushed_at":"2021-07-22T02:51:18.000Z","size":4576,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T06:41:46.894Z","etag":null,"topics":["amazon-web-services","nginx","todolist"],"latest_commit_sha":null,"homepage":"https://shen-ui.github.io/Updated-ToDoList/","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/shen-ui.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}},"created_at":"2021-04-28T09:19:03.000Z","updated_at":"2021-07-21T01:51:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"7408ab16-eadf-46f2-b848-187942cac239","html_url":"https://github.com/shen-ui/Updated-ToDoList","commit_stats":null,"previous_names":["shen-ui/updated-todolist"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shen-ui%2FUpdated-ToDoList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shen-ui%2FUpdated-ToDoList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shen-ui%2FUpdated-ToDoList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shen-ui%2FUpdated-ToDoList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shen-ui","download_url":"https://codeload.github.com/shen-ui/Updated-ToDoList/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256116,"owners_count":20909240,"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":["amazon-web-services","nginx","todolist"],"created_at":"2024-10-08T03:22:34.556Z","updated_at":"2025-04-04T22:13:05.227Z","avatar_url":"https://github.com/shen-ui.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intoduction\nThis is an updated version of a previous react todo list application with a node.js backend.\nmySQL was used to develope the database.\nDatabase is hosted with AmazonAWS.\nFinished on 6/18/2021.\n\n## Tasks for the future\nImpove css for mobile.\n(I'm never really satisfied with this part.)\nInclude pictures into process to be more concise.\n\n## Bugs\nNo Bugs!!!\n\n## Process (With all my mistakes)\nTo start, I first want to celebrate I finally finished this project!!\nI'm incredibly satisfied with myself for this project. I know it's not a huge project, but I learned\nso much during this project (especially in the back-end). I was first intimidated by the prospect of\nhaving to use so many new things like AmazonRDS, EC2, ELB, NGINX, buying my own domain \nbut I was able to learn, adapt and write my own backend. I feel so much more \ncapable with my skills as a full-stack developer!\n\n### Episode 1: \"Oh this will be an easy project!\"\n#### Objective: Make a client/server side todo List as a project.\nNOTE: I'm ommitting all problems with Security Groups because they're miniscule problems in hindsight.\n1. First develope the client side with react.js (with a temperary back-end via a json file).\n2. Develope, connect and test a server locally hosted with node.js.\n3. Import data into a Local MySQL database with MySQL Workbench and connect all endpoints so the client and server could communicate with the DB.\n4. Push and deploy code to github and set up gh-pages.\n\n### Episode 2: \"Well.. I want this to work with github pages... I'm sure it won't be hard.\"\n#### Objective: Create a VPC with AmazonAWS for persistance on the client side.\n1. Deployed the front end to github pages\n2. Looked at options for me to host the DB (i.g. Heroku, AmazonAWS).\n3. Decided on AmazonRDS and EC2. Created a RDS instance, control via MySQL Workbench, import data.json and RDS was established.\n4. Created EC2 Instance (and get completely confused by Security groups and... what? How do I SSH into this? What is EC2 EVEN FOR???)\n5. Spend an entire day figuring out how EC2 relates to RDS. Realize this is where I should be putting my node.js code in my EC2 instance much like how I had client with React and server with Node. **Ignore my tangent, log into your EC2 with bash. Commands below:**\n\n`chmod 400 ~/.ssh/your-key-name.pem`\u003cbr /\u003e\ngives reading ownership of the key to the user\u003cbr /\u003e\n`$ ssh -i ~/directory-to-sshkey/whatever-your-key-name-is.pem user@ec2-xx-xxx-xx-xx.eu-west-1.compute.amazonaws.com` \u003cbr /\u003e\nSSH into EC2 via a key.pem.\u003cbr /\u003e\n`$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh` \u003cbr /\u003e\ninstalls NVM to EC2.\u003cbr /\u003e\n`$ source ~/.bashrc` \u003cbr /\u003e\nif you don't want to log in and out after nvm is installed, this changes directory to the VPC.\u003cbr /\u003e\n`$ nvm install 13` \u003cbr /\u003e\nNow that NVM is installed, you can download node v13.\u003cbr /\u003e\n`$ mkdir server` \u003cbr /\u003e\ncreate a new directory called server.\u003cbr /\u003e\n`$ npm init`\u003cbr /\u003e\ncreates a package.json which will track your dependencies.\u003cbr /\u003e\n\n`$ npm -i \"package-name\"` \u003cbr /\u003e\nInstalls all your packages. I referenced my package.json from my local copy.\u003cbr /\u003e\nThis project used cors, dontenv, express, mysql, nodemon\u003cbr /\u003e\n`$ nano index.js`\u003cbr /\u003e\ncreates the index.js file. I pulled the data from github, but if it's not already pushed on git, you can use nano to quickly copy and paste the code from a local copy.\u003cbr /\u003e\n`$ node index.js` \u003cbr /\u003e\nstarts the server! it should be working now on whatever port you set up in your code.\u003cbr /\u003e\n\n6. go to your EC2 instance and type the address with your listener into your address bar. `(i.g. 12.2.3.4.6:4330)`\u003cbr /\u003e\n7. Set up ELB for EC2 (public IPv4 for the EC2 instance changes every reboot. It's convinent to set up ELB for that reason.)\u003cbr /\u003e\n8. set up all endpoints with the front end and have everything work on your locally hosted front end but then have everything fall apart when you try to connect the EC2 to gh-pages because not only did you not have a reverse-proxy manager, you also don't have certificates for HTTPS OR a domain... How do I even set that up? Why do I even need them?\n\n### Episode 3: \" Okay... Well this is the final mile... I'll get this done Tommorrow.\"\n#### Objective: Configure EC2 to route traffic over HTTPS\n1. Search for ALL your problems on stackoverflow. I can't get a certificate for EC2? I NEED to buy a domain? Okay... let me just google that.\n2. Configure domain's DNS ANAME to Public IPv4 address of EC2 Instance. (Wait 24 hours. It takes a while for domain to configure this).\n3. Here's the fun part! Lets install nginx, pm2 and get all the certificates!\n\n#### Notes on why you should NOT follow NGINX documentation:\n On nginx's documentation, they recommend you put configurations into `/etc/nginx/conf.d`.\n All configurations in conf.d are global so it does make sense to put some configurations there, but otherwise,\n it's much more convienent to put all vhost configurations into `/etc/nginx/sites-available/` regardless if they are disabled or not.\n **The abstraction of sites-* is better organized and has better modulation.** You can enable, disable and store different vhost with this directory, \n so I recommend you don't follow documentation for this reason.\n Once you set up your configuration, you need set a symbolic link to `/etc/nginx/sites-enabled/` from `/etc/nginx/sites-available.`\n \n`$ apt-get update` \u003cbr /\u003e\nalways a good idea to keep your packages updated.\u003cbr /\u003e\n`$ sudo apt-get install certbot`\u003cbr /\u003e\ninstall certbot (Makes certificate management easier).\u003cbr /\u003e\n`$ apt-get install python3-certbot-nginx`\u003cbr /\u003e\ninstall certbot package for nginx\u003cbr /\u003e\n\n`$ sudo rm /etc/nginx/sites-enabled/default` \u003cbr /\u003e\nremove the default configurator for nginx.\u003cbr /\u003e\n`$ sudo nano /etc/nginx/sites-available/name_of_your_config_file` \u003cbr /\u003e\ncreate your configuration. I put an example one, but certbot will automatically configure this for you. I do recommend you double-check with:\u003cbr /\u003e\n\n\n```\nserver {\n    listen 80 default_server;\n    listen [::]:80 default_server;\n    root /var/www/html;\n    server_name example.com www.example.com;\n}\n```\n`sudo certbot --nginx -d yoursite.com -d www.yoursite.com`\u003cbr /\u003e\ngenerate certificates with Nginx plug-in.\u003cbr /\u003e\nNote: Let's Encrypt certificates expire after 90 days.\u003cbr /\u003e\n\n4. respond to the prompts from certbot.\u003cbr /\u003e\n5. Check on your configuration to make sure certbot has changed your configuration.\u003cbr /\u003e\n`$ cat /etc/nginx/sites-available/name_of_your_config_file`\u003cbr /\u003e\nif certbot doesn't configure it correctly, here's an example of how it should have generated:\u003cbr /\u003e\n```\nserver {\n    listen 80 default_server;\n    listen [::]:80 default_server;\n    root /var/www/html;\n    server_name  example.com www.example.com;\n\n    listen 443 ssl; # managed by Certbot\n\n    # RSA certificate\n    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot\n    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot\n\n    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot\n\n    # Redirect non-https traffic to https\n    if ($scheme != \"https\") {\n        return 301 https://$host$request_uri;\n    } # managed by Certbot\n}\n```\nAnd your done! I recommend testing on your domain to see if your API is running on HTTPS.\nIf something is missconfigured, I recommend you check out the nginx documentation.\nhttps://www.nginx.com/blog/using-free-ssltls-certificates-from-lets-encrypt-with-nginx/#auto-renewal\n\n6. Set up PM2. PM2 will keep the node backend running even when you exit your EC2 instance.\u003cbr /\u003e\n`npm install pm2`\u003cbr /\u003e\ninstalls pm2\u003cbr /\u003e\n`pm2 start index.js`\u003cbr /\u003e\nrun and maintains your node program.\u003cbr /\u003e\n\n7. Spend some time connecting your client, server so they connect to your domain.\n\n8. dOnE!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshen-ui%2Fupdated-todolist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshen-ui%2Fupdated-todolist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshen-ui%2Fupdated-todolist/lists"}