Welcome to the world of modern JavaScript development! In this article, we’ll walk you through the steps to set up a fullstack project using NestJS for the backend and Angular for the frontend. The technologies covered span a broad range, giving you an opportunity to work with some of the best tools available today.

What You Need

Before we dive into the setup, make sure you have the following tools installed on your machine:

• Node.js
• NPM (Node Package Manager)
• MongoDB

Cloning the GitHub Repository

To get started, first clone the repository. Open your terminal and run:

git clone https://github.com/jodaryovchev/nest-angular.git

Installing Dependencies

Once you have cloned the project, navigate to the root folder of the cloned repository:

cd nest-angular

Now, install the required dependencies by executing:

npm install

Building the Angular Application

The next step is to build the Angular application. Run the following command:

npm run build:universal

Starting the Server

Now that the Angular app is built, it’s time to fire up the server:

npm run watch:server

Keep in mind that the server relies on MongoDB, so ensure you have an instance of it running.

Alternative Commands

If you wish to work on both the frontend and backend simultaneously, you can execute the following command:

npm run watch

This will allow you to access the Angular development server at port 4200 while sending requests to the backend on port 1337 via a proxy. If you need to focus solely on the frontend, run:

npm run watch:client

Alternatively, to work only on the backend, execute:

npm run watch:server

Do remember to have the Angular app built and establish a connection with MongoDB to avoid hiccups.

Getting GraphQL to Work

If you encounter issues with GraphQL, here’s a step-by-step guide to resolve it:

1. Download the required modules from the following links:
   • Apollo-Angular & Apollo-Angular-Link-Http Modules
   • Fixed @nestjs/graphql Module
2. After downloading, replace the corresponding modules in your node_modules folder.
3. Open node_modules/@types/ws/index.d.ts and modify the type definition of the address() function by changing address(): net.AddressInfo to address(): string.

Now you can uncomment the GraphQL modules on both client and server side, and you’re good to go!

Using Social Login

To set up social login with your application, modify the configuration files with your credentials located at:

• src/server/modules/auth/config/facebook-config.ts
• src/server/modules/auth/config/google-config.ts
• src/server/modules/auth/config/twitter-config.ts

For mobile applications using Facebook-token integration, utilize the endpoint: api/auth/facebook/token.

Troubleshooting

Should you run into any issues during the setup or running phases, consider the following troubleshooting steps:

• Ensure that MongoDB is running; check connection strings in your application configuration.
• Make sure all the dependencies are correctly installed without any errors.
• In case of GraphQL issues, double-check the replacement of modules and the changes made to the type definitions.

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

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

Setting up a fullstack application with NestJS and Angular can seem like a daunting task, but by following these steps, you’ll be well on your way to developing a powerful web application. Happy coding!