Skip to content

Commit 130ce63

Browse files
author
Florin Mateescu
committed
update README
1 parent d54533a commit 130ce63

File tree

1 file changed

+75
-42
lines changed

1 file changed

+75
-42
lines changed

‎README.md

+75-42
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,111 @@
1-
# Angular 16, Payload CMS, ExpressJs - Free Open-Source Full-Stack Boilerplate
1+
# Angular 17, Payload CMS, ExpressJs - Free Open-Source Full-Stack Boilerplate
22

3-
**✨ Professional Web Application Development Starter without the complexity.**
3+
## ✨ Professional Web Application Development Starter without the complexity.
44

5-
Secure, Stable, Automated.
5+
Monorepository, Secure, Stable, Automated. **[VIEW DEMO](https://binarystarter.com)**
66

7-
### **[VIEW DEMO](https://binarystarter.com)**
7+
For full documentation refer to [**Documentation**](https://binarystarter.com/documentation).
88

99
<div style="display: flex; flex-direction: row; justify-content: space-between;">
10-
<img src="https://binarystarter.com/assets/images/angular/free-architecture-nodejs.png" width="380px" style="width: '100%'; height: auto;"/>
11-
<img src="https://binarystarter.com/assets/images/angular/free-architecture-angular.png" width="380px" style="width: '100%'; height: auto;"/>
10+
<img src="https://binarystarter.com/assets/images/github-1.png" width="100%" style="width: '100%'; height: auto;"/>
1211
</div>
1312

14-
# Features
13+
## Do you need AWS / Self-hosted VPS automated deployiment?
1514

16-
- Payload CMS (headless open-source CMS)
15+
<div style="display: flex; flex-direction: row; justify-content: space-between;">
16+
<img src="https://binarystarter.com/assets/images/github-2.png" width="100%" style="width: '100%'; height: auto;"/>
17+
</div>
18+
Using infrastructure as code, the infrastructure gets automatically based on typescript source code, using Pulumi. (https://www.pulumi.com/)
19+
20+
## Features out of the box
21+
22+
- Shared Types between the Backend and Frontend
23+
- Angular Client App running on _http://localhost:4200_
24+
- ExpressJs Server API & PayloadCMS running on _http://localhost:8080_
25+
- PayloadCMS Administration Panel _http://localhost:8080/admin_
26+
- Angular 17+ Server Side Rendering and Single Page App with Dashboard
27+
- Authentication
28+
- Authorization
29+
- Shared authentication between API, Client and PayloadCMS Admin
30+
- Client App Dashboard available under _http://localhost:4200/c/\*_ (authentication is required). Lazy loaded.
31+
- Standalone Components
32+
33+
## Tech-Stack
34+
35+
Latest stable versions are used. The repository is kept up to date and maintained by [Florin Mateescu](https://twitter.com/florinmtsc).
36+
37+
- Node v20
38+
- Payload CMS v2
39+
- Angular 17
40+
- Nx.dev v17
41+
- Monorepository managed by Nx.dev
42+
- ExpressJs API with Payload CMS (headless open-source CMS) integrated
43+
- Angular with SSR (Server-Sider-Rendering) and SPA (Single Page App)
44+
- Angular Standalone Components
1745
- I18n
1846
- TailwindCSS
1947
- Angular Material
20-
- Lazy Loading
21-
- Server Side Rendering App
22-
- Client Side App
23-
- Authentication, Authorization
24-
- Lazy loaded Dashboard for authenticated users
25-
- Standalone Components
2648
- Pnpm, esbuild
2749

50+
<br/>
2851
<img src="https://binarystarter.com/assets/images/angular/dashboard-payload.png" width="420px"/>
2952

53+
<br/>
54+
3055
# Installation
3156

32-
For full documentation refer to [binarystarter.com](https://binarystarter.com/documentation)
57+
For full documentation refer to → [**DOCUMENTATION**](https://binarystarter.com/documentation).
3358

34-
#### Resources
59+
Let’s get started! 🚀
3560

36-
- [Intro to nx](https://nx.dev/getting-started/intro)
37-
- [Install nx](https://nx.dev/getting-started/installation)
38-
- [Why nx?](https://nx.dev/getting-started/why-nx)
39-
- [nx: Run Tasks](https://nx.dev/core-features/run-tasks)
40-
- [nx: Mental Model](https://nx.dev/concepts/mental-model)
41-
- [pnpm commands](https://github.com/nvm-sh/nvm#usage)
61+
#### Clone GitHub Repository
62+
63+
Run in a terminal `git clone https://github.com/binarystarter/binarystarter-angular.git`. To specify another folder name, you can do a direct `git clone https://github.com/binarystarter/binarystarter-angular.git <project_name>`.
4264

4365
#### Prerequisites:
4466

4567
- [Install pnpm](https://pnpm.io/installation)
4668
- [Install nx cli globally](https://nx.dev/getting-started/installation#installing-nx-globally)
47-
- Install nodejs v18
69+
- Install nodejs v20
4870

49-
Let’s get started! 🚀
71+
#### Install modules
5072

51-
#### Clone GitHub Repository
73+
Run `pnpm install`.
5274

53-
Run in a terminal `git clone https://github.com/binarystarter/binarystarter-angular.git`. To specify another folder name, you can do a direct `git clone https://github.com/binarystarter/binarystarter-angular.git <project_name>`.
75+
#### Start the apps
5476

55-
### Install modules
77+
- Angular `nx serve web`
78+
- Server `nx serve express`
5679

57-
Run `pnpm install`.
80+
# Details
81+
82+
### 1. Angular
5883

59-
### Start the app
84+
The angular app can be accessed using http://localhost:4200. All paths are considered server side rendered, except the child routes of `/c` `https://example.com/c/**` which are part of the client app. (e.g. `/c/dashboard`). Of course this can be adjusted per your needs.
6085

61-
Documentation: [binarystarter.com](https://binarystarter.com/documentation)
86+
The Angular client-side app can be accessed at `http://localhost:4200/c/*`
6287

63-
# The app
88+
### 2. ExpressJS API Server
6489

65-
### Angular
90+
The express server is running by default on `localhost:8080`. This can be adjusted by updating the `.env` file
6691

67-
The angular app can be accessed using http://localhost:4200 - the Server Side Rendered app
68-
The Angular client-side app can be accessed at HTTP://localhost:4200/app/... and HTTP://localhost:4200/auth/...
92+
#### 2.1 Payload CMS
6993

70-
### Payload CMS
94+
- 2.1.1 The payloadcms administration panel can be accessed at `http://localhost:8080/admin`
7195

72-
The payloadcms administration panel can be accessed at HTTP://localhost:8080/admin
96+
- 2.1.2 The payloadcms API can be accessed at `http://localhost:8080/api`
7397

74-
### ExpressJS
98+
#### 2.2 Express Custom Routes API
7599

76-
ExpressJS endpoints can be accessed from HTTP://localhost:8080/...
100+
ExpressJs endpoints can be accessed from `http://localhost:8080`
77101

78-
# Out-of-the-box
102+
# More Information
79103

80104
## Authentication and Authorization
81105

82106
The authentication system is based on Passport Js.
83107

84-
Out of the box you get the following pages in Angular, connected with the ExpressJs and Payload CMS.
108+
You get the following pages in Angular, connected with the ExpressJs and Payload CMS.
85109

86110
## Angular SSR and Dashboard App
87111

@@ -101,9 +125,9 @@ This problem is solved by using a mono repository.
101125

102126
Managed by nx.dev tools - now extending TypeScript types from the Backend or creating them from scratch can be done in a single shared library between your Angular app and ExpressJs Backend.
103127

104-
## ExpressJs Server integrated with Payload CMS out of the box
128+
## ExpressJs Server integrated with Payload CMS
105129

106-
We get all the benefits of a monorepository out of the box.
130+
We get all the benefits of a monorepository.
107131

108132
ExpressJs is tightly integrated with PayloadCMS, but you can still add your own routes, outside of Payload.
109133

@@ -113,3 +137,12 @@ We believe in TypeScript, hence everything is based on TypeScript.
113137

114138
- [Twitter](https://twitter.com/florinmtsc)
115139
- [Website](https://binarycentrum.com/)
140+
141+
# Resources
142+
143+
- [Intro to nx](https://nx.dev/getting-started/intro)
144+
- [Install nx](https://nx.dev/getting-started/installation)
145+
- [Why nx?](https://nx.dev/getting-started/why-nx)
146+
- [nx: Run Tasks](https://nx.dev/core-features/run-tasks)
147+
- [nx: Mental Model](https://nx.dev/concepts/mental-model)
148+
- [pnpm commands](https://github.com/nvm-sh/nvm#usage)

0 commit comments

Comments
 (0)