Quickstart

Follow this 5 minute quickstart, to setup a new web project with Baqend. We will build a simple message wall.

  1. Create a Baqend Account

    To build a new application, first create a Baqend account. Type in a name for your new application and a dedicated server instance will be deployed and hooked up to our global caching infrastructure (typically in 20 seconds).

  2. Download Boilerplate Web Project

    We'll start with this empty HTML5 Bootstrap project (or configure a custom one). Unzip it, to get the following folder structure:

    index.html          <-- here we will put some HTML to accept input data
    js
        main.js         <-- your application logic hooked up to Baqend
        vendor          <-- JavaScript libraries
    css
        main.css        <-- our style
        bootstrap.css   <-- Bootstrap style
    img, fonts          <-- assets
    
    In a few steps your app will look like this:

  3. Install Baqend

    To install Baqend to the application (alreay included in the zip you downloaded), just add the CDN-hosted Baqend SDK at the end of the <body> section of the index.html using your favourite IDE (e.g. WebStorm) or text editor (e.g. Sublime):

    <script src="https://www.baqend.com/js-sdk/latest/baqend.min.js"></script>
    

    Other installation methods (e.g. npm) are explained on Github.

  4. Connect to the Cloud

    In the main.js, add the following lines to connect to Baqend Cloud:

    DB.connect("<your-app-name>", function() {
        showMessages();
    });
    

    The callback is invoked when the connection is established. We will use that to display the message wall in showMessages, but first we need some data.

  5. Define the Data Model

    In the dashboard enter your App and create a new table named Message in the Data menu on the left. In the schema tab that is now open, add three attributes:

    Attribute NameType
    nameString
    messageString
    dateDateTime
    Now go to the Data tab and click Add to insert a dummy message to the database.

    To learn more about data modeling in Baqend, see the Schema and Types documentation.

  6. Save Data

    Now, let's enhance the index.html with an input for name and message as well as post button. Replace all the code starting before <div class="jumbotron"> just until the <hr> with this:

    <div class="jumbotron">
      <form onsubmit="leaveMessage(this.name.value, this.message.value);
      this.reset(); return false;" class="form-inline text-center container">
      <input class="form-control" name="name" placeholder="Name">
      <input class="form-control" name="message" placeholder="Message">
      <button type="submit" class="btn btn-primary">Leave Message</button>
    </form>
    </div>
    <div class="container"><div class="row" id="messages"></div>
    

    So when hitting enter or the button, our leaveMessage function is called. Let's add it to main.js:

    function leaveMessage(name, message) {
        //Create new message object
        var msg = new DB.Message();
        //Set the properties
        msg.name = name;
        msg.message = message;
        msg.date = new Date();
        //Insert it to the database
        msg.insert().then(showMessages);
    }
    

    So now we insert a new message, whenever the HTML form is submitted.

    See the Create Read Update Delete documentation to learn more about saving and loading data.

  7. Query Data

    Now, let's display the stored data. To show the 30 newest messages, ordered by time stamp perform a simple query:

    function showMessages() {
      DB.Message.find()
        .descending("date")
        .limit(30)
        .resultList()
        .then(function(result) {
            var html = "";
            result.forEach(function(msg) {
                html += '<div class="col-md-4"><h2>';
                html += msg.name + '</h2><p>' + msg.message + '</p></div>';
            });
            document.getElementById("messages").innerHTML = html;
        });
    }
    

    At this point the application is fully working. Just open the index.html in the browser to use your app. If something is not working, press F12 to see any error messages.

    Queries allow you do complex filtering and sorting, see the Query Docs. All data loaded from Baqend Cloud is served with low latency from a global CDN.

  8. Protect Your Data

    By default, public access to the Message table is allowed. Let's restrict that to only allow inserts, reads and queries but disallow any updates and deletes. Go to the ACL (Access Control Lists) tab in the dashboard and revoke delete and update rights from the Public role.

    Access rights can be granted and denied both at table level and at object level. This is explained in detail in the User, Roles and Permissions documentation.

    Baqend has full SSL support. If you want the Baqend connection to be SSL-encrypted by default, add true as the second parameter of the DB.connect call.

  9. Add User Registration and Login

    If you would like your users to login into your application, that's easy. Your app has a predefined User table and the Baqend SDK comes with built-in ways to register and log in users:

    DB.User.register('john.doe@example.com', 'pwd').then(function() {
      //Now we are logged in
      console.log(DB.User.me.username); //'john.doe@example.com'
    });
    //When coming back, just log in:
    DB.User.login('john.doe@example.com', 'pwd').then(...)
    

    You can enable and customize email verification in the settings page of the dashboard. To support OAuth logins (e.g. "Login with Facebook"), setup OAuth as described in the User docs, then you can simply call DB.User.loginWithFacebook.

  10. Install the Baqend CLI and Deploy

    Install the Baqend CLI globally with (node.js and npm is required):

    $ npm install -g baqend
    

    Deploy your first app version by typing:

    $ baqend deploy --file-dir . <your-app-name>
    

    View it online by visiting your app domain <your-app-name>.app.baqend.com.

  11. Start Building

    You can use the app you just created as a baseline for a real app. To explore Baqend's other features: