Project demo - https://demo.olbworld.org
This project is a basic, secure, production-ready website. It has:
- A Landing page with modern UI and sample sections
- Nav with mobile-friendly menus
- Email registration and login
- Admin page with create, read, update & delete operations
- Security best practices throughout.
The code is clear and fully commented so you can easily customize it for your own purposes.
You can also use the project as a base for your own code demo that requires Nuxt, Node.js and/or Express.
- 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)
Clone Project and Install Dependencies
git clone https://github.com/adamlove01/nuxt-ssr-secure-website.git
cd nuxt-ssr-secure-website
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, 'pg' is already installed. If you are using another database, for example MariaDB or MySQL, use can uninstall 'pg' and install 'mysql' connector instead:
cd nuxt-ssr-secure-website
npm install mysql
The .env file defines your environment variables for the project.
cd nuxt-ssr-secure-website
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 nuxt-ssr-secure-website
npx knex migrate:latest --knexfile knexfile.cjs
If you installed Knex globally (npm install knex -g)
knex migrate:latest --knexfile knexfile.cjs
Seeds
The seed files are in the /databse/seeds folder. They add data to your tables.
cd nuxt-ssr-secure-website
npx knex seed:run --knexfile knexfile.cjs
If you installed Knex globally (npm install knex -g)
knex seed:run --knexfile knexfile.cjs
cd nuxt-ssr-secure-website
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.
Create an .env file
cd [project root]
touch .env
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]
[npx?] knex migrate:latest --knexfile knexfile.cjs
[npx?] 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-memory 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.
- Login: Add forgot password / Reset password logic
- Footer Section with 'Privacy' and 'Terms of Service' pages
- More Section components
- Winston and Morgan logging
- Server-side pagination and filtering
- Contact Us page
- Newsletter signup widget
- Youtube videos for the project: Code walkthrough
- Docs: NGINX configuration
- Docs: Explanation of variables in nuxt.config.js