152 lines
16 KiB
Plaintext
152 lines
16 KiB
Plaintext
<div id="faq">
|
||
<div class="container pt-5 pb-5">
|
||
<h1>FAQ</h1>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>What is this page for?</h4>
|
||
<p>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 <a href="https://sailsjs.com/about">Sails</a>. On top of its primary purpose as a template, this page doubles as a handy guide about the seed app itself.</p>
|
||
<p><small>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.</small></p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>Other than Sails, what technologies, frameworks, or services does this app rely on?</h4>
|
||
<p>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.</p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li><a target="_blank" href="http://getbootstrap.com/docs/4.0/getting-started/introduction/"><strong>Bootstrap 4</strong></a> - Front-end component library</li>
|
||
<li><a target="_blank" href="http://fontawesome.io/icons/"><strong>Font Awesome 4</strong></a> - Icons</li>
|
||
<li><a target="_blank" href="https://vuejs.org/"><strong>Vue.js</strong></a> - Front-end framework</li>
|
||
<li><a target="_blank" href="https://npmjs.com/package/parasails"><strong>parasails.js</strong></a> - 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.)</li>
|
||
<li><a target="_blank" href="https://www.sendgrid.com/"><strong>Sendgrid</strong></a>* - Emails</li>
|
||
<li><a target="_blank" href="https://stripe.com/docs"><strong>Stripe</strong></a>* - Payments</li>
|
||
</ul>
|
||
<p><small>* requires an API key</small></p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>Why do I see placeholders like "NEW_APP_NAME" all over the place? What's the best way to customize these?</h4>
|
||
<p>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 "NEW_APP_NAME" without conflicts than it is to find/replace a more commonly-used word.)</p>
|
||
<p>When you've got your product, company name, and branding finalized, here are the placeholders you'll want to switch out:</p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li><strong purpose="placeholder">NEW_APP_NAME</strong> - You can replace this with the name of your product.</li>
|
||
<li><strong purpose="placeholder">NEW_APP_COMPANY_NAME</strong> - 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.</li>
|
||
<li><strong purpose="placeholder">DATE_PRIVACY_POLICY_LAST_UPDATED</strong> - Replace this with the date your Privacy Policy was updated (so if you're switching out the company name: today).</li>
|
||
<li><strong purpose="placeholder">DATE_TERMS_OF_SERVICE_LAST_UPDATED</strong> - Replace this with the date your Terms of Service were updated (so if you're switching out the company name: today).</li>
|
||
<li><strong purpose="placeholder">NEW_APP_COMPANY_ABOUT_HREF</strong> - 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.</li>
|
||
<li>Placeholder logo - To use your custom branding, you can simply replace the image file at <code>assets/images/logo.png</code> with a custom image of the same name, or change the image <code>src</code> in the header in <code>views/layouts/layout.ejs</code>.</li>
|
||
</ul>
|
||
<blockquote><small>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.</small></blockquote>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I configure a new method to use with cloud.js?</h4>
|
||
<p>Once you've created a controller action and added it to your routes (see the <a target="_blank" href="https://sailsjs.com/documentation/concepts/routes">Sails.js docs for more info on how to do that</a>), there are just a few simple steps to add it to your global <code>Cloud</code> SDK:</p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Rebuild this app's custom SDK using <code>sails run scripts/rebuild-cloud-sdk</code>. (This automatically regenerates the method definitions in your <code>assets/js/cloud.setup.js</code> file based on your configured routes.)</li>
|
||
<li>You can then call any relevant new actions as "cloud methods" in your frontend code like so: <code>await Cloud.doSomething.with({…})</code></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I register a new page with parasails.js?</h4>
|
||
<p>To generate files for a new page (for example, "hotels-overview"), run:</p>
|
||
<p><code>sails generate page hotels-overview</code></p>
|
||
<p>Then you can add a route for the new view action to make it accessible from the browser. For example:</p>
|
||
<p><code>'GET /hotels': { action: 'view-hotels-overview' }</code></p>
|
||
<p><small>To register a new page without the generator, make sure the top-level element of the view you wish to register has an <code>id</code> property (e.g. <code><div id="my-new-page">...</div></code>). Then, create a new javascript file, and include <code>parasails.registerPage('my-new-page', { /* options for the Vue.js instance */ })</code>. For more thorough examples, dig around in <code>assets/js/pages/</code>.</small></p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>What's up with all the inline styles?</h4>
|
||
<p>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 <code>style="..."</code> in the HTML. If for some reason a style tag wouldn't work (e.g. for media queries), you'll see <code>purpose="..."</code> in the HTML, and <code>[purpose='...']</code> 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.</p>
|
||
<p>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.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I deploy to Heroku?</h4>
|
||
<p>In your <a target="_blank" href="https://dashboard.heroku.com">Heroku dashboard</a>, configure your app to auto-deploy from the <code>deploy</code> branch of this project's GitHub repository. Then, from the command line, run <code>sails run deploy</code>.</p>
|
||
<p>For more deployment tips, <a href="https://sailsjs.com/documentation/concepts/deployment">click here</a>.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>Do I have to host on Heroku?</h4>
|
||
<p>No way! You can deploy your app <a target="_blank" href="https://sailsjs.com/documentation/concepts/deployment/hosting">anywhere that supports Node.js</a>.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I verify my user's email addresses?</h4>
|
||
<p>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 <code>config/custom.js</code> and change <code>verifyEmailAddresses: false</code> to <code>verifyEmailAddresses: true</code>.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I finish setting up Sendgrid?</h4>
|
||
<p>To use Sendgrid, you'll need to <a target="_blank" href="https://www.sendgrid.com/">sign up for an account</a>. (While this <em>is</em> a paid service at higher usage levels, you should be able to use Sendgrid in development without having to provide any credit card information.)</p>
|
||
<p>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 <code>config/custom.js</code>, or in a <code>local.js</code> file you add to your <code>config/</code> folder. For your staging or production deployment, you'll want to set these using system environment variables -- aka "config variables" in Heroku.)</p>
|
||
<p>If you already own a domain for your app, you can follow Sendgrid's instructions for configuring a sending domain.</p>
|
||
<p>Otherwise, to send emails from this app <em>without</em> configuring a sending domain, you can <a target="_blank" href="https://app.sendgrid.com/settings/sender_auth">verify a single sender</a>. Just be sure to set <code>sails.config.custom.fromEmailAddress</code> to use the verified email, or there will be errors from the endpoints that attempt to send emails.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I finish setting up Stripe?</h4>
|
||
<p>To use Stripe for your app's payment processing, you'll need to <a target="_blank" href="https://stripe.com">sign up for an account</a>.</p>
|
||
<p>Once you have an account, you'll need to include your publishable and secret keys in your app's custom config as <code>sails.config.custom.stripePublishableKey</code> and <code>sails.config.custom.stripeSecret</code>. In development, you can add your test keys to <code>config/custom.js</code>, or in a <code>local.js</code> file you add to your <code>config/</code> folder.</p>
|
||
<p>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 <a target="_blank" href="https://stripe.com/docs/checkout">Detailed Checkout Guide</a>.</p>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>How do I disable ___________?</h4>
|
||
<p class="pt-4 text-muted"><strong><em>To disable the Bootstrap framework:</em></strong></p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Delete the folder <code>assets/dependencies/bootstrap/</code></li>
|
||
<li>In <code>tasks/pipeline.js</code>, delete <code>'dependencies/bootstrap/dependencies/**/*.js',</code> from <code>jsFilesToInject</code></li>
|
||
</ul>
|
||
<p class="pt-4 text-muted"><strong><em>To disable FontAwesome:</em></strong></p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Delete the folder at <code>assets/dependencies/font-awesome-4/</code>. (You'll also likely want to search the project for "fa fa-" to check for any lingering icons in the HTML.)</li>
|
||
</ul>
|
||
<p class="pt-4 text-muted"><strong><em>To swap out Sendgrid:</em></strong></p>
|
||
<p>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.</p>
|
||
<p>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 target="_blank" href="https://stackshare.io/twilio-sendgrid">a different solution for sending automated emails</a>, 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:</p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Modify the code in <code>api/helpers/send-template-email.js</code> to use the email service of your choice.</li>
|
||
<li>In <code>api/hooks/custom/index.js</code>, remove the warnings related to Sendgrid.</li>
|
||
</ul>
|
||
<p class="pt-4 text-muted"><strong><em>To remove or replace Stripe integration:</em></strong></p>
|
||
<p>We chose Stripe because it is the easiest-to-integrate payment processor in the industry. Its rates are about the same <a target="_blank" href="https://stackshare.io/stripe/alternatives">as its competitors'</a>, 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 <a target="_blank" href="https://stripe.com/us/customers">hundreds of thousands of businesses</a> all around the world.</p>
|
||
<p>By default, features related to billing are automatically disabled if you don't have a Stripe publishable key & secret key in your custom config (<code>sails.config.custom.stripePublishableKey</code> and <code>sails.config.custom.stripeSecret</code>, 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:</p>
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>In the <code>User</code> model definition at <code>api/models/User.js</code>, remove the <code>stripeCustomerId</code>, <code>billingCardBrand</code>, <code>billingCardLast4</code>, <code>billingCardExpMonth</code>, and <code>billingCardExpYear</code> attribute definitions.</li>
|
||
<li>In the "signup" action at <code>api/controllers/entrance/signup.js</code>:
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Remove the line at the top requiring the Stripe dependency</li>
|
||
<li>Remove the block of code creating a Stripe customer. (If you have trouble finding where this happens, be sure to read the comments.)</li>
|
||
<li>In the call to <code>User.create()</code>, remove the <code>stripeCustomerId</code> property.</li>
|
||
</ul>
|
||
</li>
|
||
<li>In the "confirm email" action at <code>api/controllers/entrance/confirm-email.js</code>:
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Remove the line at the top requiring the Stripe dependency.</li>
|
||
<li>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.)</li>
|
||
</ul>
|
||
</li>
|
||
<li>Remove the update billing card endpoint and all references to it by doing the following:
|
||
<ul class="pl-3 pl-sm-5">
|
||
<li>Delete the file at <code>api/controllers/account/update-billing-card.js</code>.</li>
|
||
<li>In <code>config/routes.js</code>, delete the route configuration for <code>'PUT /api/v1/account/update-billing-card'</code>.</li>
|
||
<li>In <code>assets/js/cloud.setup.js</code>, delete the <code>updateBillingCard</code> method.</li>
|
||
<li>In <code>assets/js/pages/account/account-overview.page.js</code>, remove the <code>clickStripeCheckoutButton</code> method.</li>
|
||
<li>In <code>views/pages/account/account-overview.ejs</code>, remove the HTML related to billing.</li>
|
||
</ul>
|
||
</li>
|
||
<li>In <code>api/hooks/custom/index.js</code>, remove the warnings related to Stripe.</li>
|
||
<li>In <code>api/hooks/custom/index.js</code>, remove <code>sails.config.custom.enableBillingFeatures = !isMissingStripeConfig;</code>.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<hr class="mt-4 mb-4"/>
|
||
<h4>Where can I go for more help?</h4>
|
||
<p>If you run into trouble, you can often find the answer in the <a target="_blank" href="http://sailsjs.com/documentation">Sails.js documentation</a>. If you're unsure about how to proceed, or completely stumped, be sure to check out the <a target="_blank" href="http://sailsjs.com/support">latest available resources</a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
|