A modern URL shortener built with React, Material UI and Firebase.
Authentication of this project has been taken from https://github.com/chaseoc/firebase-login-page
This project was bootstrapped with Create React App.
I come from the PHP era. Back then we had YOURLS which gave us a perfect self-hosted URL shortener on our domains. But the YOURLS UI now feels ancient and honestly, with the availability of amazing new tech, its a sin to not use them.
This project has been created with the goal of providing a modern re-do of YOURLS and at the same time, introduce new features wherever possible!
You’ll need to make the following set up:
A Firebase project with Hosting (Free plan will work)
Add a Custom domain to your Firebase Hosting (you know, the shorter, the better)
Enable Email/Password authentication in your Firebase Authentication settings and set up your users.
Enable Firestore in the Firebase project.
I went ahead and put all the installation steps into a video! You can watch the FireShort Setup Guide here -
https://www.youtube.com/watch?v=eVU0Wm3HLdM
git clone https://github.com/xprilion/fireshort.git
cd fireshort
src/firebase/firebase.js
and put your Firebase Project Config here:const firebaseConfig = {
//Your config values
};
firebase.json
and change hosting.site
key:...
"hosting": {
"site":"yoursitename", <-- This is your firebase hosting site name
"public": "build",
...
src/config.js
and update global.config.mainsite
:module.exports = global.config = {
mainsite: "https://xprilion.com" <-- your main site here
// other global config variables you wish
};
npm start
If you get an error like this here:
Attempting to bind to HOST environment variable: x86_64-conda_cos6-linux-gnu
you need to remove your conda environment and set back the host. Use the following commands:
conda deactivate
export HOST=localhost
npm run-script build
firebase --project **your_project_id** deploy
Follow the Firebase documentation article to setup a custom domain for your URL shortener.
The following configurations are available:
Parameter | Type | Description |
---|---|---|
global.config.mainsite | URL | The site to which a blank suffix redirects. For ex: short.site -> long.site |
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read : if true;
allow write : if request.auth.uid != null;
}
}
}
Author: xprilion
GitHub: https://github.com/xprilion/fireshort
#reactjs #javascript