how to use with laravel preset react ?

[jihadismail8]

hi , i am a little bit confused on how to use rekit with laravel , and i mean if somebody knows laravel preset react , where a sample of react comp have been created for you , how can i use rekit to develop react redux app with laravel as a backend ?? thanks for any help

[supnate]

Anyone could help? I don't know laravel but Rekit projects are just normal React projects. You can integrate laravel just like the practice for general React projects. I searched and found some tutorials like: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-restful-backend-part-1-laravel-5-api--cms-29442

[jihadismail8]

my confusion is in the webpack and the compailing of the react app , laravel has something called ,laravel mix . when you create new laravel project , you just use this command " php artisan preset react " and a react example component is provided , then we use npm install , and npm run , and the we just put div element in the index.html file (start the php server and go to the index.html and everything is working fine ). my question is at what point in can use rekit ? where is the app.js file that being compiled by rekit ? what if i just copy the rekit produced app.js file and put it instead of the one produced by laravel mix , would it work ? thanks for replaying

[iamzjohn]

@supnate the problem that @jihadismail8 is facing is like the rekit(i guess create-react-app also) needs to find the src folder on the same level has the package.json

But laravel uses a different structure, like the HTML(PHP to be real) the views are inside resources->view, the the JS are in resources->assets->js And on the end(npm run production/watch) Laravel compiles the code to the public folder where when served we can see the app. But when trying to use the tutorial with laravel inside the js folder its gives an error of missing package.json

@jihadismail8 to use rekit u can make it 2 ways: 1- Use the tutorial i. After setting the react preset and add a shortcut of package.json inside the resources/assets/js ii. add a js file(I added inside resources/assets/js/tools and called start-rekit-studio.js) with the code for starting rekit-studio like:

const path = require('path');
const http = require('http');
const express = require('express');
const rekitStudioMiddleWare = require('rekit-studio/middleware');
const fallback = require('express-history-api-fallback');
const pkgJson = require('../package.json');

function startStudioServer() {
    console.log('Starting Rekit Studio...');
    const app = express();
    const server = http.createServer(app);
    const root = path.join(__dirname, '../../../../node_modules/rekit-studio/dist');
    app.use(rekitStudioMiddleWare()(server, app));
    app.use(express.static(root));
    app.use(fallback('index.html', { root }));

    // Other files should not happen, respond 404
    app.get('*', (req, res) => {
        console.log('Warning: unknown req: ', req.path);
        res.sendStatus(404);
    });

    const port = pkgJson.rekit.studioPort;
    server.listen(port, (err) => {
        if (err) {
            console.error(err);
        }
        console.log(`Studio server is listening at http://localhost:${port}/`);
    });
}
startStudioServer();

iii. Add a script at the package.json to run rekit like :

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "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",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "rekit-studio": "node ./tools/start-rekit-studio.js"
    }

iv. Alwawys Run the npm run rekit-studio inside the resources/assets/js And is done

2. Create Rekit Project in the laravel Root i. Just run(on the project root) rekit create rekit_app ii. enter the rekit_app and edit the /config/webpack.config.prod.js and change the output from

   filename: 'static/js/[name].[chunkhash:8].js',
   chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',

   to

   filename: 'static/js/[name].js',
   chunkFilename: 'static/js/[name].chunk.js',

3. Build your app
4. After build just copy the result inside build/static to laravel's public/js
5. then Edit the welcome.blade.php on the resources/views to fit with the copy result NOTE: U can automate from the 3rd step to the 5th only using laravelmix

DONE

[jihadismail8]

@iamzjohn hi :) thanks for your answer , i really appreciate it . could you text me on facebook please ?? jihad ismail from moscow russia

[iamzjohn]

@jihadismail8 I think its easier you follow me cuz I see a lot os jihads, Just search for Adelino zJohn