Skip to content

Commit 8e6f97e

Browse files
dr-dimitrudr-dimitru
authored
Merge pull request #62 from frozeman/v1.0
## v1.0 - Update codebase to ES6; - Overall codebase refactoring and linting; - __Breaking__: Remove spinner, `simple-spinner` dependency, and `-hide, --hideSpinner` command line options; - Support for modern (ES6) and legacy (ES5) builds (legacy build is used by default); - Support for Meteor's `<meteor-bundled-js/>` and `<meteor-bundled-css/>`; - Support for `body.html` and `blaze-html-templates` (see updated readme); - Support for `{{url-to-meteor-bundled-css}}` placeholder, which can be used in `<link rel="preload">`; - __Breaking__: `--usebuild` option now accepts `<path>` to the build; - Update NPM dependencies; - Use `fs-extra` module to move files around; - Check that `Meteor` and `Meteor.disconnect` exist in global space; - If `--url` option is not passed create dummy `sockjs/info` to avoid connect DDP exceptions; - Closing: #53, #40; - Solving: #61, #57, #55, #42, #18; - Taking into account: #59, #35;
2 parents 70378a3 + b99d461 commit 8e6f97e

10 files changed

+590
-430
lines changed

‎.versions

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ [email protected]
66
[email protected]
77
[email protected]
88
[email protected]
9-
frozeman:build-client@0.4.3
9+
frozeman:build-client@1.0.0
1010
[email protected]
1111
[email protected]
1212
[email protected]

‎README.md

Lines changed: 93 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,29 @@
44

55
# Meteor Build Client
66

7-
This tool builds and bundles the client part of a Meteor app with a simple index.html,
8-
so it can be hosted on any server or even loaded via the `file://` protocol.
7+
This tool builds and bundles the client part of a Meteor app with a simple `index.html`, so it can be hosted on any server or even loaded via the `file://` protocol.
98

109
## Installation
1110

12-
$ [sudo] npm install -g meteor-build-client
11+
```shell
12+
npm install -g meteor-build-client
13+
```
1314

1415
## Usage
1516

16-
// cd into your meteor app
17-
$ cd myApp
17+
```shell
18+
// cd into your meteor app
19+
cd /my/app
20+
21+
// run meteor-build-client
22+
meteor-build-client ../output/directory
23+
```
1824

19-
// run meteor-build-client
20-
$ meteor-build-client ../myOutputFolder
25+
## Important notes:
2126

22-
**Warning** the content of the output folder will be deleted before building the new output! So dont do things like
23-
`$ meteor-build-client /home`!
27+
- __Warning__: the content of the output folder will be deleted before building the new output! So don't do things like `meteor-build-client /home`!
28+
- __Do not use dynamic imports!__ e.g. `import('/eager/file');`;
29+
- By default this package link __legacy__ ES5 bundle build.
2430

2531
### Output
2632

@@ -33,117 +39,139 @@ The content of the output folder could look as follows:
3339

3440
For a list of options see:
3541

36-
$ meteor-build-client --help
42+
```shell
43+
meteor-build-client --help
44+
```
3745

3846
### Passing a settings.json
3947

4048
You can pass an additional settings file using the `--settings` or `-s` option:
4149

42-
$ meteor-build-client ../myOutputFolder -s ../settings.json
50+
```shell
51+
meteor-build-client ../output/directory -s ../settings.json
52+
```
4353

4454
**Note** Only the `public` property of that JSON file will be add to the `Meteor.settings` property.
4555

46-
4756
### App URL
4857

4958
Additionally you can set the `ROOT_URL` of your app using the `--url` or `-u` option:
5059

51-
$ meteor-build-client ../myOutputFolder -u http://myserver.com
52-
53-
If you pass `"default"`, your app will try to connect to the server where the application was served from.
60+
```shell
61+
meteor-build-client ../output/directory -u https://myserver.com
62+
```
5463

55-
If this option was not set, it will set the server to `""` (empty string) and will add a `Meteor.disconnect()` after Meteor was loaded.
64+
If you pass `"default"`, your app will try to connect to the server where the application was served from. If this option was not set, it will set the server to `""` (empty string) and will add a `Meteor.disconnect()` after Meteor was loaded.
5665

5766
### Absolute or relative paths
5867

59-
If you want to be able to start you app by simply opening the index.html (using the `file://` protocol),
60-
you need to link your files relative. You can do this by setting the `--path` or `-p` option:
68+
If you want to be able to start you app by simply opening the index.html (using the `file://` protocol), you need to link your files relative. You can do this by setting the `--path` or `-p` option:
6169

62-
$ meteor-build-client ../myOutputFolder -p ""
70+
```shell
71+
meteor-build-client ../output/directory -p ""
72+
```
6373

6474
The default path value is `"/"`.
6575

6676
*Note* When set a path value, it will also replace this path in you Meteor CSS file, so that fonts etc link correctly.
6777

68-
6978
### Using your own build folder
7079

71-
If you want to use your own build folder by running `meteor build` yourself, specify the `--usebuild` flag and meteor-build-client will not run the meteor build command for you. It will expect that the build folder be located up a directory from the app folder (A sibling to /app, Meteor's default location).
80+
To use pre-build Meteor application, built using `meteor build` command manually, specify the `--usebuild <path-to-build>` flag and `meteor-build-client` will not run the `meteor build` command.
7281

73-
### Using custom templates
82+
### Recommended packages for client-only build
7483

75-
If you want to provide a custom template for the initial HTML provide an HTML file with the `--template` or `-t` option:
84+
If you're building server-less standalone web application we recommend to replace `meteor-base` with `meteor` and `webapp` packages.
7685

77-
$ meteor-build-client ../myOutputFolder -t ../myTemplate.html
86+
```diff
87+
@@ .meteor/packages
88+
- meteor-base
89+
+ meteor
90+
+ webapp
91+
```
7892

79-
The template file need to contain the following placholders: `{{> head}}`, `{{> css}}` and `{{> scripts}}`.
80-
The following example adds a simple loading text to the initial HTML file (Your app should later take care of removing the loading text):
93+
### Template
94+
95+
Following Meteor's recommended usage of `<meteor-bundled-css />` and `<meteor-bundled-js/>` this tags will be replaced with links to generated CSS and JS files respectively. Optionally, use `{{url-to-meteor-bundled-css}}` as a placeholder for URL to generated CSS file. We encourage to use `static-html` (*for non-Blaze projects*) or `blaze-html-templates` (*for Blaze projects*) package for creating bare HTML template in your app, minimal example:
96+
97+
```html
98+
<!-- client/head.html -->
99+
<head>
100+
<meta charset="UTF-8">
101+
<!-- recommended "fragment" to mark as JS-powered website for search engines -->
102+
<meta name="fragment" content="!">
103+
104+
<title>My Meteor App</title>
105+
106+
<!-- recommended "preload" for CSS bundle file -->
107+
<link rel="preload" href="{{url-to-meteor-bundled-css}}" as="style">
108+
<meteor-bundled-css />
109+
</head>
110+
```
111+
112+
Where `<meteor-bundled-css />` will be replaced with `<link />` element to generated CSS file(s) and `{{url-to-meteor-bundled-css}}` will be replaced with URL to generated CSS file.
81113

82114
```html
83-
<!DOCTYPE html>
84-
<html>
85-
<head>
86-
{{> head}}
87-
<link rel="stylesheet" type="text/css" href="/loadingScreen.css">
88-
</head>
89-
<body>
90-
<h1>Loading...</h1>
91-
92-
{{> css}}
93-
{{> scripts}}
94-
</body>
95-
</html>
115+
<!-- client/body.html -->
116+
<body>
117+
<meteor-bundled-js />
118+
</body>
96119
```
97-
By linking a file from your `public` folder (e.g. `loadingScreen.css`) and moving the `{{> css}}` and `{{> scripts}}` placeholder to the end of the `<body>` tag,
98-
you can simply style your loading screen.
99-
Because the small CSS file (`loadingScreen.css`) and the body content will be loaded *before* the Meteor app script, the the user sees the nice Loading text.
120+
121+
Where `<meteor-bundled-js />` will be replaced with `<script />` element(s) to generated JS file(s).
100122

101123
## Connecting to a Meteor server
102124

103125
In order to connect to a Meteor servers, create DDP connection by using `DDP.connect()`, as seen in the following example:
104126

105127
```js
106128
// This Should be in both server and client in a lib folder
107-
DDPConnection = (Meteor.isClient) ? DDP.connect("http://localhost:3000/") : {};
129+
DDPConnection = (Meteor.isClient) ? DDP.connect('http://localhost:3000/') : {};
108130

109131
// When creating a new collection on the client use:
110132
if(Meteor.isClient) {
111-
posts = new Mongo.Collection("posts", DDPConnection);
133+
posts = new Mongo.Collection('posts', DDPConnection);
112134

113-
// set the new DDP connection to all internal packages, which require one
114-
Meteor.connection = DDPConnection;
115-
Accounts.connection = Meteor.connection;
116-
Meteor.users = new Mongo.Collection('users');
117-
Meteor.connection.subscribe('users');
135+
// set the new DDP connection to all internal packages, which require one
136+
Meteor.connection = DDPConnection;
137+
Accounts.connection = Meteor.connection;
138+
Meteor.users = new Mongo.Collection('users');
139+
Meteor.connection.subscribe('users');
118140

119-
// And then you subscribe like this:
120-
DDPConnection.subscribe("mySubscription");
141+
// And then you subscribe like this:
142+
DDPConnection.subscribe('mySubscription');
121143
}
122144
```
123145

124146
## Making routing work on a non Meteor server
125147

126-
To be able to open URLs and let them be handled by the client side JavaScript, you need to rewrite URLs on the server side, so they point always to your index.html.
148+
To be able to open URLs and let them be handled by the client side JavaScript, you need to rewrite URLs on the server side, so they point always to `index.html`
149+
150+
### Apache
127151

128152
For apache a `.htaccess` with `mod_rewrite` could look as follow:
153+
129154
```bash
130155
<IfModule mod_rewrite.c>
131-
RewriteEngine On
132-
RewriteBase /
133-
134-
# Always pass through requests for files that exist
135-
# Per http://stackoverflow.com/a/7090026/223225
136-
RewriteCond %{REQUEST_FILENAME} -f [OR]
137-
RewriteCond %{REQUEST_FILENAME} -d
138-
RewriteRule . - [L]
139-
140-
# Send all other requests to index.html where the JavaScript router can take over
141-
# and render the requested route
142-
RewriteRule ^.*$ index.html [L]
156+
RewriteEngine On
157+
RewriteBase /
158+
159+
# Always pass through requests for files that exist
160+
# Per http://stackoverflow.com/a/7090026/223225
161+
RewriteCond %{REQUEST_FILENAME} -f [OR]
162+
RewriteCond %{REQUEST_FILENAME} -d
163+
RewriteRule . - [L]
164+
165+
# Send all other requests to index.html where the JavaScript router can take over
166+
# and render the requested route
167+
RewriteRule ^.*$ index.html [L]
143168
</IfModule>
144169
```
145170

146-
For nginx:
171+
### nginx:
172+
173+
Use `try_files` and `error_page` to redirect all requests to non-existent files to `index.html`
174+
147175
```conf
148176
server {
149177
listen 80;

‎helpers.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
print(...args) {
3+
console.info.apply(console, args);
4+
}
5+
};

‎index.html

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,2 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
{{> css}}
5-
{{> scripts}}
6-
{{> head}}
7-
</head>
8-
<body>
9-
</body>
10-
</html>
2+
<html><head>{{> head}}</head><body>{{> body}}</body></html>

0 commit comments

Comments
 (0)