Skip to content

Commit

Permalink
remove crates, configs & entries dirs
Browse files Browse the repository at this point in the history
  • Loading branch information
Frank Panetta authored and fattenap committed May 24, 2020
1 parent efa88c7 commit e2835b1
Show file tree
Hide file tree
Showing 37 changed files with 73 additions and 69 deletions.
1 change: 0 additions & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ jobs:

- name: Run tests
run: cargo make verify_only
working-directory: ./crate

- name: Install Netlify CLI
if: github.ref == 'refs/heads/master'
Expand Down
12 changes: 6 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
dist
node_modules
crate/bin
crate/pkg
crate/target
crate/wasm-pack.log
bin
pkg
target
wasm-pack.log
.idea

crate/src/generated/**
!crate/src/generated/mod.rs
src/generated/**
!src/generated/mod.rs
!**/.keep
2 changes: 1 addition & 1 deletion .travis.yml_not_maintained
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ env:
script:
- yarn
- yarn build:prerender # change it to `yarn build:release` if you don't want to prerender pages
- cargo make --cwd ./crate verify_only # includes task `test_h_firefox`
- cargo make verify_only # includes task `test_h_firefox`

before_deploy:
- yarn global add netlify-cli
Expand Down
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

[UNRELEASED]

[0.7.0]

- Moved files and directories located in `crate` directory to project root directory.
- Moved files and directories located in `configs` directory to project root directory.
- Moved files and directories located in `entries` directory to static directory.
- Moved `entries/index.ts` to project root directoy.
- Update/remove references to `crate`, `configs` and `entries` directories in configuration files and documentation.

[0.6.0]

- Updated all JS dependencies.
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
47 changes: 23 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,17 @@ I want to show you how to create, build and host your website for free, so we wi

## 3. Prepare your project for work

1. Open terminal in your project and go to directory `crate` - `$ cd crate`
1. Open terminal in your project
1. Install Webpack and other dependencies - `$ yarn`
1. Try to start dev-server - `$ yarn start` - and then open [localhost:8000](http://localhost:8000) in a browser.
1. Stop server (try `Ctrl+c`).
1. Try to lint your project - `$ cargo make verify_only` - you shouldn't see any errors.
1. Modify files like `LICENCE`, `README.md` and `/crate/Cargo.toml` as you wish and push changes into GitHub.
1. Modify files like `LICENCE`, `README.md` and `Cargo.toml` as you wish and push changes into GitHub.

## 4. Write your website

1. Open project in your favorite IDE. I use [IntelliJ](https://www.jetbrains.com/idea/download) or [VS Code](https://code.visualstudio.com/).
1. Run `$ yarn start` in terminal. I use `bash` integrated into IDE (it's installed with Git on Windows).
- _Note_: Yarn commands can be run from project root or from directory `crate`, but Cargo commands can be run **only from `crate`**.
1. Run `$ yarn start` in terminal.
1. Open [localhost:8000](http://localhost:8000) in a browser.
1. You can open it also in your mobile phone:
1. Make sure your dev-server aka computer is in the same network as your phone.
Expand All @@ -97,73 +96,73 @@ _Note_: You don't have to follow all steps below - reuse starter project code as

### Header

1. Open `/crate/src/page/partial/header.rs` in your IDE.
1. Open `src/page/partial/header.rs` in your IDE.
1. Delete function `header_visibility`.
1. Write a new body for function `view`.

### Footer

1. Open `/crate/src/page/partial/footer.rs` in your IDE.
1. Open `src/page/partial/footer.rs` in your IDE.
1. Write a new body for function `view`.

### 404

1. Open `/crate/src/page/not_found.rs` in your IDE.
1. Open `src/page/not_found.rs` in your IDE.
1. Write a new body for function `view`.

### Home page

1. Open `/crate/src/page/home.rs` in your IDE.
1. Open `src/page/home.rs` in your IDE.
1. Write a new body for function `view`.

### About page

1. Open `/crate/src/page/about.rs` in your IDE.
1. Open `src/page/about.rs` in your IDE.
1. Write a new body for function `view`.

### App core

1. Open `/crate/src/lib.rs` in your IDE.
1. Open `src/lib.rs` in your IDE.
1. Change `TITLE_SUFFIX` value.
1. Delete `MAIL_TO_KAVIK` and `MAIL_TO_HELLWEB`.
1. Write a new body for function `view`.

### Favicons

1. Delete or replace files in `/favicons`.
1. Open `/entries/templates/favicons.hbs` in your IDE.
1. Open `static/templates/favicons.hbs` in your IDE.
1. Delete content or update it.
- _Note_: Templates are written in [Handlebars](https://handlebarsjs.com/).

### Loading page

1. Open `/entries/templates/loading_page.hbs` in your IDE.
1. Open `static/templates/loading_page.hbs` in your IDE.
1. Delete content or update it.

### Social media & basic settings

1. Open `/entries/templates/social_media.hbs` in your IDE.
1. Open `static/templates/social_media.hbs` in your IDE.
1. Delete content or update it.

### Basic HTML

1. Open `/entries/index.hbs` in your IDE.
1. Open `static/index.hbs` in your IDE.
1. Update content.

### Fonts

1. Delete or replace files and directories in `/static/fonts`.
1. Delete or replace files and directories in `static/fonts`.
1. Open `/css/fonts.css` in your IDE.
1. Delete content or update it.

### Images & other files

1. Delete or replace files in `/static/images`.
1. Delete `/static/Martin_Kavik_resume.pdf`.
1. Delete or replace files in `static/images`.
1. Delete `static/Martin_Kavik_resume.pdf`.

### TailwindCSS

1. Open `/configs/tailwind.config.js` in your IDE.
1. Open `tailwind.config.js` in your IDE.
1. Update content or replace it with the default one:

```js
Expand All @@ -189,25 +188,25 @@ And how to setup Github Actions with deploy into Netlify.

1. Format: `$ cargo make fmt` (it overwrites files) or only `$ cargo make fmt_check`
1. You can modify format settings in:
- `/crate/rustfmt.toml`
- `/crate/Makefile.toml` - tasks `fmt` and `fmt_check`
- `rustfmt.toml`
- `Makefile.toml` - tasks `fmt` and `fmt_check`
1. Lint: `$ cargo make clippy`
1. You can modify linter settings in:
- `/crate/Makefile.toml` - task `clippy`
- `Makefile.toml` - task `clippy`

### Testing

1. Run `$ cargo make test_h firefox` for headless testing in Firefox.
- There are more similar commands - see `/crate/Makefile.toml`
- _Note_: There is only one test in this project (`crate/tests/test.rs`), see [seed-rs-realworld](https://github.com/seed-rs/seed-rs-realworld) for more examples.
- There are more similar commands - see `Makefile.toml`
- _Note_: There is only one test in this project (`tests/test.rs`), see [seed-rs-realworld](https://github.com/seed-rs/seed-rs-realworld) for more examples.
1. If you want to test prerendered website:
1. `$ yarn build:prerender`
1. `$ yarn serve:dist`
1. Open [localhost:8000](http://localhost:8000) in a browser.
1. _Tip_: Always test it also in production environment because e.g. routing is a little bit different among servers.
1. **Always run `$ cargo make verify`** before push to make sure CI pipeline will accept your code.
- It'll format your code, lint it and start headless tests in Firefox.
- You can change its behaviour in `/crate/Makefile.tom` - task `verify` (similar task `verify_only` is used in CI).
- You can change its behaviour in `Makefile.tom` - task `verify` (similar task `verify_only` is used in CI).

### Netlify

Expand Down
4 changes: 2 additions & 2 deletions RELEASE_CHECKLIST.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

1. Update `CHANGELOG.md` (content + increment version).
1. Update version also in `package.json`.
1. In `/crate`: `cargo make verify`
1. Run `cargo make verify`
1. Commit "v#.#.#".
1. Push.
1. Wait for the CI to go green.
1. Create GitHub release (create a new tag).
1. Create GitHub release (create a new tag).
4 changes: 0 additions & 4 deletions configs/tsconfig.css_classes.json

This file was deleted.

6 changes: 0 additions & 6 deletions entries/index.ts

This file was deleted.

6 changes: 6 additions & 0 deletions index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import "./css/styles.css";

(async () => {
// Note: files in `./pkg/` will be created on the first build.
await import("./pkg/index");
})();
12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
{
"author": "Martin Kavík <[email protected]>",
"name": "seed-quickstart-webpack",
"version": "0.6.0",
"version": "0.7.0",
"repository": "https://github.com/MartinKavik/seed-quickstart-webpack",
"license": "MIT",
"scripts": {
"start": "yarn generate:css_classes && webpack-dev-server --config configs/webpack.config.js -d",
"start:release": "yarn generate:css_classes && webpack-dev-server --config configs/webpack.config.js --mode=production",
"build": "yarn generate:css_classes && webpack --config configs/webpack.config --mode=development",
"build:release": "yarn generate:css_classes && webpack --config configs/webpack.config --mode=production",
"start": "yarn generate:css_classes && webpack-dev-server --config webpack.config.js -d",
"start:release": "yarn generate:css_classes && webpack-dev-server --config webpack.config.js --mode=production",
"build": "yarn generate:css_classes && webpack --config webpack.config --mode=development",
"build:release": "yarn generate:css_classes && webpack --config webpack.config --mode=production",
"build:prerender": "yarn build:release && yarn prerender",
"serve:dist": "yarn serve -s -l 8000 dist",
"prerender": "yarn concurrently -k -s first \"yarn serve:dist\" \"wait-on http://localhost:8000/ && react-snap\"",
"generate:css_classes": "webpack --config configs/webpack.css_classes.config --mode=development"
"generate:css_classes": "webpack --config webpack.css_classes.config --mode=development"
},
"reactSnap": {
"source": "dist",
Expand Down
8 changes: 4 additions & 4 deletions configs/postcss.config.js → postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const postcssRustHelpers = require("../scripts/postcss_rust_helpers");
const postcssRustHelpers = require("./scripts/postcss_rust_helpers");

module.exports = ({ file, options, env }) => {
// we want to filter out unused css classes in production mode
// NOTE: options.mode is set in webpack configs, in the postcss loader ctx
// NOTE: options.mode is set in webpack, in the postcss loader ctx
const usedCssClasses =
options.mode === "production"
? postcssRustHelpers.getUsedCssClasses()
Expand All @@ -11,9 +11,9 @@ module.exports = ({ file, options, env }) => {
return {
plugins: [
require("postcss-import"),
require("tailwindcss")('configs/tailwind.config.js'),
require("tailwindcss")('tailwind.config.js'),
require("postcss-typed-css-classes")({
output_filepath: "crate/src/generated/css_classes.rs",
output_filepath: "src/generated/css_classes.rs",
generator: "rust",
filter: class_ => {
if (options.mode === "production") {
Expand Down
File renamed without changes.
6 changes: 3 additions & 3 deletions scripts/postcss_rust_helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const path = require('path')
const findFiles = require('find');
const fs = require('fs');

// Helpers are used by `configs/postcss.config.js`.
// Helpers are used by `postcss.config.js`.

module.exports = {
escapeClassName: escapeClassName,
Expand Down Expand Up @@ -85,7 +85,7 @@ function getKeywords () {
function getUsedCssClassesInRust() {
const usedCssClasses = new Set;
// search in Rust files
const files = findFiles.fileSync(/\.rs$/, './crate/src');
const files = findFiles.fileSync(/\.rs$/, './src');
files.forEach(filePath => {
const fileContent = fs.readFileSync(filePath, 'utf8')
// example of a used class in Rust code is `C.mb_16`
Expand All @@ -107,7 +107,7 @@ function getUsedCssClassesInRust() {
function getUsedCssClassesInHandlebars() {
const usedCssClasses = new Set;
// search in Handlebars templates
const files = findFiles.fileSync(/\.hbs$/, './entries');
const files = findFiles.fileSync(/\.hbs$/, './static');
files.forEach(filePath => {
const fileContent = fs.readFileSync(filePath, 'utf8')
// example of a used class in HTML code is `class="mb-16 text-blue-1"` or `class='font-bold'`
Expand Down
2 changes: 1 addition & 1 deletion crate/src/generated/mod.rs → src/generated/mod.rs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// File `css_classes.rs` is (re)created during webpack compilation.
// (see `/configs/postcss.config.js`)
// (see `postcss.config.js`)
pub mod css_classes;
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
3 changes: 1 addition & 2 deletions configs/tsconfig.base.json → tsconfig.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,5 @@
"strictNullChecks": true,
"strictPropertyInitialization": true,
"forceConsistentCasingInFileNames": true
},
"include": ["../**/*/"]
}
}
4 changes: 4 additions & 0 deletions tsconfig.css_classes.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "./tsconfig.base",
"include": ["./static/index.css_classes.ts"]
}
File renamed without changes.
13 changes: 6 additions & 7 deletions configs/webpack.config.js → webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const path = require("path");
const dist = path.resolve(__dirname, "../dist");
const dist = path.resolve(__dirname, "dist");

const WebpackBar = require("webpackbar");
const HtmlWebpackPlugin = require("html-webpack-plugin");
Expand All @@ -16,7 +16,7 @@ module.exports = (env, argv) => {
},
entry: {
// Bundle root with name `app.js`.
app: path.resolve(__dirname, "../entries/index.ts")
app: path.resolve(__dirname, "index.ts")
},
output: {
// You can change it to e.g. `/ui/`, but also edit `historyApiFallback` below and `<base href..`> in `index.hbs`.
Expand Down Expand Up @@ -54,12 +54,11 @@ module.exports = (env, argv) => {
}),
// Add scripts, css, ... to html template.
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../entries/index.hbs")
template: path.resolve(__dirname, "static/index.hbs")
}),
// Compile Rust.
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, "../crate"),
outDir: path.resolve(__dirname, "../crate/pkg")
crateDirectory: __dirname
}),

// You can find files from folder `../static` on url `http://my-site.com/static/`.
Expand All @@ -79,7 +78,7 @@ module.exports = (env, argv) => {
resolve: {
extensions: [".ts", ".js", ".wasm"],
alias: {
crate: path.resolve(__dirname, "../crate")
crate: __dirname
}
},
module: {
Expand Down Expand Up @@ -111,7 +110,7 @@ module.exports = (env, argv) => {
},
{
test: /\.ts$/,
loader: "ts-loader?configFile=configs/tsconfig.json"
loader: "ts-loader?configFile=tsconfig.json"
},
{
test: /\.css$/,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = (env, argv) => {
return {
entry: path.resolve(__dirname, "../entries/index.css_classes.ts"),
entry: path.resolve(__dirname, "./static/index.css_classes.ts"),
output: {
path: path.resolve(__dirname, "../dist"),
filename: "css_classes.js"
Expand All @@ -31,7 +31,7 @@ module.exports = (env, argv) => {
},
{
test: /\.ts$/,
loader: "ts-loader?configFile=configs/tsconfig.css_classes.json"
loader: "ts-loader?configFile=tsconfig.css_classes.json"
},
{
test: /\.css$/,
Expand Down

0 comments on commit e2835b1

Please sign in to comment.