An easy way to create powerful web app in minutes without settings up any server environment
✔ Two click hosting
✔ User authentication with one line of code
✔ noSQL database
✔ Binary upload
✔ Server side Rendering regardless of the library or framework used
Create App from dashboard and upload the static files
Just Include the below library in the main html file. Run the html file.
<script src="https://lib.upon.one"></script>
Size of library is just around 40kb
How to use with React?
npm install uponjs
import U from "uponjs"
U.settings({name:"Doom"}) //use the name assigned while creating the app
U.login()
This is the only piece of code needed to log in users. It will ask user to either login with upon.one or login with Google.
For effective SEO SSR is vital, but it takes the fun out of making a web app. Our solution to this is simulating browser behaviour whenever a bot request your website, we do this using Puppetier.
So, you don't have to do anything on your side
Example code
U.getUser('username').then(username=>{
if(username) return console.log("User is logged in")
return console.log("no one is logged in")
})
Let's say you want to create a blogging site. For that u will need to create a section in the database where articles will be stored. Here is most minimal configuration. Copy the below code to the dashboard -> your app -> Edit Backend
db['articles'] = {
updatable: true,
findable: true,
writable: true,
}
Now u can perform queries against this collection. let's write an Article.
U.collection("articles").write({title:"cool grey"} ).then(console.log)
Once you run the above code, your article will be written to the DB. Now, let's say you don't want un-authenticated users to write or update the database
function rule(){
if(!user) return false
return true
}
db['articles'] = {
updatable: true,
findable: rule,
writable: rule
}
Now, only authenticated users can write and update articles. Note that before asking users to update or write an article call U.login()
Now, Let's say you don't want anyone other than you to be able to write or update article. Just update the "updatable" and "writable" rules to the following code.
function rule(){
if(!user) return false
if(user.username == "yourUsername") return true
return false
}
Now, only you can write and update articles. On the back of your head you must be wondering how to read your articles?
Example code for reading from DB
U.collection("articles").find().then(console.log)
Serverside variables | Description |
---|---|
query |
Contains query fields like: query.where, query.put |
user |
contains user data, fields: username, name & id |
developer |
contains developer data, fields: username, name & id |
doc |
Refers to the document which is to be updated or read |
Schema is optional but it provides many handy features like setting default values.
function defaultValueOfAuthor(){
return user.id
}
db['articles'] = {
schema:{
author:{
default:defaultValueOfAuthor
}
}
updatable: true,
findable: true,
writable: true
}
db['articles'] = {
schema:{
author:{type:String},
content:String,
likes:Number
}
updatable: true,
findable: true,
writable: true
}
Note, there are two ways of assigning type. You can either directly set the data type or provide it along with other properties. Supported data types: Object, Number, String, Boolean. If no data type is assigned String data type is allocated.
function defaultValueOfAuthor(){
return user.id
}
db['articles'] = {
schema:{
author:{
required:true
}
}
updatable: true,
findable: true,
writable: true
}
Now, whenever author field is not provided when writing a document, operation will fail
For example
db['yourCollectionName'] = {
schema:{
author:{ updatable:false}
},
updatable:true,
findable:true,
writable:true
}
Now author field can't be updated once written
Let's start with "How to find a document?"
collection('articles').find(<where query>,<options>)
Similarly, you can update, delete & write a document
Methods | Description |
---|---|
write(object) |
Adds document to collection |
find(whereQuery,options) |
Finds documents, options example: {sort:{fieldA:'descending'}, limit:10 } |
update(whereQuery, putQuery, options) |
updates the first document that matches the whereQuery |
delete(whereQuery) |
Deletes the first document that matches the whereQuery but make sure deletable is set to true |
search(whereQuery, { fields:[fieldA,fieldB] } ) |
Searches documents based on whereQuery |
Step 1: Add the below code to dashboard -> your app -> Write Backend
bucket['bucketName'] = {
updatable:true,
findable:true,
writable:true
}
Step 2: Call U.upload(file,bucketName,fileToReplace).then(console.log)
& u are done
Example Code
<body> <input type="file" onchange="upload(event)"> </body>
<script src="https://lib.upon.one"></script>
<script>
async function upload({target}){
let file = target.files[0]
let image = await U.upload(file,'bucketName',fileToReplace)
window.location = "/cdn/"+image.url
}
</script>
npm i browser-image-compression
Example Code
import imageCompression from 'browser-image-compression';
async function upload({target}){
let file = target.files[0]
let compressedFile = await imageCompression(file,{maxSizeMB:0.5})
let image = await U.upload(file,'bucketName',fileToReplace)
window.location = "/cdn/"+image.url
}
For more about imageCompression go to https://www.npmjs.com/package/browser-image-compression
Anything upon one is itself. so, yourapp.upon.one just means yourapp. & our goal is to save your time
When you are done with the app development, make sure to add the folowing configuration
U.settings({released:true})
This will allow us to promote your app
- Add a CNAME record with “@” pointing to the yourapp.upon.one
- Delete the A record
- Set up Domain Forwarding to point to the “yourapp.upon.one"
We don't suggest using A record because, if we ever migrated to different server, IP will change and your site will stop working. The recommended method is safest.
Following is a beautiful alternative to alert("message")
U.say("Good morning!")
Example Code
U.ask([
{h1:"Which is favorite finger?"},
{input:"finger name"},
{button:{innerHTML:"Send",onclick:callback}}
])
function callback(event,formData){
console.log( formdata["finger name"] )
}