This project allows ClickFunnels users to receive purchase data from the ClickFunnels Webhooks API, store the data on your own server, and push the user's name and email to Sendy, an email list management app.
This means you don't need to use paid automation apps such as Zapier or email list management apps such as MailChimp or ActiveCampaign. You also have full control over your company's data: All purchases and all email contacts are on your server.
You do however need to pay a one-time fee for Sendy, and your server has a monthly fee. Sendy needs to be installed on the same server as this app, and both are intended to run behind NGINX. A sample NGINX config is provided in this project.
This project is not just a code example or demo -- it's a complete website. Once set up, you can log in as an admin, view or change purchase data, add or update products and create new users. The website uses nuxt-SSR-secure-website as a base.
- Nuxt.js - A framework for creating Vue.js applications.
- Express - The Node.js server framework you know and love.
- Vuetify - The Material Design CSS framework for fantastic UI/UX.
- Knex.js - SQL query builder for Postgres, MariaDB & more.
- Joi Validation - A Data validation library for Javascript.
- Node ES Modules - Share code between the Vue client and the Express server.
- Helmet.js - Adds security-related HTTP response headers to prevent attacks like ClickJacking, sniffing attacks and more.
- Content Security Policy (CSP) - An added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection.
- Sanitized & Validated input - All input on both the client and server is sanitized & validated using the powerful Joi validation and sanitize-html libraries.
- Login Captcha - SVG Captcha prevents bots from spamming your login page. The captcha randomly shows text or a math problem to keep bots guessing.
- User Access List - Controls access to all pages and routes based on user type. You can change access rules for any page or server route from a single file.
- Secure JSON WebTokens - Uses JWT to verify login. The accessToken stored in memory (Vuex) and the refreshToken is HttpOnly with 'expires' and 'sameSite' flags.
- Node > v14.15.1
- Local database (Postgres, MSSQL, MySQL, MariaDB, Oracle, or Amazon Redshift)
- A ClickFunnels account and a working sales funnel.
- Sendy installed on the same server behind NGINX.
Clone Project and Install Dependencies
git clone https://github.com/adamlove01/clickfunnels-webhooks-sendy-api.git
cd clickfunnels-webhooks-sendy-api
npm install
This project was built using Vscode with Vetur, Eslint and Prettier. If you wish to use a similar setup, you can follow this guide:
Vscode Setup - Vetur, Eslint, Prettier
You will need a database that is supported by Knex.JS: Postgres, MSSQL, MySQL, MariaDB, Oracle, or Amazon Redshift.
Install a database server on your local machine
Example for postgres on MacOS using brew:
brew install postgres
brew services start postgresql
Create a database, user and grant user privileges
psql postgres
create database myDatabase;
create user myUser with encrypted password 'myPassword';
grant all privileges on database myDatabase to myUser;
Exit psql
\q
For postgres, you can install 'pg':
cd clickfunnels-webhooks-sendy-api
npm install pg
The .env file defines your environment variables for the project.
cd clickfunnels-webhooks-sendy-api
touch .env
Add your database connection information that you created above. The default DB_PORT will depend on which database you use. DB_CLIENT is the database connector from above.
The TOKEN_AUTH_SECRET should be a secure password. You can go to SHA-256 hash calculator and quickly generate a SHA-256 hash.
Example using postgres:
NODE_ENV=development
BASE_URL=http://localhost:3000
BROWSER_BASE_URL=http://localhost:3000
TOKEN_AUTH_SECRET=6f3dd6e7005ff901ec4330479363218e61e94fae4a86f072e44db4636b8dd7b2
DB_PORT=5432
DB_NAME=myDatabase
DB_HOST=localhost
DB_USER=myUser
DB_PASSWORD=myPassword
DB_CLIENT='pg'
DB_CHARSET='utf8'
...
Migrations
The migration files are in the /database/migrations folder. They create tables in your existing database.
cd clickfunnels-webhooks-sendy-api
knex migrate:latest --knexfile knexfile.cjs
Seeds
The seed files are in the /databse/seeds folder. They add data to your tables.
cd clickfunnels-webhooks-sendy-api
knex seed:run --knexfile knexfile.cjs
cd clickfunnels-webhooks-sendy-api
npm run dev
When you see
✓ Client
✓ Server
go to localhost:3000 in your browser to see the project running.
By default you can log in as an Admin user:
Email: admin@admin.com
Password: beautifulHorseHippoAlgebra===9632
You should create a new admin user and then delete the default one when you go to production!
If you try to register a new user at this point, the verification email will not be sent. To send email from your server you will need to configure Nodemailer and an email delivery provider. You can follow this guide:
Configuring Nodemailer for sending email
Set up a database
First set up a database on the server and start it up.
Upload the project to your server
You can use Git or some other method. A good place for your project is /var/www/myDomain.
Create an .env file
Create a new .env file at the root of your server project. You will use all the same variables as on your local system .env file, but you need to change the database DB_ values to match your server database.
.env
NODE_ENV=production
BASE_URL=http://localhost:3000
BROWSER_BASE_URL=https://myDomain.org
TOKEN_AUTH_SECRET=6f3dd6e7005ff901ec4330479363218e61e94fae4a86f072e44db4636b8dd7b2
DB_PORT=5432
DB_NAME=myDatabase
DB_HOST=localhost
DB_USER=myUser
DB_PASSWORD=myPassword
DB_CLIENT='pg'
DB_CHARSET='utf8'
...
BROWSER_BASE_URL is for Axios calls (configured in nuxt.config.js) and should match your domain url.
BASE_URL should be http://localhost:3000 if you are running your site behind NGINX, otherwise it should also match your domain url.
Run migrations and seeds
cd [project root]
knex migrate:latest --knexfile knexfile.cjs
knex seed:run --knexfile knexfile.cjs
Build the project
cd [project root]
npm install
npm run build
npm run start
Note that npm run start will run the app in your terminal, but when you close the terminal or press 'ctrl-c', the app will stop. When you set up systemd as below, you can run systemctl start mydomain instead, and your app will always be running in the background.
You will want your app to restart automatically if your server is restarted. On most Linux systems, you can configure systemd to auto-start your app. To do that, you can follow this guide:
This file contains your database configuration. All the values are imported from your .env file.
This file contains the configuration for the NuxtJS framework.
The login system in this app uses JSON WebTokens to verify login.
The AccessToken This token is stored in-menory in Vuex and expires in 15 minutes. We are using Vuex for this data because other solutions such as client-side Cookies or localStorage are considered a security risk. They are javascript-accessible and can be hacked.
The refreshToken
Login status (as verified by the 'authorize' middleware) is persisted (after page refresh, opening a new tab, or accessToken expiry) by an HTTPOnly 'refreshToken' cookie, which is set server-side. This cookie has a 7-day expiry and is not accessible via javascript.
If the user has disabled cookies in their browser, they can still remain logged in for 15 minutes (the expiry of the accessToken in the Vuex store) as long as they do not refresh the page or open a new tab. This is a good trade-off, since very few users will have cookies disabled. The accessToken has only 15 minute expiry to make it very difficult for hackers.