Sails js | Setting up Empty Web app

By | 15/01/2021

Sails has an amazing auto build function you can select when generating a new app, choosing option 1 sets up a full web app with user authentication, stripe payment integration and much, much more!

That’s all great and I love the team for integrating such an amazing set of features off the bat however sometimes it’s good to have a bare-bones system you can build on from the ground up.

One thing I noticed about a lot of the tutorials is they’re built around using Sails as an API service, which it does very well, but I haven’t found many tutorials around how to use it to build fully functional web applications.

Some of the ramblings here on in are notes for my own sanity, shortcuts to an end product and an indispensible guide, to a better life!

OK, so let’s jump in to building a contact us page, with email field, subject and message body. We’ll add in some additional validation later on, like email validation and blank field checker – but to start with let’s just get it up and running.

So we’ve generated an empty app by running the code below and choosing option 2

$ sails new sails_in_one

cd into the directory and boot up the server by running

$ sails lift

I tend to add nodemon first off so I don’t need to keep rebooting the server

$ npm i nodemon --save

You can then boot the server using

$ nodemon app.js --silly

I use the silly flag to show everything that’s happening just in case I need to dig into the logs a little more.

I tend to use vue js as a front end, you can choose whatever one you’d like but let’s add vue to our application

$ npm i vue --save

If you want to add a contact form you’ll need a route, controller, model and view. The view, controller and route are automatically generated by sails when you run the new page command… let’s do that

$ sails generate page contact

Sails will generate a route for you, you just need to add it into config/routes.js

'GET /contact': { action: 'view-contact' },

and just call the less style file through importer by adding the following to assets/styles/importer.less

@import 'pages/contact.less';

If we head to views/pages/contact.ejs let’s add the contact form

First thing to notice is with the empty app ther’s no bootstrap installed as standard, we need to add it.

$ npm i bootstrap --save

Download bootstrap files from here and copy the following to assets/dependencies/bootstrap-4

  • bootstrap-4.bundle.js
  • bootstrap-4.css

So things will look a little different if you reload the form.

Let’s add a form with a subject and body, with a submit button.

<form method="POST" action="/contact" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
<div class="form-group">
<input name="subject" autofocus="true" type="text" class="form-control" id="subject" placeholder="Subject">
<br/>
<input name="body_text" type="text" class="form-control" id="body_text" placeholder="What do you want us to know?">
<br/>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>

One thing that stumped me for a while, I was receiving a ‘forbidden’ error on form submission and I needed to add the following to handle any cross site forgery

<input type="hidden" name="_csrf" value="<%= _csrf %>" />

That's the form set up, we'll sort the controller next.