1
- # www.fretonator.com
2
1
3
2
[ ![ Netlify Status] ( https://api.netlify.com/api/v1/badges/87d9f619-8f13-47e8-99cc-5167db7294a6/deploy-status )] ( https://app.netlify.com/sites/fretonator/deploys )
4
3
@@ -31,6 +30,7 @@ Angular Prerender
31
30
Netlify
32
31
```
33
32
33
+
34
34
### Build Instructions
35
35
Requires Node (14) & NPM.
36
36
@@ -40,25 +40,143 @@ npm -v
40
40
npm install -g @angular/cli
41
41
ng --version
42
42
```
43
+
43
44
2 . Fork the repository.
45
+
44
46
3 . Clone your fork to your local development environment.
45
47
```
46
48
git clone [url]
47
49
```
50
+
48
51
4 . Change into the Fretonator directory.
49
52
```
50
53
cd fretonator
51
54
```
55
+
52
56
5 . Install the dependencies.
53
57
```
54
58
npm install
55
59
```
60
+
56
61
6 . Run the local development server. This should open automatically in your browser but would be accessible via http://localhost:4200/ .
57
62
```
58
63
ng serve --open
59
64
```
60
65
61
-
66
+ ---
62
67
```
63
68
This project was generated using [Nx](https://nx.dev).
64
- ```
69
+ ```
70
+ See ` package.json ` for test and build commands available to the project.
71
+
72
+ ### www.fretonator.com
73
+
74
+ ---
75
+
76
+ This project was generated using [ Nx] ( https://nx.dev ) .
77
+
78
+ 🔎 ** Nx is a set of Extensible Dev Tools for Monorepos.**
79
+
80
+ ## Quick Start & Documentation
81
+
82
+ [ Nx Documentation] ( https://nx.dev/angular )
83
+
84
+ [ 10-minute video showing all Nx features] ( https://nx.dev/angular/getting-started/what-is-nx )
85
+
86
+ [ Interactive Tutorial] ( https://nx.dev/angular/tutorial/01-create-application )
87
+
88
+ ## Adding capabilities to your workspace
89
+
90
+ Nx supports many plugins which add capabilities for developing different types of applications and different tools.
91
+
92
+ These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
93
+
94
+ Below are some plugins which you can add to your workspace:
95
+
96
+ - [ Angular] ( https://angular.io )
97
+ - ` ng add @nrwl/angular `
98
+ - [ React] ( https://reactjs.org )
99
+ - ` ng add @nrwl/react `
100
+ - Web (no framework frontends)
101
+ - ` ng add @nrwl/web `
102
+ - [ Nest] ( https://nestjs.com )
103
+ - ` ng add @nrwl/nest `
104
+ - [ Express] ( https://expressjs.com )
105
+ - ` ng add @nrwl/express `
106
+ - [ Node] ( https://nodejs.org )
107
+ - ` ng add @nrwl/node `
108
+
109
+ ## Generate an application
110
+
111
+ Run ` ng g @nrwl/angular:app my-app ` to generate an application.
112
+
113
+ > You can use any of the plugins above to generate applications as well.
114
+
115
+ When using Nx, you can create multiple applications and libraries in the same workspace.
116
+
117
+ ## Generate a library
118
+
119
+ Run ` ng g @nrwl/angular:lib my-lib ` to generate a library.
120
+
121
+ > You can also use any of the plugins above to generate libraries as well.
122
+
123
+ Libraries are sharable across libraries and applications. They can be imported from ` @cheadle-farm/mylib ` .
124
+
125
+ ## Development server
126
+
127
+ Run ` ng serve my-app ` for a dev server. Navigate to http://localhost:4200/ . The app will automatically reload if you change any of the source files.
128
+
129
+ ## Code scaffolding
130
+
131
+ Run ` ng g component my-component --project=my-app ` to generate a new component.
132
+
133
+ ## Build
134
+
135
+ Run ` ng build my-app ` to build the project. The build artifacts will be stored in the ` dist/ ` directory. Use the ` --prod ` flag for a production build.
136
+
137
+ ## Running unit tests
138
+
139
+ Run ` ng test my-app ` to execute the unit tests via [ Jest] ( https://jestjs.io ) .
140
+
141
+ Run ` nx affected:test ` to execute the unit tests affected by a change.
142
+
143
+ ## Running end-to-end tests
144
+
145
+ Run ` ng e2e my-app ` to execute the end-to-end tests via [ Cypress] ( https://www.cypress.io ) .
146
+
147
+ Run ` nx affected:e2e ` to execute the end-to-end tests affected by a change.
148
+
149
+ ## Understand your workspace
150
+
151
+ Run ` nx dep-graph ` to see a diagram of the dependencies of your projects.
152
+
153
+ ## Further help
154
+
155
+ Visit the [ Nx Documentation] ( https://nx.dev/angular ) to learn more.
156
+
157
+ ## Generating WebP images
158
+
159
+ Converts Jpegs to WebP (do this before optimising jpegs)
160
+
161
+ Dependencies
162
+ - cwebp ` brew install webp `
163
+
164
+ ` cd ` into the images folder and run
165
+
166
+ ``` shell script
167
+ find ./ -type f -name ' *.jpg' -exec sh -c ' cwebp -q 75 $1 -o "${1%.jpg}.webp"' _ {} \;
168
+ ```
169
+
170
+ ## Optimising jpegs
171
+
172
+ Optimises JPEG to 75% compression
173
+
174
+ Dependencies
175
+ - jpegoptim ` brew install jpegoptim `
176
+
177
+ ` cd ` into the images folder and run
178
+
179
+ ``` shell script
180
+ jpegoptim -m75 * .jpg --overwrite
181
+
182
+ ```
0 commit comments