Giter Club home page Giter Club logo

express-react-boilerplate's Introduction

Express, React/Redux, MySQL Boilerplate

Get Started

1. Prerequisites

  • NodeJs
  • NPM - Node package manager
  • MySQL - Relational database management system (RDBMS)

2. Installation

On the command prompt run the following commands:

 $ git clone https://github.com/Bikranshu/express-react-boilerplate.git
 $ cd express-react-boilerplate
 $ cp .env.example .env (edit it with your secret key and database information)
 $ npm install
 $ npm run migrate

Finally, start and build the application:

$ npm run build (For development)
$ npm run build:prod (For production)

List of NPM Commands:

$ npm run lint       # linting
$ npm run clean      # remove dist and node_modules folder and install dependencies

3. Usage

URL : http://localhost:3000/

Navigate to http://localhost:3000/swagger/ for the API documentation.

4. Useful Link

  • Web framework for Node.js - Express
  • JavaScript ORM for Node.js - Bookshelf
  • SQL Query Builder for Postgres, MSSQL, MySQL, MariaDB, SQLite3, and Oracle - Knex
  • JSON Web Tokens(jwt) - jsonwebtoken
  • Logging Library - Winston
  • Object schema validation - Joi
  • API documentation using swagger-jsdoc and swagger-ui
  • JavaScript library for building user interfaces - React
  • Predictable state container - Redux
  • A React component library implementing Google's Material Design - Material-UI
  • Redux Form - Redux Form
  • Declarative routing for React - React-Router
  • Promise based HTTP client - Axios
  • Environment configuration - dotenv
  • Code linting tool - ESLint
  • Code formatter - Prettier

express-react-boilerplate's People

Contributors

bikranshu avatar dependabot[bot] avatar dream-topdev avatar elmarceloc avatar gustavorssilva avatar kamilgunduz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

express-react-boilerplate's Issues

Cannot hot reload application

I just setup this application but I wasn't able to hot reload application. I have to restart every time whenever there is changes in client or server.

Error on socketpath

Hi

Can you please help, I have siteground and trying to run npm run migrate. I get following error. I am new to react and Node. Can you please help me understand this.

Error: connect ENOENT <YOUR_SOCKET_PATH>
at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)
--------------------
at Protocol._enqueue (C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\mysql\lib\protocol\Protocol.js:144:48)
at Protocol.handshake (C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\mysql\lib\protocol\Protocol.js:51:23)
at Connection.connect (C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\mysql\lib\Connection.js:116:18)
at C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\knex\lib\dialects\mysql\index.js:69:18
at new Promise ()
at Client_MySQL.acquireRawConnection (C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\knex\lib\dialects\mysql\index.js:64:12)
at create (C:\Users\prati\pratikdev\mysqlBoilerplate\node_modules\knex\lib\client.js:291:39)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] migrate: knex migrate:latest
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] migrate script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

ER_NOT_SUPPORTED_AUTH_MODE

I get this after npm run migrate

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

[Error] Violation of following Content Security Policy directive

Getting this error when trying to make a request from the frontend:

xhr.js:177 Refused to connect to 'http://127.0.0.1:3000/api/users' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

API Get request Error

As of right now if you make a get request to the API, the request return to the /public/index.html file.

move this from the /server/app.js.

// Landing page
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

build:prod has error

Executing npm run build:prod with NODE_ENV = production in .env file will encounter the following error:
image

Any advice on how to proceed?

Debug

Hello everybody,
although I completed the env variables, I get the error 'knex: Required configuration option ' client \ 'is missing.' So I have to debug, because I think that in my variable list there is a syntax error in it. I used Visual Code on Windows 10 - but have problems with Babel-Node ... to get debugging done. How can I do that - or is there another way to debug.
Greetings from Germany - Thank you

Issue with knex migration

When i try to run npm run migrate the following error is coming up.

Error: ER_INVALID_DEFAULT: Invalid default value for 'updated_at' at Query.Sequence._packetToError (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/sequences/Sequence.js:47:14) at Query.ErrorPacket (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/sequences/Query.js:77:18) at Protocol._parsePacket (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/Protocol.js:291:23) at Parser._parsePacket (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/Parser.js:433:10) at Parser.write (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/Parser.js:43:10) at Protocol.write (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/Protocol.js:38:16) at Socket.<anonymous> (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/Connection.js:91:28) at Socket.<anonymous> (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/Connection.js:525:10) at Socket.emit (events.js:200:13) at addChunk (_stream_readable.js:290:12) at readableAddChunk (_stream_readable.js:271:11) at Socket.Readable.push (_stream_readable.js:226:10) at TCP.onStreamRead (internal/stream_base_commons.js:166:17) -------------------- at Protocol._enqueue (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/protocol/Protocol.js:144:48) at Connection.query (/Users/lts/Reaction-lab/express/node_modules/mysql/lib/Connection.js:201:25) at /Users/lts/Reaction-lab/express/node_modules/knex/lib/dialects/mysql/index.js:144:18 at Promise._execute (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/debuggability.js:313:9) at Promise._resolveFromExecutor (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/promise.js:483:18) at new Promise (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/promise.js:79:10) at Client_MySQL._query (/Users/lts/Reaction-lab/express/node_modules/knex/lib/dialects/mysql/index.js:135:12) at Client_MySQL.query (/Users/lts/Reaction-lab/express/node_modules/knex/lib/client.js:192:17) at /Users/lts/Reaction-lab/express/node_modules/knex/lib/transaction.js:232:21 at tryCatcher (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/util.js:16:23) at Function.Promise.attempt.Promise.try (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/method.js:39:29) at Client_MySQL.trxClient.query (/Users/lts/Reaction-lab/express/node_modules/knex/lib/transaction.js:229:33) at Runner.<anonymous> (/Users/lts/Reaction-lab/express/node_modules/knex/lib/runner.js:138:36) at Runner.tryCatcher (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/util.js:16:23) at Runner.query (/Users/lts/Reaction-lab/express/node_modules/knex/node_modules/bluebird/js/release/method.js:15:34) at Runner.queryArray (/Users/lts/Reaction-lab/express/node_modules/knex/lib/runner.js:207:40)

Warning: Cannot update a component from inside the function body of a different component.

The subject of the issue

After cloning and running the app when user types and blur the field, Field validation is triggering, and it shows the warning in the console. I try to research and I fond that after redux-form @@redux-form/CHANGE action this warning is shown.

Warning: Cannot update a component from inside the function body of a different component.

Can somebody confirm if this is being worked on and if it is still safe to use validation even with the warning (commercial application)?

kinex.js local file reference to migrations

Hi there, good work on this project. I was following your readme, and it seems as though going through the initial steps do not generate the /src directory referenced in your kenex.js file.

Am i missing something here, or should i modify that path to point to the migrations directory at /server/migrations?

Also, I see i can create my default env connections for the mysql npm package specified in this example, but do not see anything in the codebase around creating the default database and user. It seems as though this assumes that was already set up?

Migration failed given that knex timestamp has no default values and is set to not null by default

When running npm run migrate for the first time, I got the following error:

migration file "20170715222060_create_users_table.js" failed
migration failed with error: create table `users` (`id` int unsigned not null auto_increment primary key, `first_name` varchar(255) not null, `last_name` varchar(255) not null, `email` varchar(255) not null, `password` varchar(255) not null, `status` boolean default '0', `created_at` timestamp, `updated_at` timestamp) default character set utf8 - ER_INVALID_DEFAULT: Invalid default value for 'updated_at'
{ method: 'update',
  options: {},
  timeout: false,
  cancelOnTimeout: false,
  bindings: [ 0 ],
  __knexQueryUid: '79e1ddce-6e45-4156-8b57-a2274facbd4c',
  sql: 'update `migrations_lock` set `is_locked` = ?' }
Error: ER_INVALID_DEFAULT: Invalid default value for 'updated_at'

It seems that this problem is caused by knex timestamp being not null by default.

I fixed this by replacing:

table.timestamp('created_at');
table.timestamp('updated_at');

with

table.timestamp('created_at').defaultTo(knex.fn.now());
table.timestamp('updated_at').defaultTo(knex.fn.now());

in the migrations file, but you probably have better ideas on how to fix this definitely.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.