Feathers Chat Starter

The Feathers Chat Starter is a simple way to start a new full-stack project based on the Feathers.js framework. With just a couple of clicks, this starter will:

• Create a new GitHub repo for your project

• Copy the source code for a real-time chat app based on the official Feathers Chat repo into your new project

• Host your new chat app on Adaptable, complete with a scalable database, SSL/TLS, and everything else you need to run your app in production

• Enable Continuous Deployment on your new repo, re-deploying to Adaptable on each push to your main branch

This starter comes in two variants, depending on which type of database and ORM framework you prefer:

• Mongoose with MongoDB

• Sequelize with PostgreSQL

To get started creating your new app, click one of the buttons below.

Feathers + MongoDB Feathers + PostgreSQL

If you're not already signed in, you'll need to sign in with your GitHub account.

The next screen explains the actions the starter will perform. Click Next to continue.

»Step 1: Connecting to GitHub

If this is your first time using Adaptable, you'll need to connect Adaptable to one or more of your GitHub scopes. This will allow Adaptable to:

• Create your new GitHub repo.
• Populate it with template source code from the starter.
• Monitor the repo and update the Adaptable deployment on every push to your main branch.

A GitHub scope can be either a GitHub organization you belong to or your personal scope.

Click the Connect to GitHub Scope button.

Choose which scope you'd like to connect Adaptable to.

And finally, click the Install & Authorize button.

»Step 2: Choosing Names for Your GitHub Repo and Adaptable App

Choose a connected GitHub scope where you'd like to create your new repository and choose a name that's unique within that GitHub scope. If you don't see the GitHub scope where you want to create the new repository, click Connect to more GitHub scopes to install Adaptable on another GitHub scope.

Click Next to continue.

Then choose a name for your app project on Adaptable. It must be unique among all other app names on Adaptable.

Click Create Repo & Deploy to start the process of creating and deploying your new app.

Adaptable will now create your new GitHub repo and deploy it. This process typically takes about 3 minutes.

Adaptable shows you progress on each of the starter operations.

»Done!

Once deployment is complete, Adaptable provides information about the actions the starter performed.

Adaptable shows the following information:

• A link to the new GitHub repo that was created by the starter.
• The public URL for your new app, running on the Adaptable Cloud.
• Information about which repo branch is enabled for continuous deployment.

To manage settings for your app and to access logs and other information, click the View App Status button. Or to see all your Adaptable apps, go to your Dashboard.

To learn more about managing your Adaptable apps, see Managing Apps.

»What's Next?

Here are a few ideas on what to do with your new app.

»Idea #1: Check out your new app

The app is a real-time chat room where all logged in users can join in the conversation.

From the Starter Complete screen (see above), click the Visit App button to connect to your app. You can also find the URL for your new app on your App Dashboard.

Enter an email address and a new password and click Sign up and log in.

»Idea #2: Deploy a code update

Your new chat app has a large congratulations message on its login screen. You can edit the app source code to remove the message and Adaptable will re-deploy the updated app when you push to your main branch on GitHub.

1. First, clone your new GitHub repo on your local system

You can get to your app's GitHub repo by clicking on the GitHub icon for the app on the App Dashboard. Alternatively, you can click the name of your new repo on the Starter Complete screen (see above) to go to your newly created repository. For more info on cloning a repo, see the GitHub docs.

2. Edit public/client.js to remove the message from the login page

Remove the HTML code between these two HTML comments:

<!-- REMOVE MESSAGE BEGIN -->
... code to remove ...
<!-- REMOVE MESSAGE END -->

3. Edit public/client.js to remove the chat message on the chat page

Remove the JavaScript code between these two comments:

/* REMOVE MESSAGE BEGIN */
... code to remove ...
/* REMOVE MESSAGE END */

3. Commit and push

Save and commit your changes to git. Then push the changes to GitHub.

Each time you push to the main branch, Adaptable will automatically deploy your code changes.

git add .
git commit -m "Removing congratulations message"
git push origin

4. Monitor app deploy status

Go to your App Dashboard page and click on the app name to see the App Status Page.

The App Status page shows if your app is currently being re-deployed. Wait for your latest changes to finish deploying, then click the app's URL to see the updated chat app login page.

»Idea #3: Configure environment variables

Your new chat app can already allow users to create an account using their email address and a password. The authentication information is stored as part of their user record in the database for your app. You can also allow new users to use their GitHub account to login to your app by setting environment variables that define the GitHub Client ID and the Client Secret.

To enable GitHub logins, follow these steps:

1. Create a GitHub OAuth App

Follow these instructions to create an OAuth app on GitHub.

For the Authorization callback URL setting, append /oauth/github/callback to your app's URL.

For example, if your app's URL is https://myapp.adaptable.app, you would enter https://myapp.adaptable.app/oauth/github/callback for Authorization callback URL when creating your OAuth app.

2. Get the Client ID and Client Secret

After you create your OAuth app on GitHub, you should be presented with the Settings page for the new OAuth app. You'll need to copy two values from this page for use in the next step.

The first value you need is the Client ID for the app. It should be shown near the top of the settings page.

Then, press the Generate a new client secret button. The new secret will be shown only once. Copy the value and store it in a safe place, as you would other secrets or passwords.

3. Set environment variables on Adaptable

Go to your App Dashboard page and click on the app name to see the App Status Page.

Click on the Settings tab, then Configuration below that and then click Runtime Environment.

Enter the Client ID and Client Secret values from the previous step as environment variables named GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET respectively. See screenshot above for an example. You may need to click the blue plus button to enter the second variable.

Click Save Settings and Update Deployment. Once the app has completed re-deploying, the Login with GitHub button on your chat app's login page will allow you to log in using your GitHub credentials.

»Idea #4: Start building your app by adding Feathers API services

Now it's time to start turning this starter into your app.

The starter is compatible with the Feathers Generator CLI, which makes it easy to add more API endpoints to your app. Once you've installed the CLI, you can use the feathers generate service command in your new repo to create a new API service.

To use the database associated with your Adaptable deployment, make sure you select either Mongoose or Sequelize, depending on which starter variant you initially selected. When running in Adaptable, everything is already pre-configured to connect to the database.

For more information on creating Feathers services, see the Feathers Guide.

To find and clone your app's repository, you can click on the GitHub icon for the app on the App Dashboard. For more information on cloning a GitHub repository see the GitHub docs. To get to your app, you can click the left most window icon for your app on the App Dashboard.

»Questions? Need Help?

If you have questions or need help getting started with Adaptable, contact our support team for help.