ERR_CONNECTION_REFUSED Apache Virtual Hosts

Note to self: Whenever creating Virtual Hosts in Apache, don't name your dev site .dev

Name it .lan instead. For some reason browsers are forcing .dev domains to access the web as you will see with the https:// prefix.

Installing Magento 2.2 on Ubuntu 18.04

I'm learning Magento and needed to install Magento 2.2 on Linux; however, it's is a bit trickier than normal, due to Magento 2.2 not supporting php7.2 yet (support for 7.2 will come in Magento 2.3).

You will need to install either 7.0.13–7.0.x or 7.1.x, but these versions are not in the default repositories. You can add a ppa from here.

It's also best to read the guide to set it up here.

Then you can run your php7.1 install

Note: make sure you install 7.1 modules only. The dom module is actually the xml module.

leon@leon:/var/www/html/magento$ sudo apt install php7.1-
php7.1-bcmath     php7.1-dev        php7.1-intl       php7.1-odbc       php7.1-snmp       php7.1-xsl
php7.1-bz2        php7.1-enchant    php7.1-json       php7.1-opcache    php7.1-soap       php7.1-zip
php7.1-cgi        php7.1-fpm        php7.1-ldap       php7.1-pgsql      php7.1-sqlite3    
php7.1-cli        php7.1-gd         php7.1-mapi       php7.1-phpdbg     php7.1-sybase     
php7.1-common     php7.1-gmp        php7.1-mbstring   php7.1-pspell     php7.1-tidy       
php7.1-curl       php7.1-imap       php7.1-mcrypt     php7.1-readline   php7.1-xml        
php7.1-dba        php7.1-interbase  php7.1-mysql      php7.1-recode     php7.1-xmlrpc  

along with an extensive list of php7.1 modules magento uses

bc-math (Magento Commerce only for 2.2.0 - 2.2.3. Magento Commerce and Magento Open Source as of 2.2.4.)
ctype
curl
dom
gd, ImageMagick 6.3.7 (or later) or both
intl
mbstring
mcrypt
hash
openssl
PDO/MySQL
SimpleXML
soap
spl
libxml
xsl
zip
json
iconv

Copy your magento download folder

sudo cp -r magento /var/www/html/

Set the correct ownership

sudo chown -R leon:www-data /var/www/html/

Read this guide carefully. It's wasn't too clear to me which of the two options were for a local dev environment, but I added myself to the www-data group

Note: To add yourself as a primary or secondary group member of www-data, be aware of the difference between the -g and -G flags. For more info about how being a primary group member works, check out this nice article. If you want a really quick explanation, -g gets you primary membership which means everything you create will be assigned the www-data group instead of your default user group. Secondary membership will give you access, but anything you create will still be your default user group. I think primary is best used if you create another user specifically for magento or web dev. This certainly applies if you are working on a dev server, but I prefer to keep things as is, then modify anything I create for magento with chown.

sudo usermod -a -G www-data leon

and confirm it

groups leon

You should see www-data in your groups.

leon : leon adm cdrom sudo dip www-data plugdev lpadmin sambashare

Set ownership and permissions for www-data

cd /var/www/html/magento && sudo find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} + && sudo find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} + && sudo chown -R :www-data . && sudo chmod u+x bin/magento

Note: After installing php extensions, restart apache for changes to take effect.

service apache2 restart

Finally, visit http://localhost/magento/setup

If you get an HTTP ERROR 500 check your apache error.log for problems.

Update: If you have issues with the layout post install, try the following...

Enable mod rewrite

sudo a2enmod rewrite

and in 000-default.conf (apache2 > sites-available), add this before the closing </VirtualHost> tag.

<Directory "/var/www/html">
    AllowOverride  all
</Directory>

AllowOverride all allows access to .htaccess files, which are important to access for Magento. If you found this solution after googling a similar problem, you'll have to replace 000-default.conf with whatever your VH file is running from.

Minimal introduction to WebPack

WebPack is a module bundler.

First setup your project to work with node. In your project root, run

npm init

Install webpack locally foreach project. Note: this is the recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.

npm install --save-dev webpack
npm install --save-dev webpack-cli 

Next create a webpack config file (optional) in the root directory.

touch webpack.config.js

Configure that file (optional). Note: by default this is internally set to production.

module.exports = {
    mode: 'development'
};

Webpack expects ./src/index.js and ./dist/main.js as entry and output points by default. If you need to change this, edit the webpack.config.js and set them up there. See https://webpack.js.org/concepts/ for details.

Change mode: 'production' in webpack.config.js when you want to minimise your project.

Edit your package.json to include webpack in the scripts > build property

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

Make sure your index.html (specified in package.json under main:) or whatever main app file, points to the dist output file.

<script src="dist/main.js"></script>

Export your JavaScript files using the latest ES6 syntax to your default /src/index.js file.

To test your project build, run

npm run build

Note the file created in /dist/main.js.