Boilerplate for Laravel 5.8 using React 16.12.0 with Hooks, Redux Saga, Jest, Ant-Design, reduxsauce with duck pattern, implemented internationalization with i18next and using eslint 7.3.1 with airbnb style and using PropTypes. Using Laravel Passport for authentication. Implemented internationalization with Translation Strings in Laravel for en and pt-BR.
Once you find yourself inside the root of the cloned repository, install all Laravel dependencies by running the following commands:
composer installOnce you done, you must install all javascript dependencies by running the following command using either npm or yarn:
It will install all required dependencies, listed in List of Packages
npm installyarnBefore starting, rename your .env.example file to .env.
Run the following command to create the APP_KEY which will be used for encryption.
php artisan key:generateYou must create a database on your server and update the .env file with the following information:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secretNext, you should create the tables for your application:
php artisan migrateAfter the tables have been created, you must run passport:install to create the credentials for you application
php artisan passport:installThis command will output the following result
Encryption keys generated successfully.
Personal access client created successfully.
Client ID: 1
Client secret: {{clientSecret}}
Password grant client created successfully.
Client ID: 2
Client secret: {{clientSecret}}{{clientSecret}} is a 40 characters long string. You must copy it to the .env file.
Passport will also create the oauth_clients table, where the desired token will be stored as "Laravel Password Grant Client", with ID 2. Copy the secret token to the row MIX_API_CLIENT_SECRET in the .env file without quotes. The MIX_API information should look like below:
MIX_API_URL="${MIX_BASE_URL}/api"
MIX_API_CLIENT_ID=2
MIX_API_GRANT_TYPE="password"
MIX_API_CLIENT_SECRET="Paste the token here, the other rows should look the same, make sure its Client ID 2"
MIX_API_REFRESH_TOKEN_GRANT_TYPE="refresh_token"You must create an admin user for the application. For such, you may use the seed command or create a user manually using tinker.
This command will create the necessary tables for
To create a user following the settings listed in:
laravel-react-hooks-redux-boilerplate
└── database
└── seeds
└── UsersTableSeeder.phpRun the following command:
php artisan db:seedYou may also create a user using the Tinker command. To enter the Tinker CLI run:
php artisan tinkerInside Tinker CLI, create a user with the desired information by running:
>>> $user = new User
>>> $user->name = "Desired Name"
>>> $user->email = "Desired email"
>>> $user->password = Hash::make('Desired Password')
>>> $user->type = 'admin'
>>> $user->activation_token = str_random(60)
>>> $user->save()
>>> exit()After everything has been set, start your application by running:
php artisan serveAnd react by running:
npm run watchor with yarn
yarn watch| Package | Description |
|---|---|
| @babel/preset-react | Babel preset for all React plugins |
| antd | An enterprise-class UI design language and React implementation. |
| @ant-design/icons | Set of icons for antd ^4V. |
| axios | Promise based HTTP client for the browser and node.js |
| babel-core | Babel compiler core. |
| babel-eslint | Allows using types or experimental features not supported in ESLint itself |
| babel-plugin-module-resolver | Allows add custom "root" directories that contain the modules. |
| cross-env | Run scripts that set and use environment variables across platforms |
| eslint | Linter JavaScript. |
| eslint-config-airbnb | Configuration eslint by airbnb. |
| eslint-config-prettier | Turns off all rules that are unnecessary or might conflict with Prettier. |
| eslint-import-resolver-babel-module | A babel-plugin-module-resolver resolver for eslint-plugin-import |
| eslint-plugin-import | Supports linting of ES6+ import/export syntax. |
| eslint-plugin-jsx-a11y | Static AST checker for accessibility rules on JSX elements. |
| eslint-plugin-react | React specific linting rules for ESLint |
| history | Manage session history |
| i18next | I18next internationalization framework |
| i18next-browser-languagedetector | Language detector used in browser environment for i18next |
| i18next-http-backend | Backend layer for i18next using browsers http |
| jest | JavaScript Testing Library |
| jquery | JavaScript library for DOM operations |
| laravel-mix | API for defining basic webpack build steps for Laravel application |
| lodash | The Lodash library exported as Node.js modules |
| passport [laravel] | Simple authentication library for laravel |
| popper.js | A library used to position poppers in web applications. |
| prop-types | Runtime type checking for React props and similar objects. |
| react-dom | React package for working with the DOM. |
| react-i18next | Internationalization for react using the i18next i18n ecosystem. |
| react-redux | A predictable state container for JavaScript applications |
| react-router | Declarative routing for React |
| react-router-dom | DOM bindings for React Router |
| redux | A predictable state container for JavaScript applications |
| redux-saga | Saga middleware for Redux to handle Side Effects |
| reduxsauce | Library that provides concise methods for writing action creators and reducers |
| resolve-url-loader | Webpack loader to resolves relative paths in url() statements |
| sass | A pure JavaScript implementation of Sass. |
| sass-loader | Sass loader for webpack |
| webpack | Allows splitting codebase into multiple bundles, which can be loaded on demand. |
- MIT license
- Copyright 2019 © Alef Duarte.