Magento 2 Grunt problems - gruntjs

I'm getting slightly confused with grunt and magento 2. Should I be using Grunt on the server or on my local machine? New to grunt so any pointers would be greatly appreciated.

Local machine. You don't need to run it in production, because you should be running setup:static-content:deploy with the Magento CLI when deploying to production, which will compile all static content for you.
For development, Magento 2 provides a Gruntfile.js.sample and a package.json.sample for local development. You should rename them to Gruntfile.js and package.json, and then install the dependencies with npm install. As long as you have grunt installed, you should be able to then run the grunt commands to compile your code while you are developing. You can see more info and the grunt commands here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
You should also make sure that you are running your local development environment in "developer mode": http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-mode.html#change-to-developer-mode

Grunt should be used locally and staging, whenever you have the application in developer mode. In production mode (live site) it shouldn't be used.

Related

Why is webpack encore required only in dev

I'm currently configuring some docker images for a symfony 5 project and trying to deal with the production build. Doing so, I noticed that webpack encore is installed only on dev mode, as advised on this official documentation : https://symfony.com/doc/current/frontend/encore/installation.html :
yarn add #symfony/webpack-encore --dev
However, this doesn't make sense to me, since even in production, we are supposed to build the assets :
yarn encore production
Does anyone have clues about this ?
Thank you
The Symfony docs on How Do I Deploy My Encore Assets? provide two important things to remember when deploying assets:
1) Compile Assets for Production:
$ ./node_modules/.bin/encore production
Now the important part:
But, what server should you run this command on? That depends on how you deploy. For example, you could execute this locally (or on a build server), and use rsync or something else to transfer the generated files to your production server. Or, you could put your files on your production server first (e.g. via git pull) and then run this command on production (ideally, before traffic hits your code). In this case, you’ll need to install Node.js on your production server.
And the second important thing:
2) Only Deploy the Built Assets
The only files that need to be deployed to your production servers are the final, built assets (e.g. the public/build directory). You do not need to install Node.js, deploy webpack.config.js, the node_modules directory or even your source asset files, unless you plan on running encore production on your production machine. Once your assets are built, these are the only thing that need to live on the production server.
Simply put, in the production environment you only need the generated assets (usually /public/build directory content). In a simple scenario when you only need to load compiled Javascript and CSS files the Webpack is not used at runtime.
A possible solution how to deploy a Symfony application & assets
When deploying a Symfony app manually (without CI/CD) the following steps can be performed on the local machine or in a Docker container (assumes Symfony 4/5):
Export the source code from GIT repository with git-archive, e.g.: git archive --prefix=myApp/ HEAD | tar -xC /tmp/¹
Go to exported source code: cd /tmp/myApp
Install Symfony & other PHP vendors (see also the Symfony docs): composer install --no-dev --optimize-autoloader
Install YARN/NPM vendors (they'll be required to generate assets with Webpack): yarn install
Create production assets: yarn build (or yarn encore production)
(Install Symfony assets if needed: bin/console assets:install)
Now the code is ready to rsync it to the production server. You may exclude or delete the /node_modules, /var and even /assets directories and webpack.config.js (probably package.json & yarn.lock won't be needed either -- didn't tested it!) and run e.g.: rsync --archive --compress --delete . <myProductionServer>:<app/target/path/>
Resources on Symfony deployment:
How to Deploy a Symfony Application (Symfony docs)
How Do I Deploy My Encore Assets? (Symfony Frontend FAQ)
Do I Need to Install Node.js on My Production Server? (Symfony Frontend FAQ)
Production Build & Deployment (SymfonyCast)
¹ Untars on the fly the archived GIT repository into the /tmp/myApp directory instead of into a TAR archive. Don't miss the leading / in the --prefix flag! git-archive docs.

How to create production stability drupal 8 project using composer?

I've been getting to drupal and recently found out about composer. I use the following command to create a dev drupal instance:
composer create-project drupal-composer/drupal-project:~8.x-dev <folder-name> --stability dev --no-interaction
I was wondering what the package name is for the stable release of drupal.
Thank you.
You shouldn't need to change anything about your core build, both development and production will be running the current build of drupal/core. But modules like Devel or Stage File Proxy can be added to the require-dev section in your composer.json and installed while doing development and kept out of the build on production.
Hopefully this link will help: https://www.drupal.org/docs/8/update/update-core-via-composer#update-drupal-8-core
The very last part about Production environments says to run composer install --no-dev to remove any dev dependencies from the build.

WP-CLI installation over composer

I'm working on a wordpress skeleton for practice. I've got a Composer project and installed the wp-cli/wp-cli dependency.
I want to create and run custom tasks with this wp-cli, for example to download the core of WordPress into this project. This because I'm not putting the core of wordpress into my git repository.
Because I have installed the wp-cli/wp-cli dependency only in my project and not globally over my local machine, I can't run the wp ... commands a normal terminal.
For my own research, I found out that I can use the Command Line Tool Support plugin in my IntelliJ IDE. With this plugin I can use the composer dependency to run commands with the wp-cli. I don't think this is the right solution, because everyone might have a different IDE and/or operating system.
How can I run wp-cli commands over the installation over Composer?
Instead of running commands with /vendor/bin/wp ..... I found out I have to replace the / with a \.
To run commands from this binary, this syntax should be used like:
vendor\bin\wp ...

Why does grunt allow global installations?

I've installed both the grunt-cli and grunt globally using the -g option.
However when I try and run grunt I get this error:
grunt --gruntfile /Users/a/root/config/Gruntfile.js
grunt-cli: The grunt command line interface. (v0.1.13)
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
This is confusing as it seems to say that you are suppose to do a local install.
It seems contradictory actually. I clearly have a grunt file in place.
Grunt-cli is installed globally so that the grunt command is available to be run from any location on your system. Without the global installation, you would need to rely on somewhat abstract methods of running local grunt installs (npm run-script and friends), which are clunky for this use.
The entire point of the global install is only to load and run a local Gruntfile.js using the locally installed version of Grunt. The error message indicates this:
either a Gruntfile wasn't found or grunt hasn't been installed locally to your project.
In other words, to run Grunt, you need to create a Gruntfile.js and you must have a local copy of Grunt installed to your project alongside the file. The CLI is just there to kick off the process without troublesome fiddling.

What is the correct option to use Grunt locally and on the production server, --save or --save-dev?

The install page on the Grunt website gives the following suggestion
Grunt and Grunt plugins should be defined as devDependencies in your
project's package.json. This will allow you to install all of your
project's dependencies with a single command: npm install.
I want to use grunt to run some tasks that are specific to local development, e.g.
development: concatenate javascript, but dont minify
production: concatenate and minify javascript
If I install Grunt as a dev dependency, does this mean when I run NPM install on the production server - grunt will not be installed into node modules?
What is the correct option to be able to use Grunt both locally and on the production server?
It doesn't matter if you install Grunt as a dev dependency, it will still be installed when you run npm install.
The scenario where dev dependencies are not installed is when you run npm install <package> because the consensus is you are an end user looking to use (not build/test) the package. However, you can still include the dev dependencies by adding the --dev flag.
You should install grunt with --save-dev. What it does is add a line to your project's package.json. Similar to when you install any other node module with --save-dev. Then, if you run npm install on any machine with the same package.json, all those modules will be downloaded and installed locally, and usable by your project.
As for running different tasks in production and development, I assume you know how to configure grunt to do that.

Resources