First run improvements (improved DX and docs) (#169)

* add some improvements for project start up

* update development docs

* add note about npx

* fix build command in Dockerfile.prod

* doc update

README.md

@@ -1,66 +1,92 @@
 # CodeX Docs
 
-Engine for documentation website using [Editor.js](//editorjs.io)
+CodeX Docs is a simple but powerful documentation engine for CodeX powered with [Editor.js](//editorjs.io).
+
+You can use CodeX Docs for product documentation, for internal team docs, or for any other documentation.
 
 ![](https://capella.pics/e3b8a441-53dc-4da6-a7a9-76b12629983b.jpg)
 
 ## Development
 
-### Set up the environment
+### Prerequisites
 
-Install node version manager and required version of node js
+- NodeJS (v16.x)
-
+- npx (installed by default with npm)
-```
+- Yarn
-$ chmod u+x ./bin/nvm.sh && ./bin/nvm.sh
-$ nvm install
-```
-
-> For windows use [nvm for windows](https://github.com/coreybutler/nvm-windows)
-
-Install Yarn package manager
-```
-$ brew install yarn --without-node
-```
-
-> Use `--without-node` flag  because nvm version of Node is used
-
-Or download it directly from the [website](https://yarnpkg.com/en/docs/install)
 
 ### Install npm packages
 
+```shell
+yarn install --frozen-lockfile
 ```
-$ yarn install --frozen-lockfile
+
+### Create config file
+
+```shell
+cp .codexdocsrc.sample .codexdocsrc
 ```
 
+### Run application (both frontend and backend)
+
+```shell
+yarn dev
+```
+
+Then you can open browser and navigate to [http://localhost:3000](http://localhost:3000).
+
+Now you can [authenticate](https://github.com/codex-team/codex.docs/#authentication) in the application and start creating your documentation.
+
 ### Available scripts
-#### Compile to Javascript
+
-```
+#### Start whole application (backend and frontend in watch mode)
-$ yarn compile
+
+```shell
+yarn dev
 ```
 
-#### Start the server
+#### Start backend in development mode
 
+```shell
+yarn start-backend
 ```
-$ yarn start
+
+#### Compile TypeScript files
+
+```shell
+yarn compile
+```
+
+#### Build frontend
+
+To build frontend sources run the following command:
+
+```shell
+yarn build-frontend
+```
+
+To build frontend and watch for changes run the following command:
+
+```shell
+yarn build-frontend:dev
 ```
 
 #### Run ESLint with `--fix` option
 
-```
+```shell
-$ yarn lint
+yarn lint
 ```
 
 #### Run tests
 
-```
+```shell
-$ yarn test
+yarn test
 ```
 
 ### Authentication
 
 To manage pages you need to authorize (available on `/auth`).
 
-To generate password use `yarn generatePassword [password]` command.
+To set password use `yarn generatePassword:ts [password]` command and restart the server.
 
 ## Release process
 

docker/Dockerfile.prod

@@ -16,7 +16,7 @@ RUN yarn install
 
 COPY . .
 
-RUN yarn build
+RUN yarn build-frontend
 
 RUN yarn compile
 

package.json

@@ -9,18 +9,17 @@
     "> 1%"
   ],
   "scripts": {
-    "start": "cross-env NODE_ENV=production nodemon --config nodemon.json ./src/bin/server.ts",
+    "dev": "concurrently \"yarn start-backend\" \"yarn build-frontend:dev\"",
-    "start:dev": "cross-env NODE_ENV=development nodemon --config nodemon.json ./src/bin/server.ts",
+    "start-backend": "cross-env NODE_ENV=development npx nodemon --config nodemon.json ./src/bin/server.ts",
-    "test": "cross-env NODE_ENV=testing mocha --recursive ./dist/test --exit",
+    "compile": "tsc && copyfiles -u 3 ./src/**/*.twig ./dist/backend/views && copyfiles -u 1 ./src/**/*.svg ./dist/",
-    "test:ts": "cross-env NODE_ENV=testing ts-mocha ./src/test/*.ts ./src/test/**/*.ts --exit",
+    "build-frontend": "webpack --mode=production",
+    "build-frontend:dev": "webpack --mode=development --watch",
+    "test:js": "cross-env NODE_ENV=testing mocha --recursive ./dist/test --exit",
+    "test": "cross-env NODE_ENV=testing ts-mocha ./src/test/*.ts ./src/test/**/*.ts --exit",
     "lint": "eslint --fix --ext .ts ./src/backend",
-    "build": "webpack --mode=production",
-    "build:dev": "webpack --mode=development --watch",
-    "precommit": "yarn lint && yarn test:ts",
     "generatePassword:ts": "ts-node ./src/generatePassword.ts",
     "generatePassword": "node ./dist/generatePassword.js",
-    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest",
+    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
-    "compile": "tsc && copyfiles -u 3 ./src/**/*.twig ./dist/backend/views && copyfiles -u 1 ./src/**/*.svg ./dist/"
   },
   "dependencies": {
     "bcrypt": "^5.0.1",
@@ -45,9 +44,6 @@
     "uuid4": "^2.0.2"
   },
   "devDependencies": {
-    "cross-env": "^7.0.3",
-    "ts-node": "^10.1.0",
-    "@editorjs/embed": "^2.5.1",
     "@babel/core": "^7.17.5",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/polyfill": "^7.12.1",
@@ -57,6 +53,7 @@
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
     "@editorjs/editorjs": "^2.23.2",
+    "@editorjs/embed": "^2.5.1",
     "@editorjs/header": "^2.6.2",
     "@editorjs/image": "^2.6.2",
     "@editorjs/inline-code": "^1.3.1",
@@ -93,7 +90,9 @@
     "babel-loader": "^8.2.3",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
+    "concurrently": "^7.1.0",
     "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.7.0",
     "cssnano": "^5.1.0",
     "eslint": "^7.31.0",
@@ -102,7 +101,6 @@
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-node": "^11.1.0",
     "highlight.js": "^11.1.0",
-    "husky": "^1.1.2",
     "mini-css-extract-plugin": "^2.6.0",
     "mocha": "^5.2.0",
     "mocha-sinon": "^2.1.2",
@@ -126,6 +124,7 @@
     "rimraf": "^3.0.2",
     "sinon": "^11.1.2",
     "ts-mocha": "^8.0.0",
+    "ts-node": "^10.1.0",
     "typescript": "^4.3.5",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"