creativetimofficial / argon-dashboard-nodejs

Argon Dashboard Nodejs

Start your development with a Bootstrap 4 Admin Dashboard built for Node.js framework, the newest go-to technology for top companies. Creative Tim partnered with Udevoffice to provide a fully coded “frontend + backend” solution for you. It features a huge number of components that can help you create amazing websites and brings with itself innumerable advantages: lightweight, fast, scalable and modern way to execute your next top app.

FULLY CODED COMPONENTS

Argon Dashboard Node is built with over frontend 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Dashboard is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. View all components here

COMPLEX DOCUMENTATION

Each element is well presented in a very complex documentation. You can check the components here and the foundation here

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. View example pages here

Installation

1. You need Node.js (at least 10.x version) installed on your machine, if you don't have it, you should install it - download link
2. Clone the project from github or download the archive
3. cd to your downloaded Argon app
4. Install necessary dependencies:
   • Via node npm package manager - Run npm install on the project root
   • Via yarn package manager - Run yarn install on the project root

Configuration for PostgreSQL database and Redis data structure store

Via Docker

1. Install Docker on your machine
2. Run docker-compose up -d in a terminal on the project root. This will start 3 containers:
   • database(PostgreSQL) container;
   • redis container - required for session management;
   • haproxy container - required only for a staging/production setup;

Via another chosen solution.

1. Install your PostgreSQL database
2. Install your Redis server
3. Change connection configuration, from your root cd to env-files folder and change the following configurations with your own:

For PostgreSQL connection:

1. Database connection via URL

DATABASE_URL=http://creativeTim:[email protected]:5432/creativeTim
# Example: DATABASE_URL=http://<user>:<password>@<host>/<database_name>

2. Database connection via credentials

DATABASE_HOST=127.0.0.1
DATABASE_PORT=5432
DATABASE_NAME=creativeTim
DATABASE_USER=creativeTim
DATABASE_PASSWORD=creativeTim

For Redis connection:

1. REDIS connection via URL

REDIS_URL=redis://:@127.0.0.1:6379
# Example: redis://:<password>@<host>:<port>

2. REDIS connection via credentials

REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=

Migrations and seeds

1. For database tables structure, in the project root run: npm run knex migrate:latest or yarn knex migrate:latest if you are using yarn as the default package manager
2. To create a default user, run: npm run knex seed:run or yarn knex seed:run if you are using yarn as the default package manager

Run the application

1. For starting the application, the following script (defined in package.json under scripts) must be called:
   • via npm: npm run start or npm run dev for starting the development environment, which has livereload enabled;
   • via yarn: yarn start or yarn dev for starting the development environment, which has livereload enabled;

Usage

Register a user or login using [email protected]:secret and start testing the preset (make sure to run the migrations and seeds for these credentials to be available).

Besides the dashboard and the auth pages this preset also has an edit profile page. NOTE: Keep in mind that all available features can be viewed once you login using the credentials provided above or by registering your own user.

Features

In order to see the available features cd into features folder, and you will then find a folder for each of the available features, mostly each folder containing:

• A routes.js file that usually contains the GET and POST requests, for example, the profile router looks like this:

const { wrap } = require('async-middleware');

const requestBodyValidation = require('./commands/verify-request-body');
const updateUserInfo = require('./commands/update-user-info');
const { loadPage } = require('./commands/profile');

module.exports = (router, middlewares = []) => {
  router.get('/profile', middlewares.map(middleware => wrap(middleware)), wrap(loadPage));
  router.post('/update-profile-info', wrap(requestBodyValidation), wrap(updateUserInfo));

  return router;
};

• A repository.js file that contains feature database queries
• A commands folder where you can find all feature functionality functions, for example the login template rendering which looks like this:

function loadPage(req, res) {
  debug('login:loadPage', req, res);
  res.render('pages/login');
}

• A constants.js file, to store all your static variables, for eg:

const USERNAME_PASSWORD_COMBINATION_ERROR = 'These credentials do not match our records.';
const INTERNAL_SERVER_ERROR = 'Something went wrong! Please try again.';

All feature routes are mounted in routes/index.js from the project root.

For the Front-end side:

Templates

• You can find all the templates in views folder where you will find:

1. The layout.ejs file, the main template layout.
2. A pages folder with all the page templates
3. A partials folder with the common components (header, footer, sidebar)

Table of Contents

• Versions
• Demo
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Licensing
• Useful Links

Versions

HTML	NODEJS

Demo

Register	Login	Dashboard

Profile Page	Icons Page	Profile Page
View More

Documentation

The documentation for the Argon Dashboard Node is hosted at our website.

File Structure

├── CHANGELOG.md
├── ISSUES_TEMPLATE.md
├── LICENSE.md
├── README.md
├── app.js
├── bin
│   └── www
├── config
│   └── index.js
├── db
│   ├── index.js
│   ├── knexfile.js
│   ├── migrations
│   │   └── 20190213122702_create-users-table.js
│   └── seeds
│       └── create-default-user.js
├── docker-compose.yml
├── docs
│   └── documentation.html
├── ecosystem.config.js
├── env-files
│   ├── development.env
│   └── production.env
├── features
│   ├── login
│   │   ├── commands
│   │   │   ├── load-page.js
│   │   │   ├── login.js
│   │   │   ├── redirect-to-dashboard.js
│   │   │   └── verify-request-body.js
│   │   ├── constants.js
│   │   ├── init-auth-middleware.js
│   │   ├── repository.js
│   │   └── routes.js
│   ├── logout
│   │   ├── commands
│   │   │   └── logout.js
│   │   └── routes.js
│   ├── profile
│   │   ├── commands
│   │   │   ├── load-page.js
│   │   │   ├── update-user-info.js
│   │   │   └── verify-request-body.js
│   │   ├── constants.js
│   │   ├── repository.js
│   │   └── routes.js
│   ├── register
│   │   ├── commands
│   │   │   ├── create-user.js
│   │   │   ├── load-page.js
│   │   │   └── verify-request-body.js
│   │   ├── constants.js
│   │   ├── repository.js
│   │   └── routes.js
│   └── reset-password
│       ├── commands
│       │   └── load-page.js
│       └── routes.js
├── gulpfile.js
├── haproxy.cfg
├── logger.js
├── package.json
├── public
│   ├── css
│   │   ├── argon.css
│   │   └── argon.min.css
│   ├── fonts
│   │   └── nucleo
│   ├── img
│   │   ├── brand
│   │   ├── icons
│   │   └── theme
│   ├── js
│   │   ├── argon.js
│   │   └── argon.min.js
│   ├── scss
│   │   ├── argon.scss
│   │   ├── bootstrap
│   │   ├── core
│   │   └── custom
│   └── vendor
├── routes
│   └── index.js
├── screens
│   ├── Dashboard.png
│   ├── Login.png
│   ├── Profile.png
│   └── Users.png
├── views
│   ├── layout.ejs
│   ├── pages
│   │   ├── 404.ejs
│   │   ├── dashboard.ejs
│   │   ├── icons.ejs
│   │   ├── login.ejs
│   │   ├── maps.ejs
│   │   ├── profile.ejs
│   │   ├── register.ejs
│   │   ├── reset-password.ejs
│   │   └── tables.ejs
│   └── partials
│       ├── auth
│       │   ├── footer.ejs
│       │   ├── header.ejs
│       │   └── navbar.ejs
│       ├── dropdown.ejs
│       ├── footer.ejs
│       ├── header.ejs
│       ├── navbar.ejs
│       └── sidebar.ejs
└

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://argon-dashboard-nodejs.creative-tim.com/?ref=adn-readme
• Download Page: https://www.creative-tim.com/product/argon-dashboard-nodejs?ref=adn-readme
• Documentation: https://argon-dashboard-nodejs.creative-tim.com/docs/getting-started/overview.html?ref=adn-readme
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page
• Dashboards:

HTML	NODEJS

Change log

Please see the changelog for more information on what has changed recently.

Credits

• Creative Tim
• Under Development Office

License

MIT License.

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Kit. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

• Copyright 2019 Creative Tim (https://www.creative-tim.com/?ref=adn-readme)

• Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-nodejs/blob/master/LICENSE.md)

Useful Links

• Tutorials
• Affiliate Program (earn money)
• Blog Creative Tim
• Free Products from Creative Tim
• Premium Products from Creative Tim
• React Products from Creative Tim
• Angular Products from Creative Tim
• VueJS Products from Creative Tim
• More products from Creative Tim
• Check our Bundles here

Social Media

Twitter: https://twitter.com/CreativeTim?ref=adn-readme

Facebook: https://www.facebook.com/CreativeTim?ref=adn-readme

Dribbble: https://dribbble.com/creativetim?ref=adn-readme

Instagram: https://www.instagram.com/CreativeTimOfficial?ref=adn-readme

Credits

• Creative Tim
• Under Development Office

argon-dashboard-nodejs's Issues

Auto-complete

I'm try to use jquery autocomplete, but jquery version used in template don't have this option.
Is it true?

I don't found any mentions on documentation and samples about that.

Can you tell me about it?

support for MongoDB

Hi,

I would like to use argon with Mongodb or Mongoose as my database.

Can you please provide some hints or small sample how to use it with mongoose instead of Redis or Posgresql.
Any help will be appreciated.

Session/Cookie Issue

Hi! Love the template, it's been an amazing help. I have my Redis server running in dev, and added one in production with Heroku Redis. But for some reason, my production setup isn't setting cookies and when I log in, it redirects me to the home page and the user isn't authenticated.

I ran into the same issue when I was using Docker in development and switched to a local pg database. Any ideas on things to check?
@timcreative @dragosct10

503 service unavailable

Using

docker-compose up -d

I got this error:

containers are running:

CONTAINER ID   IMAGE                COMMAND                  CREATED         STATUS         PORTS                                       NAMES
4473fe99fb5d   haproxy:1.9-alpine   "/docker-entrypoint.…"   3 minutes ago   Up 3 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp           argon-dashboard-nodejs_haproxy_1
74d0d4bf53e4   redis:alpine         "docker-entrypoint.s…"   3 minutes ago   Up 3 minutes   0.0.0.0:6379->6379/tcp, :::6379->6379/tcp   argon-dashboard-nodejs_redis_1
3678bee3594d   postgres             "docker-entrypoint.s…"   3 minutes ago   Up 3 minutes   0.0.0.0:5432->5432/tcp, :::5432->5432/tcp   argon-dashboard-nodejs_postgres_1

Logs

docker logs argon-dashboard-nodejs_haproxy_1

[WARNING] 335/195225 (1) : config : missing timeouts for frontend 'localnodes'.
   | While not properly invalid, you will certainly encounter various problems
   | with such a configuration. To fix this, please ensure that all following
   | timeouts are set to a non-zero value: 'client', 'connect', 'server'.
[WARNING] 335/195225 (1) : config : missing timeouts for backend 'server'.
   | While not properly invalid, you will certainly encounter various problems
   | with such a configuration. To fix this, please ensure that all following
   | timeouts are set to a non-zero value: 'client', 'connect', 'server'.
[NOTICE] 335/195225 (1) : New worker #1 (7) forked
[WARNING] 335/195227 (7) : Server server/argon-1 is DOWN, reason: Layer4 timeout, check duration: 2001ms. 0 active and 0 backup servers left. 0 sessions active, 0 requeued, 0 remaining in queue.
[ALERT] 335/195227 (7) : backend 'server' has no server available!

docker logs argon-dashboard-nodejs_postgres_1

2021-12-02 19:52:32.930 UTC [48] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
2021-12-02 19:52:33.097 UTC [49] LOG:  database system was shut down at 2021-12-02 19:52:29 UTC
2021-12-02 19:52:33.143 UTC [48] LOG:  database system is ready to accept connections
 done
server started
CREATE DATABASE


/usr/local/bin/docker-entrypoint.sh: ignoring /docker-entrypoint-initdb.d/*

2021-12-02 19:52:35.007 UTC [48] LOG:  received fast shutdown request
waiting for server to shut down....2021-12-02 19:52:35.053 UTC [48] LOG:  aborting any active transactions
2021-12-02 19:52:35.057 UTC [48] LOG:  background worker "logical replication launcher" (PID 55) exited with exit code 1
2021-12-02 19:52:35.060 UTC [50] LOG:  shutting down
2021-12-02 19:52:35.252 UTC [48] LOG:  database system is shut down
 done
server stopped

PostgreSQL init process complete; ready for start up.

2021-12-02 19:52:35.436 UTC [1] LOG:  starting PostgreSQL 14.1 (Debian 14.1-1.pgdg110+1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit
2021-12-02 19:52:35.436 UTC [1] LOG:  listening on IPv4 address "0.0.0.0", port 5432
2021-12-02 19:52:35.436 UTC [1] LOG:  listening on IPv6 address "::", port 5432
2021-12-02 19:52:35.521 UTC [1] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
2021-12-02 19:52:35.650 UTC [62] LOG:  database system was shut down at 2021-12-02 19:52:35 UTC
2021-12-02 19:52:35.729 UTC [1] LOG:  database system is ready to accept connections

redis log is fine

Redis server works in development but not on Heroku

Hi! I've used the dashboard locally, but when deploying to Heroku, the production redis server doesn't work and sessions aren't being created. Can you help?

Problem with Knex Command

Instead of "npm run knex migration:latest" and "npm run knex seed:run" it is printed as "npm knex migration:latest" and "npm knex seed:run" without the "run" keyword in the command in this Documentation link - https://argon-dashboard-nodejs.creative-tim.com/docs/getting-started/quick-start - please change it.

Problem with Signing in and Creating Accounts

Hi,

I have been trying to install your dashboard using npm does not work. I get stuck at doing npm knex migrate:latest.

So instead I have installed yarn was able to use that successfully. But now I have it running and it render the pages all okay. But when it comes to functionality it is not working. I just installed so not really sure really sure where to dig in first to fix. Or if it is because I am using yarn.

Here is the error I am getting when I preform password change, register user, login, etc...
Note* In my postgresdb it does show that the users that I created were created.

TypeError: Cannot set property 'messages' of undefined
    at createUser (/home/rtarson/www/dashboard/public_html/features/register/commands/create-user.js:18:24)

Issue when deploying on Heroku

First thank you for the great dashboard.

I have made few modification to use it with mongodb and it works perfectly on my localhost.
However I am trying to deploy using Heroku but all JS CSS VENDOR links are missing and I have sped quite some time trying to figure out without success.
Can you please help?
Thanks

Not able to add new feature

Hi team,
I have created new folder inside features folder and exported that routes and mount in routes>index.js.
but as soon as mounted new routes web site is just loading not rendering any page.

Problem with NPM Install in root directory

When I run npm install in the file directory I get a few package downloads followed by a couple of errors see attached log.
2019-05-22T14_12_04_887Z-debug.log

Integrating with sails js MVC framework

experiencing this error on the Pro version
argon.js:1855 Uncaught TypeError: $scrollbar.scrollbar is not a function
at init (argon.js:1855)
at argon.js:1862
at argon.js:1865