Front end development Archives - Crosstech IT | Blog https://crosstechit.com/blog Apps. Smart. Fun. Sat, 18 Apr 2020 07:35:29 +0000 en-US hourly 1 https://wordpress.org/?v=5.9 https://crosstechit.com/blog/wp-content/uploads/2019/01/cropped-favicon-1-32x32.png Front end development Archives - Crosstech IT | Blog https://crosstechit.com/blog 32 32 Customize/Override Ant Design theme in Laravel ReactJS https://crosstechit.com/blog/2020/03/26/customize-override-ant-design-theme-in-laravel-reactjs/ https://crosstechit.com/blog/2020/03/26/customize-override-ant-design-theme-in-laravel-reactjs/#respond Thu, 26 Mar 2020 15:10:29 +0000 https://crosstechit.com/blog/2020/03/26/react-js-authentication-with-laravel-back-end-copy/ Here’s a quick guide for overriding Ant Design theme variables (colors) in a ReactJS project using Laravel Mix. I will assume that you already have configured a ReactJS project with Laravel Mix. If not, than you can easily find this documentation: https://laravel.com/docs/master/mix Inspired by AntD documentation here: https://ant.design/docs/react/customize-theme I’ve managed to make it work in […]

The post Customize/Override Ant Design theme in Laravel ReactJS appeared first on Crosstech IT | Blog.

]]> Here’s a quick guide for overriding Ant Design theme variables (colors) in a ReactJS project using Laravel Mix. I will assume that you already have configured a ReactJS project with Laravel Mix. If not, than you can easily find this documentation: https://laravel.com/docs/master/mix

Inspired by AntD documentation here: https://ant.design/docs/react/customize-theme I’ve managed to make it work in Laravel:

Let’s start with dependencies

First, you have to run the following command

npm install antd 
npm install --save-dev  css-loader  less  less-loader  style-loader

Configuring Laravel Mix

Next, in your project root shall be a file named: webpack.mix.js. At the end of it you shall have something like this:

 
 mix.react('resources/assets/js/app.js', 'public/js')
    .less('resources/assets/less/app.less', 'public/css',
        {
            modifyVars: {
                'primary-color': '#0BD37E',
            },
            javascriptEnabled: true,
        });

Make sure you have app.less created in the desired location.

At the top of that file you should inport the default antd styles using: @import "~antd/dist/antd.less";

Rest of your application styling should go below that.

As you can in modifyVars object, we have overwritten the value for primary color.

You can find all other variables with their default values here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

Wrap in up

Hope these information saved you some time.

If you’d like to know more details just let me know in comments section.

The post Customize/Override Ant Design theme in Laravel ReactJS appeared first on Crosstech IT | Blog.

]]> https://crosstechit.com/blog/2020/03/26/customize-override-ant-design-theme-in-laravel-reactjs/feed/ 0 React JS authentication with Laravel API https://crosstechit.com/blog/2019/01/15/react-js-authentication-with-laravel-back-end/ https://crosstechit.com/blog/2019/01/15/react-js-authentication-with-laravel-back-end/#comments Tue, 15 Jan 2019 07:00:52 +0000 https://crosstechit.com/blog/?p=42 We want to create a consumer web app for our API developed using Laravel Passport and Dingo API. Laravel has it’s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project. Result Here you can find final updated result containing views for: Login Register Forgot password (2 […]

The post React JS authentication with Laravel API appeared first on Crosstech IT | Blog.

]]> We want to create a consumer web app for our API developed using Laravel Passport and Dingo API. Laravel has it’s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project.

Result

Here you can find final updated result containing views for:

  • Login
  • Register
  • Forgot password (2 steps)

https://github.com/danielcrt/laravel-reactjs-passport-authentication

Setup

Setup ReactJS inside Laravel project.

 php artisan preset react

This will remove unnecessary files and prepare the project structure for a React app. You can see in your root directory a file webpack.mix.js where are defined the paths for compiled folders and files.

 
mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

So all JS/JSX files from public/js will be compiled to app.js. The same will happen for CSS files.

We want all routes to be handled by React so in routes\web.php we must have:

View

 
Route::view('/{path?}', 'home')
     ->where('path', '.*')
     ->name('react');

This is telling Laravel that for all routes it should return the home view found in resources\views\home.blade.php. In this file it is important to include our compiled CSS and JS files.

<head>
    ...
    <link rel="stylesheet" href="{{ asset("css/app.css") }}" type="text/css">
</head>
...
 
    <script type="text/javascript" src="{{ asset("js/app.js") }}"></script>
</body>

Show me React stuff

In our resources\js\app.js the bootstrap.js file is required by default. And along that we should require our entry point into the app. In bootstrap file are included jQuery library and bootstrap js files. If you don’t plan to use them you can remove these to lower the build size.

Below that you have some important lines adding X-Requested-With and X-CSRF-TOKEN headers to axios. If you plan not making requests using axios than you have to handle the by your own. You can prepare the CSRF token for later use in Javascript adding following lines to your view:

<script>
    window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
    ]) !!};
</script>

We have used Redux in order to have access to user’s state all over the app so we wrapped our application in a Providerin js\components\App.jsx.

In js\helperswe have added withCredentials = true to axios configs. This will ensure that the authentication cookie will always be send back to the server. In order to handle the case when user wants to access protected routes without being authenticated we created a interceptor which will remove the local stored variable which tells us if user is logged in (for client side usage) and redirect him to home page.

axios.defaults.withCredentials = true; 
 
axios.interceptors.response.use(
  response => response,
  (error) => {
    if (error.response.data.status_code === 401) {
      // we already know from the server that user is no longer logged in
      // just delete the local field
      localStorage.removeItem(GlobalConstants.USER_KEY);
      history.push('/');
    }
    return Promise.reject(error);
  });

Wrap in up

That’s pretty much it. I feel these were the key elements which could save your development time.

If you’d like me to detail more the project structure and components just let me know in comments section.

The post React JS authentication with Laravel API appeared first on Crosstech IT | Blog.

]]> https://crosstechit.com/blog/2019/01/15/react-js-authentication-with-laravel-back-end/feed/ 4