moeen-basra/laravel-react

Laravel 8 and React 17 boilerplate

Laravel 8 and React 17 boilerplate

There are two different ways to run this demo

Please follow the guide.

Prerequisite

1. Make sure you have composer installed.
2. Make sure you have latest stable version of node installed.

Option 1

1. git clone
2. create a .env file copy content from .env.example and update the values
3. composer install && composer update
4. php artisan cron:refresh-database
5. if npm version < 7 npm install && npm run dev else npm install --legacy-peer-deps && npm run dev
6. php artisan key:gen
7. php artisan serve

Option 2

Prerequisite

Make sure you have docker and docker-compose installed on you machine.

1. git clone
2. create a .env file copy content from .env.docker and do not make any change

run following command in terminal / power shell

docker-compose up -d

when docker will finish building the containers, access the "laravel-react-app" container using following command

docker exec -it lr_app sh

now you will be inside container

run following commands

1. composer install && composer update
2. php artisan cron:refresh-database
3. php artisan key:gen
4. if npm version < 7 npm install && npm run dev else npm install --legacy-peer-deps && npm run dev

open browser and check the following address

http://localhost:8100

TODO:

• Add Redux
• Add Laravel Sanctum for authentication
• User Login
• User Register
• Users Crud
• Articles Crud
• Form validation Client and Server
• Reset Password
• Tests
• Upgrade to Laravel 7
• Upgrade to React 16.13
• docker

laravel-react's Issues

I have a loadtime over 30sec

Is this normal?

Can't login

I cant login in application, in the network tab, the request stay in pending indefinitely...
Have you a similar error ?

The user name does't appear after first login

Hi everyone,
First thing first, I want to say that this is a fantastic project which has been really helpful.
I have found a problem related to the login. As you are able to see in the followings picture 1, (I am using the published web for exposing the problem), after login with a new account by first time, the website does not show the name of the user in the top right corner.

Figure 1

That problem is fixed pressing F5 button (Figure 2), but is pretty cumbersome. So I want to know if there is some way to solve that problem. Everything works well, but this bug spoil the user’s experience.

Figure 2
Thanks a lot
Regards

Browser sync error

Some times on linux, when trying to run npm commands npm run watch-poll or npm run hot
it throws following error.

events.js:136
      throw er; // Unhandled 'error' event
      ^

Error: watch app ENOSPC
    at _errnoException (util.js:1031:13)
    at FSWatcher.start (fs.js:1397:19)
    at Object.fs.watch (fs.js:1423:11)
    at createFsWatchInstance (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleDir (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:407:19)
    at FSWatcher.<anonymous> (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:455:19)
    at FSWatcher.<anonymous> (/var/www/laravel-react/node_modules/chokidar/lib/nodefs-handler.js:460:16)
    at FSReqWrap.oncomplete (fs.js:167:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] hot: `cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] hot script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Authorization: Bearer eyJ0eXAiOiJKV1QiLC...not the same as the access_token inserted in database

Can you explain please, why Authorization: Bearer eyJ0eXAiOiJKV1QiLC is not the same as access token inserted into database?
Database value is 28fbf5feb43f5ddb2c559d26213304612366a2680f5e47be8e544430a4eb9a133c88a03a24f8189a

Social Login Missing

Cant find option for social login with laravel/socialite package.

Cannot read property 'has' of undefined

app.js?id=e7ffcbe9b8c258d094fc:2 TypeError: Cannot read property 'has' of undefined
at LoginForm (9.js:1)
at Ja (app.js?id=e7ffcbe9b8c258d094fc:2)
at _s (app.js?id=e7ffcbe9b8c258d094fc:2)
at lu (app.js?id=e7ffcbe9b8c258d094fc:2)
at su (app.js?id=e7ffcbe9b8c258d094fc:2)
at Zs (app.js?id=e7ffcbe9b8c258d094fc:2)
at app.js?id=e7ffcbe9b8c258d094fc:2
at t.unstable_runWithPriority (app.js?id=e7ffcbe9b8c258d094fc:2)
at zi (app.js?id=e7ffcbe9b8c258d094fc:2)
at Vi (app.js?id=e7ffcbe9b8c258d094fc:2)

missing script build react

i notes there is no build in the secript section in package.json file

 "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

i think by default when you create project using create-react-app it should add it there

im asking because i run into issue when i try to run: npm run build
it show: missing script build react

what do you suggest?

[features] front/backend splitting ?

A split would make easer to use react-native or other different client

An auth-laravel-passport component for create-react would be enough :)

Some pages do not work

Thanks for share the code seems well structured, anyway I found:

1. No article has shown

2. Error when trying to add a new article

login error cURL error 3

Hello,
Im getting this error when i try to login
0: cURL error 3: malformed (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

my app url in env file is like this (APP_URL=http://localhost:8000)

Help Mix manifest does not exist

The Mix manifest does not exist.

unable to run this project

Hi, i try to run it but its not work.

Production compile error

I am getting this error on compiling for production

CssSyntaxError: E:\css\app.css:13156:19: Missed semicolon

anyone know how to solve this?

new article page is not working due to null state

resources/assets/js/common/wysiwyg-editor/index.js

convertHtmlEditorState(){
...
}

change to

  convertHtmlToEditorState(value) {
    if (value){
    const blocksFromHTML = convertFromHTML(value)
    const state = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(state)
    }
  }

App doesn't work

The stream or file "/var/www/app/storage/logs/laravel.log" could not be opened in append mode: failed to open stream: Permission denied

[webpack-cli] Error: Cannot find module 'babel-merge'

Hi moeen-basara,

I am getting the error as shown below, when running "npm install && npm run dev" command., Can you help me, How to resolve this issue.

development
mix

[webpack-cli] Error: Cannot find module 'babel-merge'
Require stack:

• C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\BabelConfig.js
• C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\config.js
• C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\Mix.js
• C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\setup\webpack.config.js
• C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\lib\webpack-cli.js
• C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\lib\bootstrap.js
• C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\bin\cli.js
• C:\xampp\htdocs\laravel-react\node_modules\webpack\bin\webpack.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
  at Function.Module._load (node:internal/modules/cjs/loader:769:27)
  at Module.require (node:internal/modules/cjs/loader:996:19)
  at require (C:\xampp\htdocs\laravel-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
  at Object. (C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\BabelConfig.js:1:75)
  at Module._compile (C:\xampp\htdocs\laravel-react\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
  at Module.load (node:internal/modules/cjs/loader:972:32)
  at Function.Module._load (node:internal/modules/cjs/loader:813:14)
  at Module.require (node:internal/modules/cjs/loader:996:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\BabelConfig.js',
  'C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\config.js',
  'C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\src\Mix.js',
  'C:\xampp\htdocs\laravel-react\node_modules\laravel-mix\setup\webpack.config.js',
  'C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\lib\webpack-cli.js',
  'C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\lib\bootstrap.js',
  'C:\xampp\htdocs\laravel-react\node_modules\webpack-cli\bin\cli.js',
  'C:\xampp\htdocs\laravel-react\node_modules\webpack\bin\webpack.js'
  ]
  }

Hitting the login endpoint produces 504 gateway timeout

This on a newly fresh setup application via your installation steps

browser cache

The library 'react-loadable' seems to create js files consisting of only numbers and they are stored in the 'public' directory.
In Chrome browser, I have to press 'shift + F5' instead of 'F5' whenever modifying codes and rebuilding them. This is really an issue in a real server.

where checkAuth() is used?

Hi Moeen,

In js/modules/auth/store/reducer.js is a function checkAuth. Tell me please where this is used?
I can't find it anywhere.
I see is at the top at the file as return checkAuth(state); but where on the service.js it should be used?
Thanks!

hi i want add React CSS Modules

hi
moeen
hi i want add React CSS Modules
But
https://laracasts.com/discuss/channels/elixir/helo-using-css-modules-with-laravel-54-mix
and
https://stackoverflow.com/questions/45792979/react-css-modules-with-laravel-mix
Please
help me

Malformed utf-8 characters.

When i go to the home i see no article , when i try to login i cant when i try to register i cant : the error in my console is malformed utf-8 characters, possibly incorrectly encoded . What to do ? What is the problem ?

sh: cron:refresh-database: not found

When I try to execute the command cron:refresh-database I get the following error : sh: cron:refresh-database: not found

Any idea why?

Wrong docker name

The Readme said the command to open the console must be:

docker exec -it laravel-react-app sh

but the correct command is:

docker exec -it laravel_react_app sh

Please fix it

Delete Button is calling wrong method (delete instead of destroy)

Delete Button is calling wrong method (delete instead of destroy)

Bug fix :
app/Http/Controllers/Api/ArticleController.php : 127

public function destroy($id)

Change to

public function delete($id)

loadable component

Hi Moeen,

I came across to your this project and it really a helpful project in learning react with laravel.

I was wondering that instead of lazy function to load components 'React documentation says' to use this 'https://github.com/gregberge/loadable-components' library to load it from server.

I want to know where I should change to achieve this. As I am really new to react so not able to understand how to do this.

Can you please help me out in this.

Thanks in advance brother.

404 error API

Hi,

I try to test the project. I've updated the .env with my values but when I want to register, I've a 404 error on API (log)

POST http://xxxxxx/api/v1/auth/login 404 (Not Found)

This is my .env:

`APP_ENV=production
APP_KEY=base64:xxxxx=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://xxxx.io

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=xx
DB_USERNAME=xx
DB_PASSWORD=xxxx

BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=

PERSONAL_CLIENT_ID=1
PERSONAL_CLIENT_SECRET=xxxxxxxxx
PASSWORD_CLIENT_ID=2
PASSWORD_CLIENT_SECRET=xxxxxxxx
`

Cannot read property 'call' of undefined when import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

react-dom.development.js?61bb:13035 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:64) at eval (react-draft-wysiwyg.css?0053:1) at Object../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css (1.js:1818) at __webpack_require__ (app.js:64) at eval (index.js:12) at Module../resources/js/common/wysiwyg-editor/index.js (3.js:11) at __webpack_require__ (app.js:64) at eval (Form.js?265f:1) at Module../resources/js/modules/article/pages/edit/components/Form.js (8.js:23) at __webpack_require__ (app.js:64)

There are no commands defined in the "cron" namespace.

Hello! Nice Repository BTW.

I followed your instruction but I'm still ending up with this error when trying this script.

php artisan cron:refresh-database -vv

Error While Compile Assets

ERROR in ./resources/js/modules/article/pages/add/Page.js
Module not found: Error: Can't resolve 'ree-validate' in

Issue with npm

Hi,

I am getting below issue, I have done to set permission but still I am getting the error

gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 10.6.0
gyp verb build dir attempting to create "build" dir: /var/www/html/propertylab_react_laravel/node_modules/node-sass/build
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/var/www/html/propertylab_react_laravel/node_modules/node-sass/build'
gyp ERR! System Linux 4.4.0-94-generic
gyp ERR! command "/usr/local/bin/node" "/var/www/html/propertylab_react_laravel/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /var/www/html/propertylab_react_laravel/node_modules/node-sass
gyp ERR! node -v v10.6.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
Build failed with error code: 1
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall 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:
npm ERR!     /home/daffolap-604/.npm/_logs/2018-07-12T07_48_06_904Z-debug.log

Please let me know where I am doing wrong

Thanks

Refresh-token is not used

Hi, I would like to use the boilerplate. It seems to use oauth2(passport), but refresh_token doesn't seem to be used, which means this is not a standard oauth2.. no?

Error when access to server.

You need to run php artisan key:generate.

Call to undefined function str_random()

Error:
Symfony\Component\Debug\Exception\FatalThrowableError : Call to undefined function str_random()
line: laravel-react/database/seeds/UsersTableSeeder.php:21

How to reproduce:
run: php artisan cron:refresh-database

Solution:
https://stackoverflow.com/a/58163479/8550661

Can't login

I cant't login. In reponsive none value.

404: Client error: `POST http://localhost/oauth/token` resulted in a `404 Not Found`

Hello, first I want to thank you for the great project you have shared with the community. It is really useful.

After following all the steps, I get the following error when trying to login with a user already registered (default users or even new users created)

I'm using XAMPP 3.2.2 to run the project

I have spent several weeks trying to solve this problem, but unfortunately I have not made any progress. I have deleted the project several times and reinstalled everything from scratch, but the result is always the same and I do not know what could be the cause.
I have not modified any line of code so I do not understand why it fails
If you could help me solve this problem I would be grateful.

What's the Main.js file for?

Just curious what this does? I don't see it being compiled or used anywhere?

laravel-react/resources/assets/js/Main.js

Line 18 in fd1acf7

class Main extends Component {

ENV constants are not accessible

Hi,
I have cloned this project and followed all installation steps. I am able to see the first screen and others too.
But When I tried to login it thrown an error below::
0: cURL error 3: <url> malformed (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

I went for debug and found that ENV('APP_URL') always returns null. Actually every env constants are returned as null. I am using windows 7 and wamp.

What is '!!' doing?

Hi. moeen.

I am looking at your code.
And, I am studying very much.

Please tell me about function checkAuth.

isAuthenticated: !! localStorage.getItem ('access_token')

What is this '!!' doing?

Thank you.

Obsolete package-lock.json

package.json along with yarn.lock seem to be the source of true regarding dependencies. package-lock.json hasn't been updated since a while (9 months), and good practices say to remove it entirely. Especially if yarn is used for deps management.

Someone ripped off your repo

Was searching for a react/laravel boilerplate and I came across yours. Then I came across this one:
https://github.com/david-whiting/Laravel-React

It is identical to yours, same code, same commits, but it is not forked. Someone took your git history and rewrote it to make it appear that they are the author. Seems very odd, thought I'd point it out to you, not sure if there's anything you can do it about it.

Thanks for creating this!

Npm run dev Fail

First, thanks for this project :-)

I have an issue, just after install, I run "npm run dev" and a error appear:

ERROR in ./resources/assets/js/layout/index.js
Module build failed: SyntaxError: Unexpected token (15:21)

I think that is a problem with the compilation (babel ?).

Cannot read property 'map' of undefined

Hi,

After follow the installation instructions, I'm getting the following error on Windows.

P.S.: I'm totally newbie with reactjs...

connectAdvanced.js:296 Uncaught TypeError: Cannot read property 'map' of undefined
    at Function.mapStateToProps [as mapToProps] (index.js:12)
    at mapToPropsProxy (wrapMapToProps.js:41)
    at handleNewState (selectorFactory.js:44)
    at handleSubsequentCalls (selectorFactory.js:58)
    at pureFinalPropsSelector (selectorFactory.js:63)
    at Subscription.checkForUpdates [as onStateChange] (connectAdvanced.js:64)
    at Subscription.handleChangeWrapper (Subscription.js:95)
    at Subscription.js:23
    at batchedUpdates$1 (react-dom.development.js:22380)
    at Object.notify (Subscription.js:19)

Register fails.

Failed to load resource: the server responded with a status of 401 (Unauthorized)

API (Unauthorized)

Any idea why is the API giving me an error: "Unauthenticated." every time I try to login and go to the articles admin page even tho I have the admin value in the database at 1 ?

Register fails. 0: cURL error 7: Failed to connect to localhost port 80:

I found this question with same error like in my case but you just close this issue without solving the problem so I open new one.

When I register page redirect's me to the Home page and set the token in localstorage null.

I'll get this error in console
http://localhost:8000/api/v1/auth/login 401 (Unauthorized)

After if I change page again I redirecting to the login page.And then if I sign in I get this error bottom of the input.
0: cURL error 7: Failed to connect to localhost port 80: Connection refused (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

my APP_URL

APP_URL=http://localhost:8000

Changes not taken into consideration

Excuse my limited knowledge, I'm new to react. Why is it when I make changes they don't appear ? Even if I try re-entering the npm install && npm run dev command ?

Email verification Missing ?

can't find code for email verification and reset password . Could you please add that
#request

unable to register and login properly after fresh installation and registration

When i installed all and tryied to signup it did not show any error message

npm install

After npm install I`m getting this message
Binary is fine

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of imagemin@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1536 packages from 949 contributors and audited 19149 packages in 35.414s
found 1 high severity vulnerability
run npm audit fix to fix them, or npm audit for details

and when i run npm audit

                    Manual Review
         Some vulnerabilities require your attention to resolve

      Visit https://go.npm.me/audit-guide for additional guidance

High Missing Origin Validation

Package webpack-dev-server

Patched in >=3.1.6

Dependency of laravel-mix [dev]

Path laravel-mix > webpack-dev-server

More info https://nodesecurity.io/advisories/725

found 1 high severity vulnerability in 19149 scanned packages
1 vulnerability requires manual review. See the full report for details.

npm audit fix doesnt help same problem