Enabling SSL on localhost: step-by-step

How to enable self-signed SSL certificate on Localhost (Windows)
Start console, e.g. win prompt, or ConEmu

Console has to be run with Admin rights.


Create alias in Windows vhosts file

Folder, where file resides.

You may have to move vhosts file on your desktop, apply alias code and move it back to its folder.
Otherwise, you may not be allowed to edit vhosts file.


Update your httpd-vhosts.conf file (Apache)

You can find mentioned file in:

Note: my Apache installation location: C:\xampp7327\apache, yours is most likely different.

Entire setup code for your localhost site could be:


Make sure your system knows where openssl config file is.
Type/copy-paste in your console and hit enter.


Go to folder where your openssl.exe is located.
Type/copy-paste in your console and hit enter.

Folder, where file resides.


Generate an RSA-2048 key.

Type to your console and hit enter:


Generate root certificate with key generated above.

Type to your console and hit enter:

You will be prompted to enter some values.
Please enter them all.
They can be fictitious.
I also noticed some errors, when you use spaces/tabs, so rather avoid them.


Trust the root SSL certificate in the local system.

Note: ConEmu must run as Admin, or you would get errors.


Import certificate into Firefox (if you use it).

Chromium based browsers get that cert from Win directory. Firefox needs cert to be imported.

step 1: type into Firefox url input field and hit enter

step 1: privacy search result

step 2: import cert

step 3: where your cert you are importing is located


Generate SSL SAN Certificate With the Root Certificate

SAN stands for: Subject Alternate Name

step 1: create file

… and paste into it:

Note: all [dn] entries must be filled. They can be fictitious. No breaks/spaces in [dn] entries, or you may get errors.


Create a v3.ext file with a list of local SAN domains and paste into it as follows:

Note: [alt_names] contain all your files you want your certificate to service. Make sure you have localhost as well.


Generate private key and certificate-signing request (CSR) for the localhost certificate.


Generate certificate via the root SSL certificate and the CSR created earlier.

 

Restart your browser and i you did everything right, your mysite.net should have SSL cert enabled and working.

 


How to check, if your CA (certification authority) cert was added to Windows.

step 1: select both

step 2: type ‘certmgr’ here and click enter

step 3: select from results

step 4: find you certificate

This will be your cert name you are looking for:

And you’d be looking for it here:

 

step 5: you may want to consider disabling some options, as cert comes with all enabled.


All files that you created doing this:

 

Dots: single, double in filepath

This is shamelessly copied from this StackOverflow post.
I just always have problem finding it, when needed, so I posted it here in my quicklookup.
I hope sourabh does not mind.

 

GULP – installing and use on Windows

Install Gulp

Installation of Gulp on Windows is somewhat … peculiar.
You have to install Gulp globally first, just to simulate symlink in PATH.
Without that symlink, you cannot access Gulp in your console.
You cannot add to PATH, as before you install Gulp, because you have nothing to add to PATH … and after installing Gulp globally, there is no reason to add Gulp to PATH, because it is global.
Madness 😉

Then, you have to install Gulp again (!) locally.
Just use console to go into dir you want to install local Gulp into and use this:

Plugins for concatenation:

If you get this error:

… try this syntax:

Gulpfile or gulp location problem:

If you install gulp in e.g. vendor folder – your node_modules end up in vendor/ – your gulpfile.js must be in same folder and your console should be in that folder as well (cd vendor\) to execute gulp command.

Error: SyntaxError: Unexpected token function

This means you have old Node,js – update here.
Problem is most likely with asynch functions – not supported by Node prior to version 7.6 .
More: here.

 

Run Gulp:

Define files to be concatenated and minified to gulpfile.js

Open console in folder where you have gulpfile.js, e.g. (!!): 

more than one function (!!):

run just one private function:

run default function, if you have just one defined:

 

Gulp file

 

 

A bit more reading on StackOverflow:

https://stackoverflow.com/q/39195128/436443

https://stackoverflow.com/a/34389980/436443

https://stackoverflow.com/a/28503814/436443

https://stackoverflow.com/a/34574537/436443

More about prerequisites for installation:

https://gulpjs.com/docs/en/getting-started/quick-start/

Interesting hands-on reading:

https://css-tricks.com/gulp-for-beginners/#cleaning-up-generated-files-automatically

Or even better ‘eyes-on’ watching 😉

https://www.youtube.com/watch?v=ssG5mziTF3E

 

 

Problem with Chrome auto-fill

If you ever had a problem with Chrome auto-fill and this StackOverflow post did not help – maybe this will work for you.

I am adding solution here, since they locked that post in Stack Overflow.

Page will load your defined value, thus preventing Chrome auto-fill from loading.

Then, when user focus input field , JS will remove that defined value and browser will show placeholder with entry caret blinking at the beginning of input field – as expected by user.

I use onfocus instead of onclick, as onfocus works every time field is focused by user, also when tab is used.

Important!!!
Make sure your placeholder and value are different.
It seems Chrome compares these and if they are same, Chrome applies auto-fill.

As to fields with type=”password”, it seems it is not needed.
Possibly because if you disrupt autofill at email level, it gives up.
If that does not work, empty value seems to work here as well.

 

Of course this solution will not work for all.
I created it just for my particular need: password reset form, where Chrome was refilling form fields and user was confused, why he/she was not able to reset password, assuming these refills were a valid part of reset procedure.

 

Additionally, this is a workaround.
I wish Google employees stop counting their enormous salaries and spend more time righting their wrongs.
But that is just a dream – Google is too big to give a damn anymore.

 

Non-Laravel Stuff

Problem with Chrome auto-fill

If you ever had a problem with Chrome auto-fill and this StackOverflow post did not help …

See details: here
Installation and Use of Gulp

Installation of Gulp on Windows is somewhat … peculiar.
On Windows, you have to install Gulp twice, globally and then in your local project. Yes, really.

See details: here
Double and single dots in front of path

./, or ../, or../../, or maybe just / 😉

See details: here