https://github.com/slothsoft/example-javascript-website
An example for setting up a static HTML website using well tested JavaScript.
https://github.com/slothsoft/example-javascript-website
example html javascript website
Last synced: about 12 hours ago
JSON representation
An example for setting up a static HTML website using well tested JavaScript.
- Host: GitHub
- URL: https://github.com/slothsoft/example-javascript-website
- Owner: slothsoft
- License: mit
- Created: 2019-08-27T14:57:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T09:22:15.000Z (over 3 years ago)
- Last Synced: 2026-01-13T19:48:10.817Z (5 months ago)
- Topics: example, html, javascript, website
- Language: JavaScript
- Homepage: http://slothsoft.de
- Size: 452 KB
- Stars: 2
- Watchers: 1
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Example JavaScript Website
[](http://opensource.org/licenses/MIT) [](https://travis-ci.org/slothsoft/example-javascript-website)
- **Author:** [Stef Schulz](mailto:s.schulz@slothsoft.de)
- **Repository:**
- **Open Issues:**
- **Website:** [http://app.slothsoft.de](http://app.slothsoft.de/example-javascript-website)
An example for setting up a static HTML website using well tested JavaScript:
**Content:**
- [Preface](#preface)
- [0. Setup Environment](#0-setup-environment)
- [1. Dependency Management](#1-dependency-management)
- [2. Transpile Code](#2-transpile-code)
- [3. Tests](#3-tests)
- [4. Create Website](#4-create-website)
- [5. Deploy Finished Product](#5-deploy-finished-product)
- [6. Hook to CI Server](#6-hook-to-ci-server)
- [Why is it important to use a CI server?](#why-is-it-important-to-use-a-ci-server)
- [7. Localization](#7-localization)
- [Conclusion](#conclusion)
- [Questions](#questions)
- [External Links](#external-links)
# Preface
Let me preface this document by saying: I'm not a JavaScript developer. I don't *want* to be a JavaScript developer. I've over ten years in Java and I don't plan to change that any time soon.
But I'm a firm believer of using the right tool for the job, so I'm trying to learn how to swing the JavaScript pocket knife, just in case I need something different than my Java hammer someday.
I was sorely disappointed to learn there is evidently no standard environment to develop JavaScript, so I'm trying to figure out how to do it on my own.
For Java the de facto standard is to use Maven, which does the following:
1. Manage dependencies
2. Compile the code
3. Test
4. Create a distribution (JAR for Java)
5. Deploy the finished product
6. Run on CI server
So I figure the same is needed for a JavaScript project (except we don't need a compiler, but maybe a transpiler (to create older code that is supported by more browsers) and / or a minimizer (to strip whitespaces and stuff like that)).
So that's what I'm trying to get into this environment.
Oh, and localization, even though that's a plain Java feature and not Maven. But it's needed for every application. Note that this is no tutorial, it's a diary where I try to understand what I'm doing.
So let's go!
# 0. Setup Environment
The only thing almost everyone seems to agree on is that we need NodeJS. You can get it from [nodejs.org](https://nodejs.org/en/). NodeJS let's you run JavaScript outside of the browser. Which can be used to create JavaScript servers (I've yet to find out why that would be a *good* idea) or of course for executing tests.
So if you've installed NodeJS correctly you should get the following output on the command line:
```
>node --version
v10.16.3
```
# 1. Dependency Management
For this setup dependency management is done by NodeJS's very own package manager: npm.
It should be available if NodeJS is installed, so check that by using the command line:
```
>npm --version
6.11.2
```
Since npm updates more frequently than NodeJS it's probable this version is outdated. Use this to update:
```
npm install npm@latest -g
```
So now we can create a project:
```
mkdir example
cd example
npm init
```
npm will now play twenty questions with you, but you can just press enter to use the defaults.
This will generate a file _package,json_. A basic one looks something like this:
```json
{
"name": "example",
"version": "1.0.0",
"description": "My first project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Stef Schulz ",
"license": "MIT"
}
```
You can see my _[package.json](package.json)_ for a more comprehensive example. Although maybe finish reading this document first, some properties will be explained.
# 2. Transpile Code
So evidently NodeJS is only for creating server applications with JavaScript. Maybe I'll tackle this later but right now I want to create a simple website.
So... simple website, right? I created a small HTML page ([index.html](dist/index.html)), a very basic CSS file ([style.css](dist/resources/css/style.css)) and copied an image from my last vacation ([image](dist/resources/images/DSC00372.jpg)). The structure of the project is from [appcropolis](http://appcropolis.com/blog/web-technology/organize-html-css-javascript-files/):
Check out the HTMl file. The important line is the following:
```html
Price for Family: $
```
It gives us an entry point for our JavaScript. Speaking of which I created a file _[src/box-office.js](src/box-office.js)_ with a legendary algorithm:
```js
function calculatePrice(personCount) {
return 80.0 * personCount;
}
```
And now I want to somehow get the result of the function into my HTML. So far everything's pretty standard, but now we'll work with NodeJS.
NodeJS wants to have an actual application that does stuff, so let's create a _[src/main.js](src/main.js)_:
```js
var calculatePrice = require('./box-office.js')
document.getElementById('family-price').innerHTML = calculatePrice(4);
```
Now how do we get the NodeJS application into our nice little website? The answer is: [browserify](https://github.com/browserify/browserify).
We'll install it via command line:
```
npm install --save-dev browserify
```
(The tutorial on the browserify page suggests using `npm install -g browserify` to install it globally. For me the above worked better for some reason.)
During the execution of the above command line the following happens:
1. npm creates a file _[package-lock.json](package-lock.json)_ that contains all dependencies; it also tells us `You should commit this file.` (but most modules I saw on GitHub still don't)
1. a folder _node_modules/_ is created; this folder contains the dependencies as NodeJS modules; there is no reason to commit this folder, since you can generate it from the _package-lock.json_
Next we'll create a script in the _package.json_ file that bundles our "main" application into a file "bundle.js":
```json
"scripts": {
"bundle": "browserify src/main.js -o dist/resources/js/bundle.js",
}
```
Run it via `npm browserify` and voilá: we have everything bundled nicely. We'll just add the script into our HTML page via the following line:
```html
```
(I found out the hard way that this only works directly before the closing `