Installing a Modern Vue.js and Tailwind Stack in Laravel on an Amazon Linux 2 Instance

Hello everyone, this is Kyle from Geekfeed! Today we’re going to take a look at how to get started with Vue.js and Tailwind in Laravel using an Amazon Linux 2 ec2 instance.

 

Getting Started

First, the only thing you need to have ready before you start is an ec2 instance running Amazon Linux 2. After that, shell into the server and access the terminal.

For more information on making your own ec2 instance, check out Amazon Web Service’s page on the topic: https://aws.amazon.com/ec2

to begin, let’s log in as a super user:

Installing PHP 8

The first thing we need to do is install PHP. You can do so with the steps written below:

1. Installing Necessary Repositories

2. Preparing for the download

3. Installing PHP 8 and Relevant Packages

Finally, we can check that PHP is properly installed with the following command:

Installing Composer

After installing PHP, we need to install composer: the package that allows us to install Laravel itself.

4. Downloading the Repo

5. Adding composer to PATH

Once again, we’ll confirm the installation is successful by running a test command:

Installing Apache

Apache is the package that will run the actual server we use to host the website. You can install it like this:

6. Installing Apache

7. Enabling the Httpd Daemon

Installing Laravel & Setting Up the Server

Finally, we can begin to make the directory for our project. We can make a new directory and install Laravel into that directory using composer. Then, we’ll recursively edit the permissions on that directory to allow apache to read and edit the files within.

8. Installing Laravel

9. Setting Chown & Chmod Permissions

※ These permissions are meant for practice and development use only.

10. Editing httpd.conf

Now we’ll edit the Apache settings to direct traffic to our Laravel directory. Use vim to open the httpd.conf file, then edit the settings in the file like the example below. Make sure to add the IP address of your ec2 instance.

11. Commenting out welcome.conf

Now we need to disable the default apache page. We can do so by commenting out each line of the welcome.conf file using the pound sign.

12. Starting Httpd and Php-fpm

Now just a few more settings and we should be good to go!

At this point, you should be able to visit the website yourself using your ec2 instance’s IP address to check if everything is working properly.

Adding Node and Vue

With our server up and running, we can begin to add to it. Let’s start with node, the package manager we’ll use to download Vue.js.

13. Installing Node Version Manager & Node

14. Installing Vue

Now, we’ll install Vue.js itself.

If an error occurs, just try running “npm run dev” one more time.

Adding in Tailwind

Finally, we’ll add tailwind, completing our front-end stack.

15. Installing Tailwind

16. Editing the Webpack

17. Editing app.css

Now, run the following command, and add the lines below to the top of your app.css

18. Adding app.css to your blade files

Great! Now everything should be in working order. The last thing to do is to add the following link to any files that need to use tailwind:

This will work like any normal stylesheet, allowing you to use tailwind classes like normal CSS.

Conclusion

Vue and Tailwind are both great technologies that help modern web designers build robust applications.

I hope this blog helps you to build your own projects using Laravel, Vue.js, and Tailwind.

 

 

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
サイト管理者
サイト管理者
株式会社ギークフィードのサイト編集担当者です。 弊社へのお問い合わせ・質問は、お問い合わせページからお願いいたします。

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ