Click Here to view it online.
Deployed using Render - free tier.
- Clone it.
- Make local module and name it api-id.js, then export Mailchimp api key, audience id and server the module.
- Run command
npm i
within directory. It will install all npm packages used in the project. Used packages can be checked in package.json file. - Open brower and open visit port 3000 or Alternatively Click here.
Created using Name: file-tree-generator -VS code Extension
Structure in v1 | Structure in v2 |
---|---|
📦NewsLetterProject ┣ 📂public ┃ ┣ css ┃ ┃ ┗ style.css ┃ ┗📂images ┃ ┃ ┗bmcLogo.png ┣ .gitignore ┣ app-id.js ┣ app.js ┣ failure.html ┣ package-lock.json ┣ package.json ┣ readme.md ┣ signup.html ┗ success.html |
📦NewsLetterProject ┣ 📂public ┃ ┣ css ┃ ┃ ┗ style.css ┃ ┗ 📂images ┃ ┃ ┗ profile.png ┣ 📂views ┃ ┣ 📂partials ┃ ┃ ┣ footer.ejs ┃ ┃ ┗ header.ejs ┃ ┣ failure.ejs ┃ ┣ signup.ejs ┃ ┗ success.ejs ┣ .gitignore ┣ api-id.js ┣ app.js ┣ package-lock.json ┣ package.json ┗ readme.md |
- Hide the Mailchimp api-key, audience id and server id using external local module.
- ejs is used for templating purpose.
- Errors while trying to subscribe with subscribed email is handled and updated page is shown.
- Included node_modules dir in gitignore and removed previous version node_modules from remote git repo.
- Full functional web app is deployed using render.
- Subscribed email is reflected in audience list of my Mailchimp account.
- Node
- Express Js
- BodyParser: Node Package
- ejs
- md5
- bodyParser
In v1, I have directly put api key and audience in app.js file. In v2, I have fixed this using external module and include that external module in gitignore file. Same file is then created by using echo command in build message of render/heruko server.
YouTube tutorial by Dave Gray has helped me on this.
Templating with ejs.
- Update and Sucess page are same page.
I have created this project with the help of udemy course by Dr. Agela Yu - The Complete 2023 Web Development Bootcamp