Skip to content

Commit 1437fad

Browse files
MortaroMortaro
committed
📝 🚧 integration examples
1 parent 5294c86 commit 1437fad

File tree

83 files changed

+802
-218
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+802
-218
lines changed

‎articles/context-page.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,26 @@ class Page extends Nullstack {
5252
export default Page;
5353
```
5454

55+
## Custom Events
56+
57+
Updating *page.title* will raise a custom *nullstack.page.title* event.
58+
59+
```jsx
60+
import Nullstack from 'nullstack';
61+
62+
class Analytics extends Nullstack {
63+
64+
hydrate({page}) {
65+
window.addEventListener('nullstack.page.title', () => {
66+
console.log(page.title);
67+
});
68+
}
69+
70+
}
71+
72+
export default Analytics;
73+
```
74+
5575
## Next step
5676

5777
⚔ Learn about the [context project](/context-project).

‎articles/how-to-deploy-a-nullstack-application.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,14 @@ To start the server just run:
2525
node .production/server.js
2626
```
2727

28-
> ✨ It is recommend the usage of a process manager like [PM2](https://pm2.keymetrics.io)
28+
> ✨ It is recommend the usage of a process manager like [PM2](https://pm2.keymetrics.io)
29+
30+
## How to Deploy a static generated site with Nullstack
31+
32+
After you [generate a static site](/static-site-generation), all you have to do is move the output folder to any host machine capable of serving HTML.
33+
34+
## Next step
35+
36+
> 🎉 *Congratulations*. You are done with the advanced concepts!
37+
38+
⚔ Learn [how to use MongoDB with Nullstack](/how-to-use-mongodb-with-nullstack).

‎articles/how-to-use-facebook-pixel-with-nullstack.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Facebook's Pixel
3+
description: Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events
4+
---
5+
6+
According to [developers.facebook.com](https://developers.facebook.com/docs/facebook-pixel/):
7+
8+
"The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website."
9+
10+
You can take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events.
11+
12+
Facebook's Pixel can only be called after [hydrate](/full-stack-lifecycle) to ensure it is running in the client.
13+
14+
```jsx
15+
import Nullstack from 'nullstack';
16+
17+
class FacebookPixel extends Nullstack {
18+
19+
async hydrate({id}) {
20+
! function(f, b, e, v, n, t, s) {
21+
if (f.fbq) return;
22+
n = f.fbq = function() {
23+
n.callMethod ?
24+
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
25+
};
26+
if (!f._fbq) f._fbq = n;
27+
n.push = n;
28+
n.loaded = !0;
29+
n.version = '2.0';
30+
n.queue = [];
31+
t = b.createElement(e);
32+
t.async = !0;
33+
t.src = v;
34+
s = b.getElementsByTagName(e)[0];
35+
s.parentNode.insertBefore(t, s)
36+
}(window, document, 'script',
37+
'https://connect.facebook.net/en_US/fbevents.js');
38+
fbq('init', id);
39+
fbq('track', 'PageView');
40+
window.addEventListener('nullstack.page.title', () => {
41+
fbq('init', id);
42+
fbq('track', 'PageView');
43+
})
44+
}
45+
}
46+
47+
export default FacebookPixel;
48+
```
49+
50+
```jsx
51+
import Nullstack from 'nullstack';
52+
import FacebookPixel from './FacebookPixel';
53+
54+
class Application extends Nullstack {
55+
56+
// ...
57+
58+
render() {
59+
return (
60+
<main>
61+
<FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
62+
</main>
63+
)
64+
}
65+
66+
67+
}
68+
69+
export default Application;
70+
```
71+
72+
## Using a Wrapper
73+
74+
Alternatively, you can install [nullstack-facebook-pixel](https://github.com/Mortaro/nullstack-facebook-pixel) as a dependency:
75+
76+
```sh
77+
npm install nullstack-facebook-pixel
78+
```
79+
80+
```jsx
81+
import Nullstack from 'nullstack';
82+
import FacebookPixel from 'nullstack-facebook-pixel';
83+
84+
class Application extends Nullstack {
85+
86+
// ...
87+
88+
render() {
89+
return (
90+
<main>
91+
<FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
92+
</main>
93+
)
94+
}
95+
96+
97+
}
98+
99+
export default Application;
100+
```
101+
102+
## Next step
103+
104+
> 🎉 *Congratulations*. You are done with the documentation!
105+
106+
⚔ If you want to see this more examples please [open an issue on github](https://github.com/nullstack/nullstack/issues).

‎articles/how-to-use-google-analytics-with-nullstack.md‎

Lines changed: 105 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,105 @@
1-
TODO:
2-
- facebook pixel example
3-
- google analytics example
4-
- link to the components
1+
---
2+
title: Google Analytics
3+
description: Take advantage of the context and custom events to create a component that dynamically sends GTAG events
4+
---
5+
6+
According to [analytics.google.com](https://analytics.google.com):
7+
8+
"Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications."
9+
10+
You can take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends GTAG events.
11+
12+
GTAG can only be called after [hydrate](/full-stack-lifecycle) to ensure it is running in the client.
13+
14+
```jsx
15+
import Nullstack from 'nullstack';
16+
17+
class GoogleAnalytics extends Nullstack {
18+
19+
hydrate({router, page, id}) {
20+
window.dataLayer = window.dataLayer || [];
21+
function gtag(){
22+
dataLayer.push(arguments);
23+
}
24+
gtag('js', new Date());
25+
gtag('config', id, {
26+
page_title: page.title,
27+
page_path: router.url
28+
});
29+
window.addEventListener('nullstack.page.title', () => {
30+
gtag('event', 'page_view', {
31+
page_title: page.title,
32+
page_path: router.url
33+
})
34+
})
35+
}
36+
37+
render({id}) {
38+
return (
39+
<script
40+
async
41+
src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
42+
/>
43+
)
44+
}
45+
46+
}
47+
48+
export default GoogleAnalytics;
49+
```
50+
51+
```jsx
52+
import Nullstack from 'nullstack';
53+
import GoogleAnalytics from './GoogleAnalytics';
54+
55+
class Application extends Nullstack {
56+
57+
// ...
58+
59+
render() {
60+
return (
61+
<main>
62+
<GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
63+
</main>
64+
)
65+
}
66+
67+
68+
}
69+
70+
export default Application;
71+
```
72+
73+
## Using a Wrapper
74+
75+
Alternatively, you can install [nullstack-google-analytics](https://github.com/Mortaro/nullstack-google-analytics) as a dependency:
76+
77+
```sh
78+
npm install nullstack-google-analytics
79+
```
80+
81+
```jsx
82+
import Nullstack from 'nullstack';
83+
import GoogleAnalytics from 'nullstack-google-analytics';
84+
85+
class Application extends Nullstack {
86+
87+
// ...
88+
89+
render() {
90+
return (
91+
<main>
92+
<GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
93+
</main>
94+
)
95+
}
96+
97+
98+
}
99+
100+
export default Application;
101+
```
102+
103+
## Next step
104+
105+
⚔ Learn [how to use Facebook Pixel with Nullstack](/how-to-use-facebook-pixel-with-nullstack).

‎articles/how-to-use-mongodb-with-nullstack.md‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,73 @@
1-
- mongo db example
1+
---
2+
title: How to use MongoDB
3+
description: You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications
4+
---
5+
6+
According to [mongodb.com](https://www.mongodb.com):
7+
8+
"MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era."
9+
10+
You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications.
11+
12+
Install the MongoDB driver from npm:
13+
14+
```sh
15+
npm install mongodb
16+
```
17+
18+
Configure the database credentials using [secrets](/context-secrets).
19+
20+
The last step is to simply assign the database connection to the server context.
21+
22+
```jsx
23+
import Nullstack from 'nullstack';
24+
25+
class Application extends Nullstack {
26+
27+
static async start(context) {
28+
const {secrets} = context;
29+
secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';
30+
secrets.databaseName = 'dbname';
31+
await this.startDatabase(context);
32+
}
33+
34+
static async startDatabase(context) {
35+
const {secrets} = context;
36+
const {MongoClient} = await import('mongodb');
37+
const databaseClient = new MongoClient(secrets.databaseHost);
38+
await databaseClient.connect();
39+
context.database = await databaseClient.db(secrets.databaseName);
40+
}
41+
42+
}
43+
44+
export default Application;
45+
```
46+
47+
The example above will make the database key available to all your server functions.
48+
49+
```jsx
50+
import Nullstack from 'nullstack';
51+
52+
class BooksList extends Nullstack {
53+
54+
books = [];
55+
56+
static async getBooks({database}) {
57+
return await database.collection('books').find().toArray();
58+
}
59+
60+
async initiate() {
61+
this.books = await this.getBooks();
62+
}
63+
64+
// ...
65+
66+
}
67+
68+
export default BooksList;
69+
```
70+
71+
## Next step
72+
73+
⚔ Learn [how to use Google Analytics with Nullstack](/how-to-use-google-analytics-with-nullstack).

‎articles/routes-and-params.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,26 @@ class Application extends Nullstack {
239239
}
240240
```
241241

242+
## Custom Events
243+
244+
Updating *router.url* or *router.path* will raise a custom *nullstack.router.url* event.
245+
246+
```jsx
247+
import Nullstack from 'nullstack';
248+
249+
class Analytics extends Nullstack {
250+
251+
hydrate({router}) {
252+
window.addEventListener('nullstack.router.url', () => {
253+
console.log(router.url);
254+
});
255+
}
256+
257+
}
258+
259+
export default Analytics;
260+
```
261+
242262
## Special anchors
243263

244264
Anchor tags accept some convenient special attributes besides the regular href.

‎articles/static-site-generation.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,4 @@ Nullstatic only crawls your application up to the initiate resolution, further A
4646

4747
## Next step
4848

49-
> 🎉 *Congratulations*. You are done with the advanced concepts!
50-
51-
⚔ Learn [how to deploy a nullstack application](/how-to-deploy-a-nullstack-application).
49+
⚔ Learn [how to deploy a Nullstack application](/how-to-deploy-a-nullstack-application).

0 commit comments

Comments
 (0)