Conversation with Merlin [email protected] · Wed Nov 15 2023

how to configure local domain name in mac and run laravel application on that domain.

To configure a local domain name in Mac to run a Laravel application, you would typically need to make adjustments to your web server configuration, as well as set up your hosts file. Here are the general steps:

  1. Configure Web Server (Apache or Nginx)

    • If you're using Apache, you'll need to modify the virtual host configuration file. This is usually located in the /etc/apache2/extra/httpd-vhosts.conf file.
    • If you're using Nginx, you'll need to modify the server block configuration file. This is usually located the /usr/local/etc/nginx/servers/ directory if you're using Homebrew to manage Nginx.

  2. Edit Hosts File

    • Open the hosts file using the terminal with the command sudo nano /etc/hosts.
    • Add an entry that maps your chosen local domain name to your local machine's IP address. For example: 
      127.0.0.1    mylaravelapp.test

  3. Update Laravel Configuration

    • Open the .env file in your Laravel project and ensure that the APP_URL variable is set to the local domain you've configured. For example: 
      APP_URL=http://mylaravelapp.test

  4. Restart Web Server

    • After making these changes, restart your web server using the terminal. For Apache, you can use sudo apachectl graceful, and for Nginx, you can use sudo brew services restart nginx if using Homebrew.

  5. Access Your Laravel Application

    • Once these configurations are in place, you should be able to access your Laravel by entering the local domain name (e.g mylaravelapp.test) in your web browser.

Following these steps should enable you to configure a local domain name for your Laravel application on your Mac. Keep in mind that specific configurations may vary based on your local setup and the versions of software you're using. If you encounter any issues, please refer to the documentation specific to your web server and Laravel for additional guidance.

Installation Meet Laravel Why Laravel? Creating A Laravel Project Initial Configuration Environment Based Configuration Databases & Migrations Directory Configuration Docker Installation Using Sail Sail On macOS Sail On Windows Sail On Linux Choosing Your Sail Services IDE Support Next Steps Laravel The Full Stack Framework Laravel The API Backend Meet Laravel Laravel is a web application framework with expressive, elegant syntax. A web framework provides a structure and starting point for creating your application, allowing you to focus on creating something amazing while we sweat the details. Laravel strives to provide an amazing developer experience while providing powerful features such as thorough dependency injection, an expressive database abstraction layer, queues and scheduled jobs, unit and integration testing, and more. Whether you are new to PHP web frameworks or have years of experience, Laravel is a framework that can grow with you. We'll help you take your first steps as a web developer or give you a boost as you take your expertise to the next level. We can't wait to see what you build. Note New to Laravel? Check out the Laravel Bootcamp for a hands-on tour of the framework while we walk you through building your first Laravel application. Why Laravel? There are a variety of tools and frameworks available to you when building a web application. However, we believe Laravel is the best choice for building modern, full-stack web applications. A Progressive Framework We like to call Laravel a "progressive" framework. By that, we mean that Laravel grows with you. If you're just taking your first steps into web development, Laravel's vast library of documentation, guides, and video tutorials will help you learn the ropes without becoming overwhelmed. If you're a senior developer, Laravel gives you robust tools for dependency injection, unit testing, queues, real-time events, and more. Laravel is fine-tuned for building professional web applications and ready to handle enterprise work loads. A Scalable Framework Laravel is incredibly scalable. Thanks to the scaling-friendly nature of PHP and Laravel's built-in support for fast, distributed cache systems like Redis, horizontal scaling with Laravel is a breeze. In fact, Laravel applications have been easily scaled to handle hundreds of millions of requests per month. Need extreme scaling? Platforms like Laravel Vapor allow you to run your Laravel application at nearly limitless scale on AWS's latest serverless technology. A Community Framework Laravel combines the best packages in the PHP ecosystem to offer the most robust and developer friendly framework available. In addition, thousands of talented developers from around the world have contributed to the framework. Who knows, maybe you'll even become a Laravel contributor. Creating A Laravel Project Before creating your first Laravel project, make sure that your local machine has PHP and Composer installed. If you are developing on macOS, PHP and Composer can be installed in minutes via Laravel Herd. In addition, we recommend installing Node and NPM. After you have installed PHP and Composer, you may create a new Laravel project via Composer's create-project command: composer create-project laravel/laravel example-app Once the project has been created, start Laravel's local development server using Laravel Artisan's serve command: cd example-appphp artisan serve Once you have started the Artisan development server, your application will be accessible in your web browser at http://localhost:8000. Next, you're ready to start taking your next steps into the Laravel ecosystem. Of course, you may also want to configure a database. Note If you would like a head start when developing your Laravel application, consider using one of our starter kits. Laravel's starter kits provide backend and frontend authentication scaffolding for your new Laravel application. Initial Configuration All of the configuration files for the Lara

laravel.com

For new Laravel users, its often difficult to setup server and domain properly, especially with /public folder. This article will explain and try to help. Why /public is needed at all? By default, web-server is loading index.php file, right? So why Laravel framework couldnt just have that index file in main folder? Why /public? The answer is security. Folder name explains it all its the only folder that would be publicly accessible from the browser. So anything you put in /public, like /public/css, /public/js or /public/images/products those will be accessible just by typing URL in the browser. At the same time, its protecting all the other folders which are one level above. So /app, /config, /resources folders will not be available to load from the browser, no matter what URL someone puts in. In other words, all your application logic is hidden from browser, and you allow only /public folder to be accessible. How to configure /public folder? Another mistake from new Laravel developers I see, is that they load URL like this: http://localhost/project1/public so public is a part of the URL. It is possible and may even work locally, but can you imagine someone typing that as part of real URL? Can you imagine writing facebook.com/public instead of facebook.com in the browser? So, our goal is that your domain would automatically load /public folder somehow. And that depends on web-server you are using. Most likely you are using Apache or Nginx. Even if you are using some web-server bundle like XAMPP/MAMP or virtual server like Laravel Homestead, underneath they still have one or another Apache or Nginx. So you need to configure domains (or they are sometimes called sites) in those web-servers. It will also help you to work with multiple projects. So you wouldnt just have multiple folders and load like localhost/project1 and localhost/project2, but will have project1.test and project2.test as proper domains working locally. Whenever youre loading domain like project1.test, it needs to be configured in Apache or Nginx configuration files. Locations and names of those files will vary depending on your operating system. For Apache, file name may be in sites-enabled folder, for example /etc/apache2/sites-enabled/000-default.conf or, for MAMP, it would be /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf where you need this: <VirtualHost *:80> ServerAdmin [email protected] DocumentRoot "/Applications/MAMP/htdocs/project1/public" ServerName project1.test </VirtualHost> See that /public part at the end of DocumentRoot? Thats exactly how to point your domain to that public folder. Notice: after editing that configuration file, dont forget to restart Apache server. For Nginx server, configuration file will be somewhere like /etc/nginx/sites-enabled/project1.test, with this code: server { listen 80; listen [::]:80; . . . root /var/www/html/project1/public; index index.php index.html index.htm index.nginx-debian.html; server_name example.com www.example.com; location / { try_files $uri $uri/ /index.php?$query_string; } . . . } In this case, you need to look at root variable and put /public at the end of it. Also, restart the server. Dont forget .env file Another thing I see often is that people leave .env file with default values after installation, except for changing DB credentials. What you need to set up is APP_URL variable. In your case, it should be your domain name with full prefix http:// or https://. APP_URL=http://project1.test Ive written an article about it with a bit more details Why its important to change APP_URL in Laravel .env file Other articles may be useful: How to use Laravel .env and .env.example files? How to add new .env variable, so teammates would notice? How to Deploy Laravel Projects to Live Server: The Ultimate Guide What Server is Needed to Deploy Laravel Projects Finally, if it sounds too complicated, there are tools to help setting up servers quicker, Im a big fan of Laravel Forge heres a vide

blog.quickadminpanel.com

Laravel's simplicity and MVC architecture make it an ideal PHP framework for building web applications. In this article, I will show you how to set up Laravel on your Windows machine and configure it to run on a custom domain name.This guide is best suited for a beginner trying to get Laravel up and running quickly and easily. But even as an advanced programmer, you'll likely find fresh insights into how you can simplify the process of configuring a Laravel project. So let's dive in!How to Install and Start XamppXampp is an open-source tool that allows you to run an Apache server, MySQL database, and other tools from a single interface for development. You can download and install Xampp from here: https://www.apachefriends.org/download.html.First, launch your Xampp Interface and start your Apache and MySQL Server.The Xampp InterfaceNext, click on Explorer to launch your Xampp htdocs folder. Delete the files and folders inside the folder. Now you can setup your Laravel application.How to Set Up LaravelInside the htdocs folder, you can clone your existing Laravel application or set up a fresh installation using composer create-project laravel/laravel example-app. In this case, "example-app" is your project name but you can replace it with your preferred name for the project.The Laravel Directory Structure on htdocsOpen the htdocs folder in your preferred code editor. I will be using VScode for my example.Replace the APP_URL value in the .env file of your Laravel project with the custom domain name:APP_URL=https://project.testYou can replace "project.test" with your prefered test domain name.How to Configure Your Hosts FileIn your Windows file explorer, navigate to the "hosts" file located at C:\Windows\System32\drivers\etc\hosts and open it with VSCode (or whatever editor you're using). I'd advise that you use VSCode with admin privileges.etc directory containing the hosts file and other filesAdd the following line to the file:127.0.0.1 project.testThis will map the hostname "project.test" to the local IP address "127.0.0.1".Now, if you launch your Apache server and visit project.test on your browser, it loads the "index of" project.Index of' The Laravel Directory on BrowserThis is because for your Laravel application to work, it needs to load the public folder. If you can load public.test/public on your browser, you will be redirected to the Laravel project. To fix that, you can configure the Apache root directory.How to Configure Your Apache Root DirectoryIn your Windows file explorer, navigate to and open the "httpd.conf" file which contains the Apache configuration. It's located at C:\xampp\apache\conf\httpd.conf . You should also use VSCode with admin privileges in this case.Right below # Virtual hosts, add the following:<VirtualHost *:80> ServerName project.test DocumentRoot "C:/xampp/htdocs/project/public" <Directory "C:/xampp/htdocs/project/public"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Require all granted </Directory> </VirtualHost>Note: Replace project.test with your custom domain name and C:/xampp/htdocs/project/public with the path to your public folder.Stop and restart the Apache server from your Xampp interface and try visiting "http://project.test" on your browser to see the Laravel project's homepage.ConclusionYou can have multiple projects with their own custom domains by setting them up in different directories inside the htdocs directory and specifying their individual Apache configurations.If this article was helpful to you. Share it with friends or drop me a shout out on Twitter @adebowale1st. Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freecodecamp.org

How to configure SSL on this domain?

To configure SSL for a local domain on MacOS, you can follow these general steps:

  1. Create the Root Certificate Authority (Root CA)

    • As SSL certificates for local development don't need to be purchased, you'll need to set up the Root CA. This allows browsers to recognize the SSL certificates as valid during the handshake process.
    • You can generate a Root CA using OpenSSL. Here's an example command to create a Root CA: openssl genrsa -out rootCA.key 2048 openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

  2. Create SSL Certificate for the Local Domain

    • After creating the Root CA, you can issue an SSL certificate for your local domain.
    • Use OpenSSL to create a certificate signing request (CSR) for your local domain: 
      openssl req -new -key mydomain.key -out mydomain.csr
    • Then, sign the CSR using the Root CA key and certificate: 
      openssl x509 -req -in mydomain.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out mydomain.crt -days 825 -sha256

  3. Import Root CA into Keychain

    • Once you have your Root CA and SSL certificate, you'll need to import the Root CA into the MacOS Keychain. This will allow the SSL certificate to be recognized as valid by the system.
    • Double-click on the rootCA.pem file and it should open in Keychain Access. Then, you can set the trust settings to "Always Trust" for this certificate.

  4. Configure Nginx Apache

    • If you're using Nginx or Apache as your web server, you'll need to configure it to use the SSL certificate for your local domain. This includes specifying the path to the SSL certificate and private key in your server configuration file.

  5. Restart Web Server

    • After making these configurations, restart your web server to apply the changes.

It's important to note that these are general steps, and specifics may vary based on your exact requirements and the software versions you're using. Additionally, for production environments, it's crucial to use SSL certificates from trusted certificate authorities. However, for local development, the above steps should enable you to configure SSL for your local domain on MacOS.

Many new web platform features require a connection via https nowadays. So if you want to use and test Service Worker, you need a domain which runs on https and has a valid SSL certificate. If you have a public domain (like .com or .party), your hosting company most likely offers SSL certificates (often free now thanks to Lets Encrypt), which are also easy to install in most cases. But, if you develop, you dont use a public domain. You can either use http://localhost or you can use a local domain (e.g. justmarkup.localhost). If you use localhost you can still test Service Worker, as browsers have whitelisted this, but if you use http://justmarkup.localhost it wont work. You should use .localhost, .test, .example or .invalid for your local domain as they are save to use. Others like .dev used to work fine until some time ago and this may happen to others too, so you should stick to the Reserved Top Level DNS Names. Often localhost is fine for developing, but if you need a subdomain or if your CMS requires you to use a top-level domain you need to set up a valid SSL certificate for this domain. In this article, I will explain how to set up a local domain, how to set up Node.js and a https server, how to configure an OpenSSL certificate and how to ensure browsers consider it as a valid cerfificate. Setting up the domain # If you already know how to do this, jump straight to Setting up a certificate. If not, you first have to edit your hosts file. On MacOS and Linux you can find this file at /etc/hosts and on Windows it can be found at [SystemRoot]\system32\drivers\etc\hosts (if you are using the Linux subsystem it is here: /mnt/c/Windows/System32/drivers/etc/hosts). Open the hosts file and add the following at the end. 127.0.0.1 justmarkup.localhost Replace justmarkup.localhost with your domain of choice. With this in place we can move on and get our SSL certificate. Setting up and installing a certificate # First create a new folder called cert in your project folder. This is where we will save our certificates and keys. If you plan to use git for the project, I recommend adding the cert folder to your .gitignore file. Create the root.cnf # Okay, so first create the file root.cnf with the following content and save it in the cert folder. # OpenSSL configuration for Root CA[ req ]prompt = nostring_mask = default# The size of the keys in bits:default_bits = 2048distinguished_name = req_distinguished_namex509_extensions = x509_ext[ req_distinguished_name ]# Note that the following are in 'reverse order' to what you'd expect to see.countryName = gborganizationName = TestcommonName = Test Root CA[ x509_ext ]basicConstraints=critical,CA:true,pathlen:0keyUsage=critical,keyCertSign,cRLSign You should replace organizationName and commonName with something related to your project and something you will remember lately. Next switch to the command line and go into your cert folder you created before and run: openssl req -x509 -new -keyout root.key -out root.cer -config root.cnf The script will ask for a PEM pass phrase enter something it should be secure and you should remember it. Create the server.cnf # Next, create a file called server.cnf with the following content in the certs folder: # OpenSSL configuration for end-entity cert[ req ]prompt = nostring_mask = default# The size of the keys in bits:default_bits = 2048distinguished_name = req_distinguished_namex509_extensions = x509_ext[ req_distinguished_name ]# Note that the following are in 'reverse order' to what you'd expect to see.countryName = gborganizationName = TestcommonName = localhost[ x509_ext ]keyUsage=critical,digitalSignature,keyAgreementsubjectAltName = @alt_names# Multiple Alternate Names are possible[alt_names]DNS.1 = justmarkup.localhostDNS.2 = justmarkup.test You have to change the following things here. First, change organizationName to the same name you have set in your root.cnf. Next, change DNS.1 to your local domain name. You can also use multiple here by usin

justmarkup.com

ObjectiveThe local domain are helpful to setup the connection between the Frontend and Backend on the development machine. It is also a common solution when the actual address and port is difficult to remember. In this post, I will explain how to set up the local domain and config the SSL certificate on the MacOS laptop.Software requiredIn order to config the local domain name and issue the SSL cert, well need these tools installed:OpensslMacOS Keychains appNginx: for configuring the proxyAdmin accountvi: to edit the host and create the configuration filesThe nginx and vi are just my preference, you can use VSCode, emacs for editor and Apache, HA proxy for the proxy.Create the local domainSetup the domain is the most simple task, you can open the hosts file with the admin privilege.sudo vi /etc/hostsAdd a line for the new domain and map it to 127.0.0.1127.0.0.1 mydomain.localIf you run the server inside a virtual network, for instance by running the proxy in the Virtual box or Docker, then use the IP of the virtual network interface instead.After that, you may flush the DNS cache by using this command:sudo dscacheutil -flushcacheCreate the Root Certificate Authority (Root CA)The SSL in the normal website are issued by a trusted Certificate Authority. However, for the local development, we dont need to purchase a SSL (and we dont own the domain), hence we have to setup the Root CA as well. During the handshake step, the browser checks whether the cert is valid by asking the Root CA about the cert, and if the Root CA doesnt confirm with the browser, the browser marks the site as unsafe.To generate the Root CA, we can use the openssl tool. The steps are:Generate the root CA keyGenerate the root CA certPersonally, I suggest to create a directory to store all the files that are created during this process together, I usually create one in /tmp/ssl for this purpose. All the files we create after this are in the same directory.To start with, we have to create the RootCA configuration file.# fileName: config.conf[req]prompt = nodistinguished_name = req_distinguished_namereq_extensions = v3_req[req_distinguished_name]C = CAST = KitchenerL = ONOU = OrgCN = mydomain.localemailAddress = [email protected][v3_req]basicConstraints = CA:FALSEkeyUsage = nonRepudiation, digitalSignature, keyEncipherment, dataEnciphermentsubjectAltName = @alt_names[alt_names]DNS.1 = mydomain.localDNS.2 = api.mydomain.localDNS.2 = www.mydomain.localPlease modify the content of the file to match with your information and the local domain. The file references and examples can be found from IBM OpenSSL configuraton and OpenSSL documentAfter creating these 2 config files, we can generate the rootCA key and cert with these 2 commandsopenssl genrsa -out rootCA.key 2048openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem -config config.confThe values of each parameters can be altered by different values, such as the number of days can be change to 365, or the algorithm can be set to sha512. For the details of each parameters, checkout the OpenSSL manual.Issue the Self-signed SSL certCreate the ext file in the same directory with the content like below# filename: mydomain.local.extauthoritykeyIdentifier = keyid,issuerbasicConstraints = CA:FALSEkeyUsage = nonRepudiation, digitalSignature, keyEncipherment, dataEnciphermentsubjectAltName = @alt_names[alt_names]DNS.1 = mydomain.localDNS.2 = api.mydomain.localDNS.2 = www.mydomain.localAfter this, we can generate the cert key file and the cert signing request fileopenssl genrsa -out mydomain.local.key 2048openssl req -new -key mydomain.local.key -out mydomain.local.csr -config config.confThe last step is to issue the certopenssl x509 \ -in mydomain.local.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial \ -out mydomain.local.crt -days 1024 -sha256 -extfile mydomain.local.extAfter that, you should have the the cert (and other files) in the temporary directory. We dont need the config file as well

medium.com

2020 Update: I recommend using mkcert to generate local certificates. You can do everything below by just running the commands brew install mkcert and mkcert -install. Keep it simple! This gives you that beautiful green lock in Chrome. I'm assuming you're putting your SSL documents in /etc/ssl, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra. Set up localhost.conf sudo nano /etc/ssl/localhost/localhost.conf Content: [req] default_bits = 1024 distinguished_name = req_distinguished_name req_extensions = v3_req [req_distinguished_name] [v3_req] basicConstraints = CA:FALSE keyUsage = nonRepudiation, digitalSignature, keyEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost Commands Run these commands: sudo openssl genrsa -out /etc/ssl/localhost/localhost.key 2048 sudo openssl rsa -in /etc/ssl/localhost/localhost.key -out /etc/ssl/localhost/localhost.key.rsa If you're changing the domain from localhost then update the variable CN in the following: sudo openssl req -new -key /etc/ssl/localhost/localhost.key.rsa -subj /CN=localhost -out /etc/ssl/localhost/localhost.csr -config /etc/ssl/localhost/localhost.conf I set the certificate to expire in 10 years (3650 days). sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/ssl/localhost/localhost.csr -signkey /etc/ssl/localhost/localhost.key.rsa -out /etc/ssl/localhost/localhost.crt -extfile /etc/ssl/localhost/localhost.conf sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/ssl/localhost/localhost.crt Done. Bonus: BrowserSync works over HTTPS The whole reason I got into this was to get browserSync to work over HTTPS. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command: browserSync.init({ https: { key: "/etc/ssl/localhost/localhost.key", cert: "/etc/ssl/localhost/localhost.crt" }, }); Or in Webpacks (webpack.config.watch.js or webpack.config.js): new BrowserSyncPlugin({ advanced: { browserSync: { https: { key: "/etc/ssl/localhost/localhost.key", cert: "/etc/ssl/localhost/localhost.crt" }, } } }),

gist.github.com