Blog
- Details
While developing web sites/applications locally, to facilitate development, you often use a local host name, such as 127.0.0.1, localhost, site.local, example.test, or sub.company.local. While you can access the site/application using normal HTTP, sometimes the application is configured for secure HTTP i.e. HTTPS or you always want to force HTTPS no matter the environment (dev/qa/prod).
However, ‘made up’ local host names such as example.test, site.local, site.dev etc can not use an external ssl certificate, as they cannot be accessed remotely to verify authenticity by a certificate authority (CA). So typically one would create a self signed certificate. But over time, browsers have restricted the acceptance of self signed certificates, resulting in a less friendly or impossible developer workflow. So the next step would be to add your own CA to your local environment, but that can be tedious and error prone. Luckily, there is a utility which greatly simplifies the process, for linux, macos, and even windows - mkcert
“Using certificates from real certificate authorities (CAs) for development can be dangerous or impossible (for hosts like example.test, localhost or 127.0.0.1), but self-signed certificates cause trust errors. Managing your own CA is the best solution, but usually involves arcane commands, specialized knowledge and manual steps.
mkcert automatically creates and installs a local CA in the system root store, and generates locally-trusted certificates. mkcert does not automatically configure servers to use the certificates, though, that's up to you.”
https://github.com/FiloSottile/mkcert
To create a usable self signed ssl certificate using Windows, Nginx, and Laragon (a portable LAMP stack):
Download the latest mkcert for your OS (Windows in this case)
https://github.com/FiloSottile/mkcert/releases
mkcert-v1.4.4-windows-amd64.exe
Copy the file to a new dir
C:/laragon/bin/mkcert/
And rename to a generic mkcert.exe
Note, assuming you installed/extracted Laragon to C:/laragon
In a command window with Administrator Privileges (Run as Admin)
> cd C:\laragon\etc\ssl
Specify the destination of the CA cert
> mkdir C:\laragon\etc\ssl\mkcert
Set an temporary environment variable for mkcert to read
> setx CAROOT "C:\laragon\etc\ssl\mkcert"
By default, it would have be in you user directory
> C:\Users\<user>\AppData\Local\mkcert
Close the command window and re-open it so the environment variable can be read
In linux you might source ~/.bash_profile .. but windows
Test that the environment variable is indeed set
> cd C:\laragon\etc\ssl\
> echo %CAROOT%
C:\laragon\etc\ssl\mkcert
Create and install your local CA
> ..\..\bin\mkcert\mkcert -install
You will be shown a prompt warning you that you are doing what you want to do, add a local CA
After reading, Click Yes
Note, by default the CA key will be named rootCA-key.pem and the CA cert will be named rootCA.pem.
The names are hard coded in the project source main.go, if you want to compile the project.
You can view the CA via the Certificate Manager
Start Menu -> Run -> certmgr
Or
Laragon -> Menu -> Nginx -> Certificate Manager
Note, while Laragon does have its own CA which it can add, it does not seem to work with recent browser updates.
Click to Trusted Root Certification Authority -> Certificates
Scroll to find mkcert Computer\User@Computer>
Note, you can delete it if you want by Right Clicking on and select Delete
Now generate the SSL certificate, which will be signed by the CA you just added
> cd C:\laragon\etc\ssl
> ..\..\bin\mkcert\mkcert site.local "*.site.local"
Would create the SSL key and cert in C:\laragon\etc\ssl as
site.local+1-key.pem and site.local+1.pem
Rename the files, or specify names when creating:
> ..\..\bin\mkcert\mkcert -key-file company.localhost.key -cert-file company.localhost.crt company.localhost *.company.localhost
Which would match
company.localhost
site1.company.localhost
site2.company.localhost
Or more generically
> ..\..\bin\mkcert\mkcert -key-file dev.localhost.key -cert-file dev.localhost.crt dev.localhost *.dev.localhost
Which would match
dev.localhost
site1.dev.localhost
site2.dev.localhost
Note, most browsers do not support wildcards 2 levels deep ie don't use just localhost or test
Note, Chrome redirects use of the .dev tld to HTTPS, as Google now owns the official .dev tld. While using any domain name which you override in your /etc/hosts file should be ok, it is best to use a domain you actually own. But if that is not practical, .test, .local, .localhost are the often provided alternatives.
Edit you Nginx or Apache config to add the SSL cert and key, and reload
Using the default website in Laragon as a working example
C:\laragon\etc\nginx\sites-enabled\00-default.conf
listen 8443;
Server_name site1.dev.localhost;
# Enable SSL
ssl_certificate "C:/laragon/etc/ssl/dev.localhost.crt";
ssl_certificate_key "C:/laragon/etc/ssl/dev.localhost.key";
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
ssl_prefer_server_ciphers on;
Note, if you are running another service on port 443, so choose another port, such as 8443.
Assuming you have added your local host name to /etc/hosts or
C:\Windows\system32\drivers\etc\hosts
127.0.0.1 site1.dev.localhost
Viewing https://site1.dev.localhost
Should result in a valid SSL cert.
Enjoy your HTTPS, and develop away.
To install reinstall on a computer, or reinstall after deleting the mkcert CA
Copy the full Laragon dir, or the rootCA.pem at least
Set an temporary environment variable for mkcert to read
> setx CAROOT "C:\laragon\etc\ssl\mkcert"
Close the command window, re-open
Create and install your local CA
> ..\..\bin\mkcert\mkcert -install
FireFox
Mkcert auto installs into chromium based browsers.
For FireFox, there are a few extra steps.
View where mkcert installed the CA certificate
> mkcert -CAROOT
in FireFox url, type in about:preferences#privacy
Filter options to ‘certificates’
click View Certificates -> Authorities -> Import
Select the rootCA.pem file, in the directory listed by the prior mkcert -CAROOT
The above used to be sufficient, for newer FireFox versions >= 112
There is an extra step to take
Within the certificate list, find the imported cert in the list; it will be in the middle listed under ‘mkcert’
Now click the Edit Trust button, and check ‘enable for websites’
Re-enjoy your HTTPS, and develop away.
-End of Document-
Thanks for reading
- Details
When using git, overtime, your local copies of branches can grow and become burdensome to search through. While you could manually delete 'old' branches, some of those branches may still be active eg not merged in yet. It would be nice to have a bash script which would find merged branches older than N days and delete them.
First, list branches merged
> git branch --merged
# https://git-scm.com/docs/git
Source: GitHub Gist
- Details
Instead of using console.logs, WebStorm can be used to debug your development builds of your React app. You can set breakpoints, and inspect your apps in real-time, greatly expediting and simplifying your debug experience.
WebStorm is an integrated development environment for JavaScript and related technologies. Like other JetBrains IDEs, it makes your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease.
source: https://www.jetbrains.com/webstorm/
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. React is used to create modular user interfaces. It promotes the development of reusable UI components that display dynamic data.
source: https://www.geeksforgeeks.org/react-js-introduction-working/
source: https://react.dev
How To:
Open WebStorm, configure a JavaScript debugger
Run -> Edit Configurations
or
Click the drop down near the run/debug icons, select Edit Configurations
Add a new configuration, click the + button
Choose JavaScript Debug
Change the url to match your development environment, often localhost:3000
Save
Click the Debug icon, the green bug button, next to the green play button
WebStorm by default will launch a new Chrome instance
However, it will not have any of your plugins.
You can re-install all your plugins, or better, edit the browser configuration in WebStorm
Customize browser config
File -> Settings -> Tools -> Web Browsers and Preview
Edit Chrome
Enable Use custom user data dictionary, and past in the path to your Chrome user data directory
Windows %LOCALAPPDATA%\Google\Chrome\User Data
Mac OSX ~/Library/Application Support/Google/Chrome
Linux ~/.config/google-chrome
source: https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#Windows
Additional information from WebStorm
source: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
-End of Document-
Thanks for reading
- Details
If you are using Windows, or other OSes which have antivirus/malware scanners installed such as Windows Defender, you can increase the responsiveness and decrease the time taken for your code installs, transpiles, complies, etc by simply excluding your code from their scans.
Best practice, keep your versioned code in a common directory, such as
C:/Users/[user]/My Documents/ado/[repo-name]
or
C:/dev/git/[repo-name]
And then simply exclude that directory from your antivirus/malware scanner(s).
An example for Windows Defender on Windows 10
After excluding your code directory, code installs such as npm, composer, nuget, maven, etc will not take as long and use much less resources eg cpu, disk i/o.
-End of Document-
Thanks for reading