FAQ
What is this page for?
This is a template for building your own "Frequently Asked Questions" page. It was generated automatically as part of the expanded seed app provided by Sails. On top of its primary purpose as a template, this page doubles as a handy guide about the seed app itself.
Before you deploy this app to production, be sure to replace the content on this page with real questions and answers that are relevant to your project. Or if you don't need an FAQ, just delete this file altogether.
Other than Sails, what technologies, frameworks, or services does this app rely on?
This app includes several tools and integrations that we use frequently on top of Sails. They've worked well for us in the past; allowing us to focus on developing new features with minimal overhead. Some are files we've rolled ourselves, and the rest are 3rd party services and frameworks. While a couple of these will require you to make an account (or obtain an API key, etc.), we want to emphasize that we only included trusted, reliable tools that we feel comfortable using on our own projects, and our customers' projects.
- Bootstrap 4 - Front-end component library
- Font Awesome 4 - Icons
- Vue.js - Front-end framework
- parasails.js - Thin layer of bundled conventions for using Vue.js with Sails.js, and dynamically-generated SDK for handling AJAX and/or WebSocket requests from the front-end to the actions in your Sails app. (More info on usage below.)
- Sendgrid* - Emails
- Stripe* - Payments
* requires an API key
Why do I see placeholders like "Makuta EduFin" all over the place? What's the best way to customize these?
Because projects are often generated before product and/or company names are finalized, we felt it made more sense to use easily find-and-replaceable placeholders than to prompt for an app or company name at the beginning. (It's a lot easier to find/replace "Makuta EduFin" without conflicts than it is to find/replace a more commonly-used word.)
When you've got your product, company name, and branding finalized, here are the placeholders you'll want to switch out:
- Makuta EduFin - You can replace this with the name of your product.
- NEW_APP_COMPANY_NAME - This placeholder is used for the entity name in the default legal terms & privacy policy, and can be replaced with the name of the company behind your app.
- DATE_PRIVACY_POLICY_LAST_UPDATED - Replace this with the date your Privacy Policy was updated (so if you're switching out the company name: today).
- DATE_TERMS_OF_SERVICE_LAST_UPDATED - Replace this with the date your Terms of Service were updated (so if you're switching out the company name: today).
- NEW_APP_COMPANY_ABOUT_HREF - This is the link in the copyright section of the footer. You'll probably want to switch it out for a link to your company's about page or marketing site.
- Placeholder logo - To use your custom branding, you can simply replace the image file at
assets/images/logo.png
with a custom image of the same name, or change the imagesrc
in the header inviews/layouts/layout.ejs
.
Just a heads up, the previous couple paragraphs will make a lot less sense once you've done a find/replace on each of those placeholder words.
How do I configure a new method to use with cloud.js?
Once you've created a controller action and added it to your routes (see the Sails.js docs for more info on how to do that), there are just a few simple steps to add it to your global Cloud
SDK:
- Rebuild this app's custom SDK using
sails run scripts/rebuild-cloud-sdk
. (This automatically regenerates the method definitions in yourassets/js/cloud.setup.js
file based on your configured routes.) - You can then call any relevant new actions as "cloud methods" in your frontend code like so:
await Cloud.doSomething.with({…})
How do I register a new page with parasails.js?
To generate files for a new page (for example, "hotels-overview"), run:
sails generate page hotels-overview
Then you can add a route for the new view action to make it accessible from the browser. For example:
'GET /hotels': { action: 'view-hotels-overview' }
To register a new page without the generator, make sure the top-level element of the view you wish to register has an id
property (e.g. <div id="my-new-page">...</div>
). Then, create a new javascript file, and include parasails.registerPage('my-new-page', { /* options for the Vue.js instance */ })
. For more thorough examples, dig around in assets/js/pages/
.
What's up with all the inline styles?
Since this starter app uses Bootstrap, we wanted to make it a little clearer where our custom styles end and Bootstrap styles begin. Wherever possible, you'll see style="..."
in the HTML. If for some reason a style tag wouldn't work (e.g. for media queries), you'll see purpose="..."
in the HTML, and [purpose='...']
in the .less file– we took that approach, rather than using custom class names, to help avoid confusion about which classes come from Bootstrap and which ones we added ourselves.
Another reason: copy/pasting! With the styles inline, it's easy to copy HTML from a page without the need to also duplicate styles from the matching .less files.
How do I deploy to Heroku?
In your Heroku dashboard, configure your app to auto-deploy from the deploy
branch of this project's GitHub repository. Then, from the command line, run sails run deploy
.
For more deployment tips, click here.
How do I verify my user's email addresses?
By default, email verification is neither required for signup, nor for when an existing user changes their email address from their account page. To enable an email verification step for both of these actions, open config/custom.js
and change verifyEmailAddresses: false
to verifyEmailAddresses: true
.
How do I finish setting up Sendgrid?
To use Sendgrid, you'll need to sign up for an account. (While this is a paid service at higher usage levels, you should be able to use Sendgrid in development without having to provide any credit card information.)
After you've created an account, you'll need to add your Sendgrid API secret to your custom config. (In development, this will be either in config/custom.js
, or in a local.js
file you add to your config/
folder. For your staging or production deployment, you'll want to set these using system environment variables -- aka "config variables" in Heroku.)
If you already own a domain for your app, you can follow Sendgrid's instructions for configuring a sending domain.
Otherwise, to send emails from this app without configuring a sending domain, you can verify a single sender. Just be sure to set sails.config.custom.fromEmailAddress
to use the verified email, or there will be errors from the endpoints that attempt to send emails.
How do I finish setting up Stripe?
To use Stripe for your app's payment processing, you'll need to sign up for an account.
Once you have an account, you'll need to include your publishable and secret keys in your app's custom config as sails.config.custom.stripePublishableKey
and sails.config.custom.stripeSecret
. In development, you can add your test keys to config/custom.js
, or in a local.js
file you add to your config/
folder.
In your staging or production deployment, you'll want to set your API keys using system environment variables (aka "config variables" in Heroku), and you will need ensure that your site meets Stripe's HTTPS requirements in order for Stripe Checkout to work. For more information, see Stripe's Detailed Checkout Guide.
How do I disable ___________?
To disable the Bootstrap framework:
- Delete the folder
assets/dependencies/bootstrap/
- In
tasks/pipeline.js
, delete'dependencies/bootstrap/dependencies/**/*.js',
fromjsFilesToInject
To disable FontAwesome:
- Delete the folder at
assets/dependencies/font-awesome-4/
. (You'll also likely want to search the project for "fa fa-" to check for any lingering icons in the HTML.)
To swap out Sendgrid:
We chose Sendgrid because of its very generous free tier (you can send up to 100 emails per day). Plus, it integrates easily, it's been around for a while (so it's stable and does a good job evading spam filters), and it's used internally at companies like Slack and Medium.
Out-of-the box, if Sendgrid is not configured for this app, the contact form and password recovery flow will fail outright unless an email address ending in "@example.com" is used. Luckily, if you wish to use a different solution for sending automated emails, the logic for sending emails is fairly contained. To switch to a service other than Sendgrid, you'll need to make the following changes to your code:
- Modify the code in
api/helpers/send-template-email.js
to use the email service of your choice. - In
api/hooks/custom/index.js
, remove the warnings related to Sendgrid.
To remove or replace Stripe integration:
We chose Stripe because it is the easiest-to-integrate payment processor in the industry. Its rates are about the same as its competitors', but even if that weren't the case, Stripe's focus on developer happiness would probably make up for it. Stripe processes payments, payouts, and more for hundreds of thousands of businesses all around the world.
By default, features related to billing are automatically disabled if you don't have a Stripe publishable key & secret key in your custom config (sails.config.custom.stripePublishableKey
and sails.config.custom.stripeSecret
, respectively). Your app will not be negatively impacted or appear broken; it will merely have some extraneous code in places. If you don't anticipate integrating billing features into your app and want to remove this code entirely, you can make the following changes:
- In the
User
model definition atapi/models/User.js
, remove thestripeCustomerId
,billingCardBrand
,billingCardLast4
,billingCardExpMonth
, andbillingCardExpYear
attribute definitions. - In the "signup" action at
api/controllers/entrance/signup.js
:- Remove the line at the top requiring the Stripe dependency
- Remove the block of code creating a Stripe customer. (If you have trouble finding where this happens, be sure to read the comments.)
- In the call to
User.create()
, remove thestripeCustomerId
property.
- In the "confirm email" action at
api/controllers/entrance/confirm-email.js
:- Remove the line at the top requiring the Stripe dependency.
- Remove the block of code that handles creating/updating a Stripe customer. (If you have trouble finding where this happens, be sure to read the comments.)
- Remove the update billing card endpoint and all references to it by doing the following:
- Delete the file at
api/controllers/account/update-billing-card.js
. - In
config/routes.js
, delete the route configuration for'PUT /api/v1/account/update-billing-card'
. - In
assets/js/cloud.setup.js
, delete theupdateBillingCard
method. - In
assets/js/pages/account/account-overview.page.js
, remove theclickStripeCheckoutButton
method. - In
views/pages/account/account-overview.ejs
, remove the HTML related to billing.
- Delete the file at
- In
api/hooks/custom/index.js
, remove the warnings related to Stripe. - In
api/hooks/custom/index.js
, removesails.config.custom.enableBillingFeatures = !isMissingStripeConfig;
.
Where can I go for more help?
If you run into trouble, you can often find the answer in the Sails.js documentation. If you're unsure about how to proceed, or completely stumped, be sure to check out the latest available resources.