If you’re looking to build modern real-time applications, the Feathers framework combined with Vue 2 is an excellent choice. In this blog post, we’ll explore how to set up your Feathers-Vue fullstack application with features like authentication, email verification, and more. Let’s dive in!

About Feathers-Vue

This project incorporates Feathers, an open-source web framework designed for real-time applications, along with Vue 2, which supports Server Side Rendering. Although the project is still in progress, it is capable of being used immediately if you find its current capabilities satisfactory.

Features

• SASS
• Stylus
• Pug
• ES6, ES7, and ES8
• Webpack
• Vue Stash for Redux Store
• Bootstrap
• Lodash
• jQuery
• FontAwesome
• Client-side data validation with Mongoose schemas

Getting Started

Setting up the application can be done in a few simple steps. Here are two methods: using Docker for containerization, or developing locally without Docker.

Develop with Docker

To avoid installing node_modules locally, follow these steps:

1. Create environment-dev.env and environment.env files to hold your environment variables. These files are ignored by Git. You’ll need the following variables:

DATABASE_URL=mongodb:dbfeathersvuedevelopment
COMPLAINT_EMAIL=your_email@gmail.com
GMAIL=your_email@gmail.com
GMAIL_PASSWORD=your_pass_password

For more information, see How to set an app password.

2. Run npm start
3. To see the production build locally, execute:

npm run build-qa
npm run qa

4. To switch back to development:

npm run build-dev
npm start

Please note that switching contexts between production and development requires a full Docker build with no cache.

Develop Without Docker

1. Ensure you have NodeJS and npm installed.
2. Install your dependencies:

cd path/to/Feathers-Vue
npm install

3. Start your app locally:

mongod
npm run dev

4. In production run:

npm run build
npm run production

5. To set up Gmail for email functions, add the following environment variables:

export GMAIL=yourgmailaccount@gmail.com
export GMAIL_PASS=yourpassword or app-password

Refer to this guide for setting the app password.

Testing Your Application

To ensure everything is functioning properly, use the following commands:

• To run server-side unit tests: npm test
• To run client-side integration tests: npm run integration

Using Feathers CLI for Scaffolding

The Feathers CLI provides a powerful command line interface for various tasks:

• npm install -g feathers-cli – Install Feathers CLI
• feathers generate service – Generate a new service
• feathers generate hook – Generate a new hook
• feathers generate model – Generate a new model
• feathers help – Show all commands

GitLab Auto Deployment

For those looking to set up auto-deployment with GitLab, follow these steps:

1. Create a DigitalOcean instance using one-click Docker.
2. SSH into the instance and run:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get -y install python-pip
sudo pip install docker-compose

3. Edit sshd_config:

nano /etc/ssh/sshd_config

4. Change PasswordAuthentication to “yes” at the bottom of the file.
5. Run reload ssh
6. Set the following secret environment variables in GitLab:

DATABASE_URL=mongodb:dbfeathersvue
DEPLOYMENT_SERVER_IP=your_ip_address
DEPLOYMENT_SERVER_PASS=your_user_password
DEPLOYMENT_SERVER_USER=your_server_user

7. Update docker-compose.autodeploy.yml web image.
8. Adjust gitlab-ci.yml for specific branches.
9. Push changes to GitLab.

Troubleshooting Tips

If you encounter issues while developing your Feathers-Vue application, consider the following troubleshooting steps:

• Double-check your environment variables, especially database URLs and email settings.
• Make sure your dependencies are correctly installed and up-to-date.
• Look for any syntax errors in your code.
• Refer to Feathers documentation for specific problems.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Breaking Changes

Be mindful of the following breaking changes:

• Removed Mongoose validation from the client side and replaced it with Yup.
• Reconstructed server-side rendering following updated instructions in Vue.js.
• Moved the server-entry file into the app directory.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Conclusion

Building a fullstack application with Feathers and Vue is a rewarding experience, blending real-time capabilities with modern front-end technology. As you continue developing your Feathers-Vue application, remember to embrace the learning process and leverage the vibrant community around these tools. Happy coding!