Month: April 2024

Use React JS styles in Laravel blade template

Posted on by adnanafzal565

If you are trying to give CSS styles in React JS inside Laravel blade template, but having the following error:

Use React JS styles in Laravel blade template

This happens when you try to give CSS styles in React JS in the following way:

function MyApp() {
    return (
        <h1 style={{
            color: "red"
        }}>Hello world</h1>
    )
}

ReactDOM.createRoot(
    document.getElementById("react-app")
).render(<MyApp />)

The error you are having is because the double curly braces {{ which are used in React JS for styling the tag, are also used by Laravel blade template to render the value of a PHP variable. Laravel will think of it as a PHP variable and will throw an error.

To fix this error, you need to create a separate object in your React JS component. That object will have all the styles for each tag. Modify your React JS component to the following:

function MyApp() {

    const styles = {
        heading: {
            color: "red"
        }
    }

    return (
        <h1 style={ styles.heading }>Hello world</h1>
    )
}

You can see that instead of setting the CSS directly in the style attribute, I have created a separate variable and used its value as a variable. This way your error gets fixed. Also, it will help you in setting CSS styles to multiple tags without duplicating them.

Securely deploy Laravel website on live server

Posted on by adnanafzal565

Most programmers find it difficult and confusing to deploy a Laravel website on a live server. Some don’t know where to start. Some get stuck in creating a virtual host. Some got attracted by cloud servers, but later realized that deploying on a cloud is very difficult.

Most of the developers starts tempering the directory structure of Laravel. Some create their own .htaccess files in order to cope with this problem.

Laravel entry point is public folder

The reason why programmers face difficulty in deploying a Laravel website is because Laravel entry point is its “public” folder, not the root folder (like core PHP or other CMS like WordPress etc). It means that if your domain is “adnan-tech.com”, then your website will be accessible from “adnan-tech.com/public”. This is not a good impression. User must access your site from main domain, not by appending “public” at the end.

Solution

In this article, I will not create a virtual host, nor temper the directory structure of Laravel. Each hosting has a file manager where all files of that server are stored. “public_html” is the primary folder for your domain. For the sake of simplicity, I will assume that you want to deploy your Laravel website in this folder. However, if you are deploying on sub-domain, you can select that sub-domain’s folder.

  1. Upload all files inside “laravel/public” folder to the “public_html” folder.
  1. Then you need to create a new folder at the root of your server.
    • I am naming it “laravel-server”.
  1. Create a zip of your laravel project (except the “public” folder).
  2. Upload the zip file to the “laravel-server” folder and extract it.
  1. After extracting, you can delete the zip file.
  2. Now open “public_html/index.php” and set the file’s paths to point to “laravel-server” folder.

At this point, you will see your Laravel project running live.

Storage files

Laravel uses a storage folder where all publicly uploaded files can be accessed. All your uploaded files will be stored at “laravel-server/storage/app/public”. We cannot give relative path to this folder. Because, imagine you have uploaded some images and they are now saved in storage folder. You create an <img /> tag and link the image to storage folder (like we did in index.php).

The only problem in this approach is, anyone can open “inspect element” from his browser and check the relative path to your “laravel-server”. Although, it is still very difficult to hack your server, but it is a good idea to keep your server hidden and secure as much as you can.

In order to hide the actual path of the file, we will create a symbolic link to this storage folder. Just like we create shortcuts of our games on Desktop, but the actual files are in some other location. User access the shortcut file and the shortcut file points towards the actual path of the file.

  1. Open terminal from your cPanel.
  2. At the root, you need to run the following command:
    • ln -s /home2/adnantec/laravel-server/storage/app/public /home2/adnantec/public_html/storage
  1. This will create a shortcut of “laravel-server/storage/app/public” folder in “public_html” folder and name the shortcut folder as “storage”.

Now, every file you upload at “laravel-server/storage/app/public” will be accessible from “public_html/storage”.

That’s how you can deploy your Laravel website on live server without compromising securety and without tweaking with the directory structure of Laravel. Although, I hope this tutorial helps you, but if you still face any problem to deploy your Laravel website, you can let me know.