URL Store

This is a template website for a URL Shortening built using Vite + React. The website is styled using bootstrap and uses react-router-dom to redirect to different pages. This template basically involves two text fields and 3 buttons for performing the basic functioning of a URL Shortening website.

Table of contents

• Motive
• Features
• Prerequiste
• Installation
• Error Guide
• Contact & support
• Collaborator
• License

Motive

The main motive of building this template is to create a website to send request to backend which will processes the request of URL Shortening service. The URL for the backend service can be given in and evnironment file and the connection can be established. This given template is used for a Spring boot application for the backend.

Features

• console output for errors, requests, etc. are availble for debugging
• webpage is made responsive using bootstrap
• .env file for setting up connection with backend securely
• dockerfile for create a container image of the wesite
• TODO : home page, about, and others based on preference
• submit, clear, copy buttons for user friendly experience
• textinput configured for valid URLs only

Prerequisite

• npm for running and building the project
• git for cloning the repository
• docker for creating container images of the website [optional]

Installation

Clone the repository using git

    git clone https://github.com/pratham-ak2004/URL-Store

Navigate to the root directory

    cd URL-Store

Install the node modules form package.json using npm. You can download the LTS version of npm form Node

    npm install

Create .env file of your own referring .env.example file and add the URL's for your ACTIVE front-end and back-end host

    VITE_ACTIVE_SERVER = ""     ## change appropriately
    VITE_ACTIVE_PAGE = ""       ## change appropriately

Run the development sever to see the results

    npm run dev

To build the project use the below command. This will produce a folder named dist which can be used for hosting

    npm run build
    npm run preview     ## To preview your build

Error Guide

There may be several errors or problems while running this project. Below are some solutions to the errors

Error Generate.jsx:23 POST http://localhost:8080/generate/addUrl net::ERR_CONNECTION_REFUSED
Solution The following error can be seen when your site is not getting conneted with the backend. You can try the following solutions.

1. Check you evironment variable VITE_ACTIVE_SERVER. It must be the root URL where your backend is running e.g. http://localhost:8080 if your back-end is hosted locally
2. Change the POST mapping URL in Generate.jsx at line:23

    await fetch(`${import.meta.env.VITE_ACTIVE_SERVER}/generate/addUrl`, { //tobe configured
    }

Error Shortened URL is not being redirected
Solution The following error can me solved by:

1. Configuring the environment variable VITE_ACTIVE_PAGE. It must me the root URL where the current project is running e.g. http://localhost:5173 if your front-end is hosted locally in development server
2. Change display and redirect URL in the following files:
   line:70 of Generate.jsx

       urlToDisplay = `${import.meta.env.VITE_ACTIVE_PAGE}/` + url.shortUrl; //tobe configured

   line:12 of Redirect.jsx

       window.location.href = `${import.meta.env.VITE_ACTIVE_SERVER}/redirect/${target}`; //tobe configured

Contact & Support

Feel free to contact me : )

Collaborators

• Hithesh Poojary

License