❌

Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

Deploy our Spring boot application for free.

In this blog, we are going to deploy out spring boot application with PostgreSQL using to

  • Web site on render.com
  • PostgreSQl on neon.com

Create an Application

We can create application that can interact with html and controller layer of our application. Then, service layer that can interact with Repository layer.

Frontent (Thyme Leaf)

I am going to create html that can integrate with thyme leaf.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<title> first page </title>	
</head>
<body>
	<div>
		<h1>Heading name</h1>
		<p><span th:text="${word}"></span></p> 
	</div>	
	
	<div>
			<h1>list</h1>
			<p><span th:text="${word}"></span></p> 
	</div>
</body>
		
</html>

Create a html in spring boot

Go to template and create our html pages and Go to static from create js and CSS files. I paste above code on the index.html.

Spring boot Controller layer

I create controller class which can map the html with java class.

@Controller
public class ControllerClass {
	
	@GetMapping
	public String getInitialisePage(Model model) {
		String p = "ravana";
		model.addAttribute("word",p);
		return "index";
	}
}

Create a Repository Interface

we are going to do dataBase configuaration and spring JPA here.

Configuration of Database and JPA

Configure the Database and JPA on Application.Properties.

spring.datasource.url =  ${DATASOURCE_URL}
spring.datasource.username= ${DATASOURCE_USERNAME}
spring.datasource.password= ${DATASOURCE_PASSWORD}
spring.datasource.driver-class-name=org.postgresql.Driver

spring.jpa.hibernate.ddl-auto = update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.database-platform= org.hibernate.dialect.PostgreSQLDialect

Now, the database url, userName, password are assigned as Environment variables. So, now we want to assign as in different approach by IDE.

Using Eclipse or Spring tool suit IDE

  • Right click on our project.
  • Run as -> run configurations
  • click the environment and set the name and value.
  • Eg. name = DATASOURCE_URL and value = our jbdc url
  • Eg. name = DATASOURCE_USERNAME and value = our username
  • Eg. name = DATASOURCE_PASSWORD and value = our Password

Create jar file from our project

When we create Spring boot project we have .mvn file. Delete the test related dependency and class.

    ./mvnw clean package
If not work copy this below code. This is work on linux only
      export SPRING_DATASOURCE_URL="jdbc:postgresql://localhost:5432/login"
      export SPRING_USERNAME="postgres"
      export DATASOURCE_PASSWORD="1234"

      //don't be panic as run again to run ./mvnw clean package
      // else give this command
      // remove the test depandancy and delete src/main/test.
      // ./mvnw clean package

Create a docker file

Download docker and docker desktop on our system. Create a file on our project, named as Dockerfile.

     # Use an official Maven image to build the Spring Boot app
     FROM maven:3.8.4-openjdk-17 AS build
    
    # Set the working working directory
    WORKDIR /app
    
    # Copy the pom.xml and install dependencies
    COPY pom.xml .
    RUN mvn dependency:go-offline

    # Copy the source code and build the application
    COPY src ./src
    RUN mvn clean package -DskipTests # This will download the all depandencies
    
    # Use an official OpenJDK image to run the application
    FROM openjdk:17-jdk-slim

    #Set the working directory
    WORKDIR /app

    # Copy the built JAR file from the build stage
    COPY --from=build /app/target/file-name.jar .
      # my fileName is demo-0.0.1-SNAPSHOT so COPY --from=build /app/target/demo-0.0.1-SNAPSHOT.jar
    
    # Expose port 8080
    EXPOSE 8080

    # Specify the command to run the application
    ENTRYPOINT ["java", "-jar", "/app/notes-0.0.1-SNAPSHOT.jar"]
      # change the notes-0.0.1-SNAPSHOT.jar into fileName demo-0.0.1-SNAPSHOT
      # ENTRYPOINT ["java", "-jar", "/app/demo-0.0.1-SNAPSHOT.jar"]
 

Create Docker image

After create docker file. Then run the below command on terminal. It will generate a docker image. Check the image on your docker or not.

  docker build -t demo_deployment .

  docker tag demo-deployment kalaiarasan23/demo-deployment:latest

  docker push kalaiarasan23/demo-deployment:latest

Host our Database

Go to neon.tech, create account we got free 500MB space DB. Now create project and add.

Important is to get the configutation because we will use in application part.

 postgresql://username:password2@ep-shiny-butterfly-a1el75x8-pooler.ap-southeast-1.aws.neon.tech/DB?sslmode=require

    Select the environmental variable on render.com
    DATASOURCE_URL=jdbc:postgresql://ep-shiny-butterfly-a1el75x8-pooler.ap-southeast-1.aws.neon.tech/DB?sslmode=require
    DATASOURCE_USERNAME=username
    DATASOURCE_PASSWORD=password

Host the Web application

Go to render.com and open dashboard -> Click new web services ->click image. Enter the environment variable at last. Deploy our web site and verify the server online or not.

Reference :

Project Title: Personal Portfolio Website

By: Sakthivel
17 August 2024 at 13:19

Objective: Create and host a personal portfolio website using HTML and CSS.


Step 1: Design Selection

  • Objective: Choose a user interface (UI) and user experience (UX) design that aligns with your vision for the portfolio.
  • Action:
    • Searched online for a simple and clean portfolio design template.
    • Selected and saved the design to serve as a foundation for your project.

Step 2: Code Reference and Customization

  • Objective: Obtain a starting point for your HTML and CSS code and customize it to suit your needs.
  • Action:
    • Uploaded the selected design to ChatGPT and requested a sample code.
    • Used the provided code as a reference.
    • Opened the code in Visual Studio Code (VS Code) and began customizing it to reflect your personal information and preferences.
    • Downloaded and included necessary images and emojis, such as your profile photo, ensuring they were all stored in a folder named β€œportfolio.”

Step 3: Code Implementation and Testing

  • Objective: Implement the code and ensure it functions correctly.
  • Action:
    • Edited the HTML and CSS files in VS Code, adapting the layout, text, and images to create a personalized portfolio.
    • Regularly saved changes and previewed the website in your browser to ensure it displayed as intended.
    • Made adjustments and refinements until the portfolio met your satisfaction.

(HTML)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAKTHIVEL | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>SAKTHIVEL <span class="highlight">S</span></h1>
        <p>FullStack Developer</p>
    </header>

    <section class="container">
        <div class="sidebar">
            <img src="profile.jpg" alt="sakthi" style="width:150px; height:150px;">
            <h3>SAKTHIVEL SARAVANAN</h3>
            <div class="contact-info">                
                <a href="https://www.linkedin.com/in/sakthivel-saravanan" target="_blank" style="margin-right: 20px;"><img src="linked-in.svg" alt="LinkedIn" style="width:40px; height:40px;"></a>
                <a href="https://github.com/SakthivelS2001" target="_blank"><img src="github.svg" alt="GitHub" style="width:50px; height:45px;"></a>

            </div>
            <div class="details">
                <p><strong>Phone:</strong> +91 9514552154</p>
                <p><strong>Email:</strong> sakthivelricky@gmail.com</p>
                <p><strong>Location:</strong> Velachery, Chennai</p>
                <a href="resume.pdf" target="_blank" class="download-resume">Download Resume</a>
            </div>
        </div>

        <div class="main-content">
            <section class="about">
                <h2>ABOUT ME</h2>
                <p>I'm Sakthivel, a passionate software developer with a strong foundation in computer science, holding a Bachelor's degree in Computer Science from Sri Sankara Arts and Science College, Kanchipuram. Currently, I'm advancing my expertise with a Master's degree in Information Technology from Arignar Anna Arts and Science College, Cheyyar.</p>
                <p>With a deep interest in front-end development, I have honed my skills in HTML, CSS, and JavaScript, creating user-friendly and visually appealing interfaces. My proficiency in Python, along with a basic understanding of SQL and version control using Git/GitHub, equips me to tackle various programming challenges.</p>
                <p>I thrive in collaborative environments where teamwork and innovation are key. I'm also committed to continuous learning, constantly seeking new ways to improve my skills and stay up-to-date with the latest industry trends.</p>
                <p>In addition to my technical abilities, I'm dedicated to overcoming personal challenges like stage fear, which has made me a more confident and effective communicator.</p>
                <p>Whether you're here to explore my work or discuss potential opportunities, I'm excited to connect and share more about how I can contribute to your projects.</p>
            </section>
            
            <section class="skills">
                <h2>Education & Skills</h2>
                <div class="skill-card">
                    <h3>Post Graduate</h3>
                    <p><b>Master's degree, Information Technology <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>

                </div>
                <div class="skill-card">
                    <h3>Under Graduate</h3>
                    <p><b>Bachelor's degree, Computer Science <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>
                </div>
                <div class="skill-card">
                    <h3>Skills</h3>
                    <p>Python|SQL|HTML|CSS|JAVASCRIPT|Git/Github</p>
                </div>
                <div class="skill-card">
                    <h3>Operating System</h3>
                    <p>Windows | Linux</p>
                </div>
            </section>
        </div>
    </section>
</body>
</html>

(CSS)styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

header .highlight {
    color: orange;
    font-weight: 700;
}

header p {
    margin: 5px 0;
    font-size: 18px;
    color: #555;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    max-width: 300px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sidebar img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-info a {
    margin: 0 10px;
}

.details {
    margin-top: 20px;
}

.details p {
    margin: 10px 0;
    font-size: 14px;
}

.download-resume {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {
    flex: 2;
    margin-left: 20px;
}

.about {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.about h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skills {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.skills h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skill-card {
    margin-top: 20px;
}

.skill-card h3 {
    font-size: 20px;
    color: orange;
}

.skill-card p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

Now the output was displaying in local browser

Step 4: Web Hosting

  • Objective: Host your portfolio online so it can be accessed publicly.
  • Action:
    • Chose Neocities.org as your hosting platform, a site known for its ease of use in hosting simple websites.
    • Uploaded the entire project folder (named β€œportfolio”) to Neocities.org.
    • Successfully received a unique online link for your website, making it accessible to others.

Search the neocities from google and click the official website

Enter your website name you like to host use different name if username taken notify is shown.

Enter the password and Mail ID

And verify the β€œI am human” Box and click β€œCreate My Site” Button

Now click the Free option.

Enter the verification code from gmail.

click the dashboard to continue.

now we need to upload our project folder

click the β€œNew Folder”

enter the name

folder created

next we upload the files

click the folder

click upload

select the files to upload

now open the index.html file

this was open click to view button on right side top

now our project successfully hosting on internet

copy the above link and share your friends and family

Portfolio Link : https://sakthivels.neocities.org/Sakthivel%20Portfolio/

Git Link : https://github.com/SakthivelS2001/portfolio.git

Step 5: Final Review

  • Objective: Ensure everything is working properly and the portfolio is complete.
  • Action:
    • Conducted a final review of the live website to verify all elements were displayed correctly.
    • Confirmed that the website was fully functional and ready to share.

Skills Used:

  • HTML & CSS: For structuring and styling the website.
  • Web Hosting: Using Neocities.org to make your website accessible online.
  • VS Code: For code editing and customization.

Outcome: Successfully created and hosted a personalized portfolio website.

Conclusion:

This project marks my first real-time experience in creating and hosting a personal portfolio website. Throughout the process, I gained valuable knowledge and practical skills, which were instrumental in the successful completion of this project.

I would like to extend my gratitude to the following resources that significantly contributed to my learning:

  • ChatGPT: For providing guidance and code references that helped shape the structure of my portfolio.
  • YouTube Channel: Error Makes Clever: For offering insightful tutorials that deepened my understanding of HTML, CSS, and web development practices.
  • Youtube Channel: Brototype Tamil: For sharing practical tips and techniques that enhanced my coding skills.

This project not only allowed me to apply my skills but also provided an opportunity to explore new tools and methods, reinforcing my passion for web development.


❌
❌