From 04a05206ff197fef47a985a24dfde7ae9c405520 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Thu, 28 Dec 2017 15:07:01 +0200 Subject: Remake a lot of stuff --- .babelrc | 3 + .env | 1 + .gitignore | 3 +- Caddyfile.template | 2 +- README.md | 27 +- db.json | 6 + package.json | 27 +- src/api.js | 8 + src/components/contact.tag | 57 - src/components/content.tag | 11 - src/components/header.tag | 31 - src/components/list.tag | 7 - src/components/post/index.js | 2 + src/components/post/post.scss | 9 + src/components/post/post.tag | 12 + src/components/site.tag | 20 +- src/components/subheading.tag | 3 - src/index.ejs | 15 + src/index.html | 25 - src/made-with.png | Bin 4677 -> 0 bytes src/main.js | 6 + src/style.css | 39 - src/style.scss | 29 + webpack.config.js | 47 + yarn.lock | 3557 +++++++++++++++++++++++++++++++++++++++-- 25 files changed, 3649 insertions(+), 298 deletions(-) create mode 100644 .babelrc create mode 100644 .env create mode 100644 db.json create mode 100644 src/api.js delete mode 100644 src/components/contact.tag delete mode 100644 src/components/content.tag delete mode 100644 src/components/header.tag delete mode 100644 src/components/list.tag create mode 100644 src/components/post/index.js create mode 100644 src/components/post/post.scss create mode 100644 src/components/post/post.tag delete mode 100644 src/components/subheading.tag create mode 100644 src/index.ejs delete mode 100644 src/index.html delete mode 100644 src/made-with.png create mode 100644 src/main.js delete mode 100644 src/style.css create mode 100644 src/style.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..94bbbbf --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": [ "es2015-riot" ] +} \ No newline at end of file diff --git a/.env b/.env new file mode 100644 index 0000000..48e9539 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +BACKEND_API_URL=http://localhost:3000 \ No newline at end of file diff --git a/.gitignore b/.gitignore index e09331e..945ef33 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ Caddyfile node_modules -build \ No newline at end of file +public +.vscode \ No newline at end of file diff --git a/Caddyfile.template b/Caddyfile.template index 395e277..a8c7f17 100644 --- a/Caddyfile.template +++ b/Caddyfile.template @@ -1,3 +1,3 @@ localhost -root build \ No newline at end of file +root public \ No newline at end of file diff --git a/README.md b/README.md index 058af16..3d43f90 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,24 @@ -# jan.systems +# Yet another riot.js + webpack project skeleton -Built with `riot.js`. +Built with `riot.js`, `webpack`, `SASS` and ES6 syntax. -## Installation +## Installation with yarn -* Run `yarn install`. -* Install the [caddy](https://caddyserver.com) server. -* `yarn start` \ No newline at end of file +Run `yarn install` to install all dependencies. + +## Running the demo + +* Run the mock backend with `yarn mock-api` +* Run `yarn start` in another terminal to start the front-end dev server +* Check out http://localhost:8888! + +## Running in production + +* Run `yarn build` to build an optimized web-ready bundle +* Use [Caddy](https://caddyserver.com/) or your favourite static server to server the `public` directory. A template for the `Caddyfile` already exists in the root directory + +## Configuration + +* `dotenv` has been set up to read environment variables from the `.env` file. +* The site template file can be found in `src/index.ejs`. HtmlWebpackPlugin injects the javascript bundle when building. +* Create new components with [create-riot-component](https://www.npmjs.com/package/create-riot-component) \ No newline at end of file diff --git a/db.json b/db.json new file mode 100644 index 0000000..34d5eca --- /dev/null +++ b/db.json @@ -0,0 +1,6 @@ +{ + "posts": [ + { "id": 1, "title": "First post!", "author": "Post man" }, + { "id": 2, "title": "Lorem ipsum", "author": "Dolor sit amet" } + ] +} diff --git a/package.json b/package.json index 147a036..d816ef0 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,33 @@ "version": "1.0.0", "author": "Jan Tuomi ", "license": "MIT", + "main": "src/main.js", "scripts": { - "build": "mkdir -p build && cp src/index.html src/style.css build/ && riot src build/bundle.js", - "start": "caddy" + "start": "webpack-dev-server --content-base=public --inline --watch --hot --colors -d --port 8888", + "mock-api": "json-server db.json", + "build": "webpack" }, "dependencies": { + "dotenv": "^4.0.0", + "json-server": "^0.12.1", + "webpack-dotenv-plugin": "^2.0.2" + }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-env": "^1.6.1", + "babel-preset-es2015-riot": "^1.1.0", + "css-loader": "^0.28.7", + "file-loader": "^1.1.6", + "html-webpack-plugin": "^2.30.1", "node-sass": "^4.7.2", - "riot": "^3.7.4" + "riot": "^3.7.4", + "riot-hot-reload": "1.0.0", + "riot-tag-loader": "^2.0.0", + "sass-loader": "^6.0.6", + "style-loader": "^0.19.1", + "webpack": "^3.10.0", + "webpack-dev-server": "^2.9.7" } } diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..c0c6204 --- /dev/null +++ b/src/api.js @@ -0,0 +1,8 @@ +const get = async path => { + const url = process.env.BACKEND_API_URL; + + const resp = await fetch(`${url}${path}`); + return await resp.json(); +}; + +export default get; \ No newline at end of file diff --git a/src/components/contact.tag b/src/components/contact.tag deleted file mode 100644 index c4a2815..0000000 --- a/src/components/contact.tag +++ /dev/null @@ -1,57 +0,0 @@ - -
- -