How to develop locally a Laravel app using Laragon

Xander 發表於 2022-11-25
Laravel

Source:# How to develop locally a Laravel app using Laragon

In this article I'll show you how to develop locally a new Laravel app using Laragon.

在這篇文章中我將會向你展示如何用Laragon部署一個本地的Laravel專案

What is Laravel?Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
什麼是Laravel?Laravel是一個具有表現力的,優雅的語法的Web應用框架。所有的小事情都已經被框架準備好了,使用者只需要使用去自由創造

In the far 2017 I wrote an article about how to setup Laravel Homestead: the process is not as quick and easy as you can wish but following each step you can end up with a working development environment for Laravel. At that time, Laragon was already 2 years old but I never heard anything about it. And other 2 years should go by before I see the Laragon light.

早在2017年作者就編寫了一篇如何設定 Laravel Homestead的文章,但是搭建的過程並不是非常簡單快速,這時候Largon已經出來2年了,然而這期間作者沒有聽說過 Largon 的任何訊息,直到2年後作者發現並且發現了它的閃光點並且快速體驗一波(於是這篇文章就出現了)。

這種感覺類似JAVAER拿著Eclipse開發了幾年突然發現IDEA的新大陸一樣。

What is Largon?Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.

什麼是Largon?Laragon是一個可移植的、隔離的、快速和強大的通用開發環境,適用於PHP、Node.js、Python、Java、Go和Ruby。

In just a few clicks it will install in your Windows machine everything you need to develop web applications in your local environment: Apache, Nginx, MySql and more (for a full detailed list refer to Laragon page, please)

Largon主頁地址:Laragon - portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.

只需要簡單的點選幾下安裝按鈕就可以安裝你在本地環境下開發Web應用程式所需的一切。包裹Apach、Nginx、NodeJs.....

這裡吐槽一下Largon的圖示有點像是Postgresql 圖示的側面:
How to develop locally a Laravel app using Laragon
How to develop locally a Laravel app using Laragon
為啥老外都喜歡 Elephant?

題外話:這裡扯一下題外話整點科普,大象是迄今為止被證明的唯一一種透過額外的p53基因來抵禦癌症的動物,也就意味著大象無論活多久時間,他的身體器官一直都是十分健康的,而大象的死亡看上去沒來由的突然倒下其實是壽命到頭了,和我們人類中健康並且長壽的人壽命到了盡頭去世是類似的,只是非常單純的壽命到了盡頭。所以近幾年醫學界在嘗試把大象的基因移植到人身上,企圖對抗癌症。
感興趣可以看看這篇文章:大象很少得癌是因為它們的細胞會自殺? - 紐約時報中文網 (nytimes.com)

閒扯到此結束,我們接著翻譯:

Unfortunately, Laragon is available only on Windows. if you use a Linux box and you wish to take a look at this wonderful tool, you can use one of these packages to run Windows software on Linux

不幸的是Larragon 是一個純Windows應用,不支援Mac或者Linux,如果想要在Linux執行,則需要安裝GNU,也就是在Linux上模擬Windows的虛擬機器,Ps:我覺得沒啥必要。。。。。。

I want to show how easy it can be start to develop a new Laravel application using Laragon, and how to add Bootstrap to it

作者將會展示如何使用Laragon開發一個新的Laravel應用程式,以及如何在其中新增Bootstrap。

注意最新版的Largon已經不需要手動配置NodeJs和Bootstrap,真正的開箱即用。

Step 1: install Laragon

Go to Laragon download page, download the latest version then just run the installer: _Next_, _Next_, _Next_...
Laragon starts instantly and I recommend to set it up to run when Windows starts.

Winodws系統進入到官方網址:Laragon download page 安裝即可,個人建議安裝完整版,感興趣可以安裝便攜版本。

How to develop locally a Laravel app using Laragon

Step 2: create a Laravel application

Just a right click on the Laragon window or on the Laragon tray icon to open a rich menu: just click on Quick app->Laravel

建立一個Laravel專案,只需要右鍵點選Largon的圖示,然後選中Quick app的選單,之後新建Laravel專案即可

How to develop locally a Laravel app using Laragon

由於某種神秘力量存在,在國內的環境下下載框架的相關包比較慢。所以我們可以手動切換到國內的映象倉庫。

composer更換為國內映象(laragon自帶composer)
國內:composer config -g repo.packagist composer https://packagist.phpcomposer...
或者換成阿里有的:composer config -g repo.packagist composer https://mirrors.aliyun.com/co...

How to develop locally a Laravel app using Laragon

嘗試多次之後,把Laravel框架專案成功初始化。

How to develop locally a Laravel app using Laragon

訪問 http://localhost/ (預設80埠)可以看到相關的頁面。

Sometimes, in Windows the command prompt seems to stuck, with a blinking cursor in a black desert: if this is the case click on the Laravel tray icon and this should just fix the issue. Otherwise reload Laragon.

有時在Windows中命令提示符似乎被卡住了,在一個黑色的方框中閃爍著游標:如果是這種情況,點選Laravel的托盤圖示,這應該正好解決這個問題。否則,重新載入Laragon應用(或者重啟電腦嘗試)。

If you go to C:\laragon\etc\apache2\sites-enabled folder, you will see that Laragon has created a new configuration file called auto.laraone.test.conf. In this file is defined the Virtual Host for your new application. You can take a look just to see how Laragon works.

如果你去C:\laragon\etc\apache2\sites-enabled 資料夾,你會看到Laragon建立了一個名為auto.laraone.test.conf的新配置檔案。在此檔案中定義了新應用程式的虛擬主機。你可以看看拉拉貢是如何工作的。

我們可以進入到作者所說的路徑檢視對應的,當然這裡個人把Largon安裝到別的磁碟,所以我的電腦路徑是:E:\laragon\etc\apache2\sites-enabled

這裡說一下快速找資料夾的技巧:使用 Wox + everything,或者在EveryThing 裡面直接像是下面那樣搜尋:
How to develop locally a Laravel app using Laragon

進入到頁面之後,可以看到我們使用Largon建立的專案都有對應的自動配置管理,這裡選擇觀察auto.test.test.conf的內容,具體的內容如下:

<VirtualHost *:80> 
    DocumentRoot "E:/laragon/www/test/public"
    ServerName test.test
    ServerAlias *.test.test
    <Directory "E:/laragon/www/test/public">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

# If you want to use SSL, enable it by going to Menu > Apache > SSL > Enabled

Step 3: install node_modules

Now Laravel is already installed and ready to start but I want to use Bootstrap and to install it I need to install npm first.

現在Laravel 專案已經新建好了,Largon也可以正常執行,現在我們想要加入NodeJs到Laravel中輔助開發。

The Windows command prompt should already be in your new application directory: if this is not the case, move there manually or just open a new command prompt in C:\laragon\www\laraone directory and type

上面這段話的簡單理解是,我們可以使用Largon的命令列工具,進入到新建的Laravel根路徑裡面使用npm intall命令安裝相關的modules,注意可以不需要本地具備NodeJs環境,因為Largon裡面內建了當前版本對應的最新的NodeJs。

為了驗證這個說法,我們可以到Largon的bin目錄檢視內建的“元件”:

How to develop locally a Laravel app using Laragon

然後是按照上面的討論,執行下面的命令即可:

npm install --no-bin-links

How to develop locally a Laravel app using Laragon

E:\laragon\www\start
λ npm install --no-bin-links

added 27 packages, and audited 28 packages in 10s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.18.0 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g [email protected] to update!
npm notice
This installs node_modules in your application

這在應用程式就成功安裝了node_modules。

Step 4: fix package.json

To install Bootstrap we just need to type some more commands in the command prompt:

安裝Bootstrap我們只需要在命令提示符中再輸入一些命令。

a) composer require laravel/ui: it can takes some time
b) php artisan ui bootstrap : this will actually install bootstrap
c) as required, run npm install && npm run dev

a) 使用Largon的命令列工具進入到專案根目錄,在Laravel專案的根路徑執行composer require laravel/ui ,這可能需要一些時間 。
b) php artisan ui bootstrap : 這將實際安裝bootstrap 。
c) 根據需要, 執行 npm install && npm run dev

That's all! Now Bootstrap is installed and all its stuff is in
C:\laragon\www\laraone\resources\sass\app.scss and in
C:\laragon\www\laraone\public\css\app.css.
Reload Laragon once ore time and type laraone.test in your browser.
Ready to go to write your code!

以上就是本文的全部內容,現在Bootstrap已經安裝好了,它所有的東西都在C:\laragon\www\laraone\resources\sass\app.scss和在C:\laragon\www\laraone\public\css\app.css。 重新載入Laragon一次,在瀏覽器中輸laraone.test

準備好去寫你的程式碼了!

FInally

Although the article is older, it is generally more applicable.