This may very well fall under the 'yet another' category, but it's my take on CMSs and built with nodejs and typescript. The aim is to provide developers a starting project that only needs skinning, leaving the content management to someone else.
At the moment it isn't production ready since it hasn't been thoroughly tested, but you can clone it and have a look around.
I'm using a standard MVC approach with the following backend tools:
- Expressjs
- Twigjs
- TypeORM + TypeDI
The enitities pretty much contain db table columns and before/after Insert/Update handlers
The controllers are slim and only call methods from services that basically do the heavy lifting in grabbing and processing data from the db.
Frontend-wise, bootstrap 4 is used for css and a handful of libraries with no js dependencies. jQuery is brought in though, only in the admin area, for the dashboard template.
You can find the full list of dependencies further down in the "Thanks" section.
git clone [email protected]:cstapetrei/npress.git
npm install
- copy env.sample.ts to env.ts and fill in your db info
- create a database with the name you typed in the 'database' field in env.ts
npm run migration:run
npm run dev
or
npm run prod
When developing, the sources will get recompiled and server restarted on any .ts or .twig file save.
In case you're using VSCode, here's a launch.json for debugging purposes:
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 9300,
"restart": true,
"protocol": "inspector",
"address": "localhost"
}
First start the server with "npm run dev" and afterwards click the 'attach to process' in VScode run configurations. If everything is in order, you'll see a "Debugger attached" message in the terminal.
Finally, visit http://localhost:3000/ for the public area. For the admin section go to http://localhost:3000/admin and login with user: [email protected] and password: 123123
Everything in the admin dashboard should be pretty much self explanatory.
The only "foreign" notion could be Codeblocks. In this section you define twig blocks that can be reused in the page editor section. Here's an example:
// let's say we have the following block
[[my-code-slug attr1=value1 attr2=value2]]
// defined with
<p>This is my code {{ attr1 }} {{ attr2 }}</p>
When rendering, every pair of [[ ]] will get replaced by their corresponding definition (with attributes being replaced by their values).
If you use an undefined slug, the block will just be erased.
You can add a custom theme to your build by adding another folder in src/views/themes that must include an index.twig. Inside you can either extend the default layout.twig and override it's blocks or go crazy with anything else :)
Due to the compiled nature of typescript, the non-twig assets in a theme folder (for example: css, js, images) are copied to the static folder on a server (re)start so that express can serve them. Also, the paths for these assets need to use the twig filter theme_asset and have their path relative to the current theme folder.
There is a barebones my-theme folder already created for inspiration, but please ignore it's esthetics since it's there only as a code sample. :)
The education theme has in import folder with an .sql file and some other pics. To see what it looks like you need to import the sql to your db and afterwards copy the pics to your src/static/uploads folder.
Thanks to these guys for the free version so I could migrate it here. :)
Any modern browser should do just fine. Older browsers most likely won't work since they don't support javascript arrow functions and other ES6 features natively.
To the following (or, in other words, what this project is using) for their awesome work :)
- NodeJS
- Typescript
- ExpressJS
- TypeORM
- TypeDI
- class-validator
- Formidable
- Node Mysql
- Node Postgres
- TS Node
- GulpJS
- gulp-newer
- gulp-typescript
- gulp-sourcemaps
- AdminLTE - v3 powers the admin area
- jQuery
- MomentJS
- Bootstrap 4
- CodeMirror
- Bootstrap Native
- DropzoneJS
- flatpickr
- Jodit
- Luminous
- Noty
- Sortable
- v8n
- window.fetch polyfill
- Font Awesome 5