How to Set Up Your Own Jianshu Application with Angular and NestJS

Mar 23, 2024 | Programming

In this guide, we’ll walk through the steps to create a simple application based on the Jianshu template using Angular as the front-end framework and NestJS as the back-end framework. This application will demonstrate the use of permissions, JWT authentication, and integration with MongoDB and Redis. Let’s dive in!

Prerequisites

  • Node.js version 12.13 or higher
  • MongoDB version 3.4 or higher
  • Redis version 3.2 or higher

Related Technologies

This project utilizes several modern tools and frameworks, including:

  • Nx – A powerful tool for managing monorepos
  • NestJS – Backend framework with a syntax similar to Angular
  • Angular – Frontend framework created by Google
  • Material Design for Angular
  • TypeScript – Superset of JavaScript with static typing
  • RxJS – Reactive programming library for JavaScript
  • MongoDB – NoSQL database
  • Mongoose – MongoDB object modeling library
  • TypeORM – ORM for TypeScript and JavaScript
  • Redis – In-memory data structure store
  • Ioredis – Redis client for Node.js
  • Passport – Authentication middleware for Node.js
  • JWT – JSON Web Token for secure data transfer
  • Docker – For containerization and running applications

Steps to Run the Project

1. Cloning the Repository

First, clone the Jianshu application repository:

git clone https://github.com/jiayishejijianshu.git

2. Installing Dependencies

After cloning, navigate to the project root directory and install the required dependencies:

cd jianshu
npm install

3. Setting Environment Variables

Copy the example environment file and modify it to fit your configuration:

cp .env.example .env

4. Starting MongoDB and Redis

Ensure you have running instances of MongoDB and Redis. If you’re using Docker, you can start them using:

docker-compose up -d

5. Running the Application

You can run the application with the following:

npm start

Access the Angular app at port 4200 and the server API at port 3000.

Understanding the Code with an Analogy

Imagine you are building a library that needs to function efficiently for visitors:

  • The **MongoDB** represents the bookshelves, where all the books (data) are stored securely.
  • **Redis** acts like the librarian, quickly fetching frequently-read books so visitors don’t have to search the shelves all the time.
  • **NestJS** is like the building structure that ensures the library operates smoothly and all visitors can access different areas at their convenience.
  • **Angular** serves as the interactive map for the library, guiding visitors to their desired genre or isle, making their experience enjoyable.

Troubleshooting

If you encounter issues during the setup, check the following:

  • Ensure that Node.js, MongoDB, and Redis are properly installed and running.
  • If you’re facing problems with authentication, verify your JWT setup and the configurations in the environment variables.
  • Check the console for any errors during the server or client build, as these can offer specific clues for resolving issues.

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

Conclusion

With this guide, you should now have a functional Jianshu application leveraging the power of Angular and NestJS. These technologies enable developers to create powerful applications that are both flexible and scalable.

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.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox