The sole and entire purpose of this entire repository is to provide a single-language, modular and current approach to a full-stack, server-side rendered, JavaScript application. This repository encompasses/utilizes server-side rendering with Next, front-end components using React, a fully functional Node/Express API, complete implementation of MVC concept, complete implementation of front-end store concept with Mobx, complete implementation of back-end request validation and front-end view models, along with complete jwt, passport and bcyrpt authentication implementation. Configured with fixtures for rapid development startup, complete Formik implementation to remove form management from component state, and file structure based routing for the added WOW factor, jsboilerplate should be all you need to create robust, dynamic, full-stack JavaScript applications.
| Backend / API | Frontend / Client |
|---|---|
| Node - server | Next - framework |
| Express - framework | React - user interface (ui) library |
| Passport - authentication strategy | Mobx - state management |
| JSON Web Token (JWT) - authentication token | SASS - styles preprocessor |
| Joi - request validation | Reactstrap - bootstrap for react |
| Sequelize - object relational mapper (ORM) | Formik - form library with internal state |
| MySQL - database | Font Awesome - icon library |
| Bcrypt - password encryption | Yup - form state validation |
- Clone the repository and install the dependencies:
sudo git clone https://wwww.github.com/maweitzman/jsboilerplate
cd jsboilerplate
npm install
- Create a /.env file in the root of the application directory. Copy and paste the code below, and replace the temporary values with the values you desire if necessary:
NODE_ENV='development'
PORT=5000
HOST='localhost'
USERNAME='root'
PASSWORD='root'
JWT_SECRET='secretkey'
COOKIE_SECRET='secretkey'
- Replace '5000' in api_url in the development constant in /api/config/config.js with the port number you specified in your /.env file from step 2.
- Replace 'jsboilerplate' in the 'database' object in the development constant in /api/config/config.js with the database name you desire to use for your application.
- Start the application:
npm start
- Open your browser and navigate to your localhost at the port number you specified in your /.env file. Login with the username: admin and the password: admin.