Giter Club home page Giter Club logo

angular-nest-webapp-template's Introduction

Angular-Nest-Webapp-Template

       

A template repository you can use to start developing your own web application
* Starter template for an admin-style web application
* Monorepo with shared code that can be used in both frontend and backend
* NestJS backend with an example route to get you started
* Angular frontend using pure Bootstrap (no other dependencies)


How to run

Development setup

It's best to open two terminals. Use one to run the backend and the other one for the frontend.

  • To run the backend, open a terminal inside the backend directory and run npm run start:dev. The backend will run on port 3000.
  • To run the frontend, open a terminal inside the frontend directory and run npm run start:dev. The frontend will run on a local angular development server. Your browser shoould be automatically opend, if not go to http://localhost:4200/ (Note that there is no login. You can just click "login" with or without any credentials)

Debug setup

Documentation coming soon

Build for production

Documentation coming soon

Directory structure

  • backend: A Nest JS application containing all your backend services and business logic

    • All backend dependencies have to be put inside the separate package.json inside the backend folder
    • All API routes are inside backend/src/routes
  • frontend: An angular application

    • All backend dependencies have to be put inside the separate package.json inside the frontend folder
    • Everything related to the basic layout should stay inside frontend/src/app/layout
    • All your modules with their components (.ts, .html, and .scss) should be put in frontend/src/app/modules
    • All code that's not part of one modules but is instead used by more than one module (e.g. your services, pipes, interceptors) should be put inside frontend/src/app/shared
    • Everything static (e.g. images) belongs inside frontend/src/app/assets
    • Angular environment definitions are kept in frontend/src/app/environments
  • shared: You can put all classes / interfaces which you want to share between backend and frontend in this folder

How to make it your own

This repository acts as a basic starting point to spare you some efforts and help you to get started quickly. The following two sections describe how you can create you own web application from this repository.

Extend the frontend

Basic instructions on how to add your own modules to the frontend:

  1. Create a folder for your module inside frontend/src/app/modules
  2. Inside that folder, implement your Angular module with all its components, maybe its own router and whatever you need
  3. Add your module to the list of links in the sidebar. To do so, you need to do a couple of things:
    • Inside frontend/src/app/layout/sidebar/sidebar.component.html: Copy and paste one of the existing links (complete a-tag from <a [routerLinkActive]... to </a> with your own contents (i.e. router-link, link text, font-awesome icon)
    • Inside frontend/src/app/layout/layout-routing.module.ts: Add your module route to one of the child routes by copying one of the existing ones. Make sure that the path matches your router link of the previous step and ensure that the path to your module file is correct.
  4. Add your own services: As services are typically used in more than one module, they should be put inside the frontend/src/app/modules/shared directory.

Add your own modules to the backend

As NestJS' modular approach and the way to handle things like routing and dependency injection is pretty similar to Angular, extending the backend is similar to extending the frontend. To add additional routes, you can simply:

  1. Open a terminal inside the routes folder and run nest g module <yourModuleName>. This will create a folder and a module inside the routes folder
  2. While still inside the routes folder, add a controller by executing nest g controller <yourControllerName>. This will generate you a controller.
  3. Repeat #2 for a service: nest g service <yourServiceName>
  4. You should be set up with your new backend route and can start implementing your logic. Make sure to import your module inside the imports of your app.module.ts

angular-nest-webapp-template's People

Contributors

aljoshakoecher avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

pannavicb

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.