How to Install SSL Certificate in XAMPP For Local Development?

  • Riju
    Riju Ghosh
  • sundew
    5 min.read
  • sundew
    June 27th, 2025
  • Technology
sundew

Setting up SSL in XAMPP ensures your local development environment mimics real-world, secure HTTPS deployments. Learning how to install SSL certificate in XAMPP is a key step to building secure web applications in a local environment. This isn’t just a best practice but often a prerequisite for enabling critical functionalities. Without HTTPS, many modern web features such as APIs, service workers, and secure cookies won’t function as intended, even in a local environment. 

With this guide, you’ll set up HTTPS using either OpenSSL or the easier and trusted mkcert utility, ensuring your development mirrors real-world conditions.

Step-by-Step Guide on How to Install SSL Certificate in XAMPP

There are two straightforward ways to get SSL running in your local XAMPP setup, using the built-in OpenSSL utility or the more user-friendly mkcert tool. Both approaches help you simulate a secure environment for development.

Using OpenSSL utility

Step 1: Create a minimal config file

Step 2: Generate the private key and certificate using the minimal config file

Step 3: Configure Apache to use the certificate

Step 4: Review SSL configuration

Step 5: Verify Apache configuration and check for syntax errors

Step 6: Restart Apache

Using mkcert utility (Recommended)

Step 1: Install mkcert by following the instructions here

Step 2: Generate the certificates

Step 3: Configure Apache to use the generated certificates

Step 4: Review and verify Apache configuration

Step 5: Restart Apache

There are a few browser APIs that require the web page to run in a secure context. For that, we need SSL. Here is how we can configure SSL for Apache in XAMPP. There are two ways to configure the SSL - either using openssl or mkcert

Using OpenSSL utility

This method works properly. However, you won’t be able to see the green padlock icon even after following the steps below. This is intended behavior. To get a green padlock without warnings, you need to add your certificate to the trusted root certificate authorities.

Step 1: Create a minimal config file

Create a new file named openssl_minimal.cnf and add the following content:

Create_a_minimal_config_file

Make sure to replace the placeholder variables with actual values

Save this file in a convenient location, such as C:\xampp\apache\conf\openssl_minimal.cnf

Step 2: Generate the private key and certificate using the minimal config file

2.1 Open terminal and navigate to the OpenSSL directory.

apache_bin

 2.2 Generate a private key. The following command will generate a private key name private.key . Feel free to use any name of your choice.

Generate_a_private_key

2.3 Create a Certificate Signing Request (CSR) file using the minimal config file created earlier. The output file name can be customized.

Certificate_Signing_Request_(CSR)_file

2.4 Generate a self-signed certificate file using the minimal config file. The parameters can be customized.

self_signed_certificate_file

Step 3: Configure Apache to use the certificate

3.1 Copy the generated files to a convenient location inside the Apache folder.

Copy_ generated_files

3.2 Open the httpd-ssl.conf file located in xampp\apache\conf\extra and update the paths.

Configure_apache

The paths are relative to the Apache installation folder.

3.3 Ensure that the following lines are un-commented in the httpd.conf file.

httpd.conf_file

Step 4: Review SSL configuration

Review the VirtualHost setup in the SSL configuration file. Here is a sample of what it might look like.

Review_SSL_configuration

Step 5: Verify Apache configuration and check for syntax errors

5.1 Navigate to xampp\apache\bin

apache_bin

5.2 Check for syntax and other configuration errors using the following command

httpd.exe-t

5.3 If everything is correct you would get the message Syntax OK

Step 6: Restart Apache

Use the XAMPP control panel to restart Apache. Now try accessing localhost via HTTPS. The browser might show a warning about the certificate being self-signed. You may ignore the warning and proceed.

Using mkcert utility (Recommended)

mkcert is a tool to make trusted certificates for local development without any configuration.

Step 1: Install mkcert 

To get started with, first install mkcert by following the instructions here.

Once mkcert is set up, run the below command to install the trusted root store.

Install_mkcert

Step 2: Generate the certificates

mkcert_localhost

The above command will generate two files - localhost.pem and localhost-key.pem

Step 3: Configure Apache to use the generated certificates

3.1 Copy the generated files to a convenient location inside the Apache folder.

copy_the_generated_files_Apache_folder

3.2 Update the httpd-ssl.conf file located in C:\xampp\apache\conf\extra

SSLCertificateFile_Apache

Step 4: Review and verify Apache configuration

Review and verify the Apache configuration using the steps mentioned above (Step 4 and Step 5 of OpenSSL installation).

Step 5: Restart Apache

Restart Apache, and you are good to go. When opened in the browser, the green padlock icon will be visible.

Summing It Up

Now you have two reliable methods to set up HTTPS in your local environment: OpenSSL for a manual approach and mkcert for a quicker, trusted solution. Understanding how to install SSL certificate in XAMPP localhost not only helps you avoid browser security warnings but also ensures that your development environment aligns with modern web standards. 

Secure by default is now the new norm, and that applies to local development too, especially for APIs and full-stack work.

Thoughts and Trends
Across Our Focus Areas

sundew

Blog

React JS vs Angular JS vs. Node JS Which is the best JavaScript framework?

Choosing the right JavaScript framework for creating an incredible web application is the foremost decision of every business owner. It would ultimately help them to provide seamless web experience to their customers.When it comes to developing websites, JavaScript is the most ideal one and a favourite amongst developers. While choosing one of the JavaScript frameworks, there is often a dispute as to whether to choose Angular js, Node.js or React Js. So, before you approach for JavaScript Development, you must know and understand the difference between all the three applications and their features. o understand how JavaScript is becoming more prominent across digital platforms, it’s important to explore its widespread applications beyond just frameworks.Comparison of JavaScript Frameworks: Angular.JS vs Node.JS vs React.JSAngular.JSAngularJS was launched in 2009 by Google. It is an open source client-side web framework. It assists developers to resolve issues in single page web application containing a shell page with multiple views. It works on features like routing, data binding, templates, dependency injection, directives, deep linking, and filters. With a large support community, there can be some best reasons to choose AngularJS•    There is an induction subsystem with inbuilt dependency•    Allows simple routing and angular data binding•    Amazing UX can be built by help of AngularJS•    There can be certain performance issues with DOM basics•    At times the scope of the application can be hard to debug•    As pages embed interactive elements, it surges the page loading timeNode.JSNode JS is built on Chrome V8 JavaScript Engine; it makes use of an event-driven, non-blocking I/O model that makes them simple and efficient. Node.JS package network is the largest biome of open source libraries in the world.Reasons to choose Node.JS•    Node.JS developers write server-side applications in JavaScript•    Coders can scale up applications created in Node.JS in vertical as well as horizontal manners•    Google’s V8 JavaScript engine pile up the code written in JavaScript right into machine code•    It further supports the caching of individual modules•    It is highly extensible•    It follows the asynchronous programming method rather than linear blocking.React.JSReact.JS development is mainly used to find a framework that helps in building a dynamic library with high performance. Used for building amazing user interfaces and also supports rendering performance. It is more like an open-source JavaScript library rather than a framework.Reasons to choose React.JSOut of the several reasons React.JS can be the future of hybrid mobile app, some of the interesting ones are:•    Allows server-side and client-side rendering.•    Simple to learn and implement•    Fully component-based design.•    SEO effective search engine•    Debug JavaScript easilyAngular.JS is a fully introduced framework while React.JS is a library. One has to write less code with React JS as it performs better due to the application of virtual DOM. As React has just started, its community is still growing. Node.js is a JavaScript and its runtime is fast and lightweight. It can be used to create fast and scalable networking applications. With Client-Side data rendering and an upper configuration, React JS is the appropriate choice for all JavaScript framework Developers.

Read More
sundew

Blog

App Designers vs. App Developers

Application Software has taken over the current lifestyle, and most people are familiar with them. These digital assets deliver specific services that upgrade a task's functionality from educational purposes and the spheres of business to another ambit of life. For example, the extensive usage of smartphones and other digital devices in today's age has increased the scope of Application Software and thus enhanced the profession of Application Designers and Application Developers.The making of an Application includes various processes, and App Developers and App Designers synthesize their skills to achieve it. But the vagueness behind their roles and job scopes remains unsettled to this day. In this post, we seek to clarify • Who is an Application Designer?• Who is an Application Developer?• How do App Developers and App Designers differ in their Job Expertise? Who is an Application Designer?There are several procedures required to construct an application. An App designer looks into an Application's aesthetic structure, stretches the design beyond visual elegance, and moulds it according to the business requirements. More than beautifying an application, the App Designers need to consider the scope of the App and bring solutions to establish a diverse layout that suffices the requirements of the targeted audience. An Application Designer needs to have detailed knowledge about programming solutions, the business' Database, Information Architecture, and software development methodology. More than these, the person also needs to understand the vision of the Company they are working for and the users' requirements. Steps of Application Designing• Understanding the Goal - Applications are tools that serve a particular purpose; hence to craft one, the essence behind it needs to be understood by the designers. The Designers need to question their clients regarding the motive of the App, its vision, its preferred appearance, and the details that will serve as its nuances, separating it from the others. A clear understanding of the idea behind an Application is fundamental.  • Research - There are thousands of Applications in the market, and the numbers are always on a hike. To make an application stand out from the rest, detailed research through the market is a must. Application Designers research and analyze the collected information to bring out the best potential of the App, and give a distinctive persona to it. An elaborate research analysis also reveals the necessary implementations that one can add to the Application, which the other apps lack and hence eliminate competition.• Creating a Wireframe - Wireframes are the visual blueprints of an Application's architecture. Designers compose wireframes by including their research information and picturize how the application will appear. For this, tools like Sketch and Adobe XD are used. After creating a particular wireframe, it is modified into an interactive prototype. In the end, the Wireframe is discussed and reviewed by the Clients. • Visual Elements & Supportive IT Resources - Designers determine the visual elements of UX and UI - Fonts, Graphics, etc. They also decide on the Supportive IT resources. They need to consider the changing technologies and find a way to implement those in the App Design to keep the Application updated with the trends. Learn the Difference Between Static & Dynamic WebsiteWho is an App Developer?Application Developers construct the blueprints drawn by the Application Designers. For example, if App Designers are architects, App developers are the engineers who manifest the Application Designs into reality. Application Developers codify the wireframe, and their work structure is entirely technical. Besides constructing the Application, they also need to consider its maintenance and smooth functioning.Finally, designers and developers collaborate to shape an Application into precision. Therefore, good communication is essential to bring out the right aesthetics and seamless operation of the application. The Application developers inscribe the codes via programming languages and do an application module based on the final wireframe compiled by the Designers. After this, the Application Module undergoes a series of testing processes to optimize its functionality. At last, the final Application is sent to the user community to determine its advantages and drawbacks. While this whole process appears to be simple, there are three types of Application Developers to take care of different aspects of App Development • Front-End Application Developers - Front-End Developers operate on the part of the Application that is visible from the User's perspective. They primarily focus on the Application's graphics and layouts. Front- End Application development determines how a user will view and interact with the application. • Back-End Application Developers - Back-End Developers are concerned about the Application's Database design. As Apps require data to function, Back-End Developers are responsible for creating strong Database structures and supporting the Front-End Framework. • Full-Stack Developers - Full-Stack Developers look into the Construction of the Application in a 360 degrees vision. They work both as front-end visual developers and back-end database developers and contribute to the overall Application Development. How App Developers and App Designers differ in their Job Expertise?There is no doubt that both Application Developers and Application Designers share equal importance in creating a successful Application. Designers lay out the patterns and structures that create the framework of an application, while Developers build their codes around these designs. The element of separation between designers and developers are their skills. While both need to have a clear understanding of the aspects of designing and coding, The Designers have to be more artistic, and the Developers need to remain indulged in the technicals.In the matter of scope, App Developers and App Designers are suitably paid according to their experience and skills.  Furthermore, A sound synthesis of ideas between Application Designers and Application Developers creates an App that fully realizes its functionality and operation.Designers sketch the Application, following current trends and increasing the User number. They also make sure to keep the application free from any interaction loopholes. The users are secured with an optimum User Experience—developers, on the other hand, craft the Application structure smoothly and seamlessly. Businesses looking to scale their teams efficiently can also explore staff augmentation benefits as a flexible way to strengthen both design and development resourcesLooking for an enterprise consulting company to help you with App designing and app development? Need a FREE consultation? Write to us at [email protected]

Read More
sundew

Blog

7 Cutting edge Web Design Trends to maximize visibility

While designing a web page every designer needs to refine their creativity in order to grab the attention of the visitors. In a tech-savvy world, a website is the face of a company so it’s important to follow the emerging trends to stay ahead of the competition.  The design can make or break the reputation of the business online. If the website doesn’t attract or leave an impact at the first glance, chances are visitors won’t return to the website and one might lose them forever.A good website design is the primary foundation of success across all industries.  So integrating the latest design trends can deliver the best results possible and make your website appear neat and professional. In fact, applying design thinking methods help create user-centric designs, ensuring your website not only looks great but also delivers meaningful user experiences.The top web design trends that companies and designers are adopting:1.    Carefully crafted typographyIn the battle of grabbing eyeballs, typography is one of the most powerful weapons that one can resort to while planning a website design.   In recent years, the use of serif and sans-serif fonts on the web has broadened to create a dynamic user experience. To keep up with this trend, designers are opting for typography with tons of typefaces not only for laying emphasis but also for creating an aesthetic effect.2.    More creative formattingAs the device resolutions are getting sharper, simplifying the legibility factor is also opening the door for a rise in custom formation and layouts. Developers put their best foot forward in finding ways to create more engaging and creative formatting styles that work. Grid Layout is one such kind of approach which helps in placing multiple elements on a single page as there are several columns in the grid format.  Usually, a responsive Grid view layout has twelve columns which adjust as per the browsers. It allows images and texts to overlap and converge creating a stunning juxtaposition of bitmap and letterform.3.    Brighter colours and Bolder GradientsBold and striking colors are expected to revamp the industry. This may have been continuing for a little while, but this trend is branching out and holding strong since it made a comeback in the last year. Along with a variety of textures, designers are experimenting with brighter colors and bolder gradient shades. Today a number of brands give preference to solid color palettes to draw the optimum attention of the users. In the era of latest technologies, color-rich sites look sharper and elusive on the high-resolution displays.4.    CinemagraphsIncorporating high-quality videos or animations that run on a smooth, continuous loop have become a popular way to enhance visual performance to otherwise static pages. We’ve seen ample of simple designs already. Now, it’s high time to switch for more appealing visual elements. In this High-Definition world, nobody likes blurry images on the websites.  So make your images more stimulating by using SVG (Scalable Vector Graphics). The benefit of using SVG images on websites is that your images’ pixels won’t get tainted when zoomed. The perks of Cinemagraphs are that they are available in all formats like HD, SD, 4K and so on.5.    Micro-interactions on websitesRecently many brands are integrating animations or Emojis into their web pages to draw the viewer’s attention.  These are a part of a marketing strategy, where one can share their feelings through Emojis without actually using words. It feels good to see some Emojis waving around on the screen. These micro-interactions are now getting popular and became a trend in website designing.6.    Custom IllustrationsIllustrations those are eye-catching and tailored to the brand’s appearance, perceived as creative and are more approachable to their customers. While this trend is perfect for businesses that are energetic and has a subtle mix of quirkiness in their approach. Whatever your business deals with, there’s likely an illustration style to match your brand’s identity.7.    Improving Mobile PresenceIn this phase of digital transformation, about 50% of search queries are performed from the mobile devices which point towards making the design of the website mobile friendly. Also, it’s a known fact that Google priorities those sites that are mobile friendly. This obliges all businesses to have mobile-friendly sites to improve SERP and visibility over the internet. Businesses can ensure mobile-friendly behaviour of the website with Lambda Test’s emulators and simulators.Great web designs not only provide better readability and visual impression but it can also set the tone of your brand’s pursuance, evoke emotions and trigger associations. If all these web design elements are blend together, businesses will weave a perfect match for sites that do not want to leave their audience feel apathetic. 

Read More

Thank You!

Excellent!

Successfully subscribed to Sundew Solutions newsletter!

Acknowledged