Back to Course |
Tailwind CSS for Laravel Developers

Deploy Tailwind to Production Server

Your project or feature is now developed and needs to be deployed into the production server.

How do you deploy those compiled CSS and JS files to the production server?

By default, your compiled assets are stored in the /public/build directory, but this directory is also included in your root .gitignore file, so that means you cannot have them in your repository. There are two options from this point.

1. Compile Assets on the Server (recommended)

You're not meant to include compiled files in the repository like you wouldn't have compiled binaries. The repository is for source. The reasoning behind this is that they cannot realistically be reviewed due to their large size and CSS JS minification. That could be exploited as a way to inject malicious code.

First, you need to make sure you have Node.js installed on your server to have an npm command available, preferably the same version as locally.

Then add these commands to your deployment script:

npm install
npm run build

The example of how Laravel Forge deployment script for your application might look like after this addition:

cd /home/forge/example.org
git pull origin $FORGE_SITE_BRANCH
 
$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader
 
npm install
npm run build
 
( flock -w 10 9 || exit 1
echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock
 
if [ -f artisan ]; then
$FORGE_PHP artisan migrate --force
fi

2. Compile Assets on Your Local Machine

Wait, what? That is the opposite we just wrote and a somewhat opinionated way to do that, but it is still a viable option.

Put an exclamation mark before the /public/build entry in your project root directory's .gitignore file.

.gitignore

# ...
/node_modules
/public/build
!/public/build
/public/hot
/public/storage
# ...

Then compile assets using the build command:

npm run build

npm run build window

And commit them to the repository.