A template project will use expressjs as backend and ReactJS-AdminLTE as frontend.
A full-stack boilerplate template project using expressjs as backend
and AdminLTE as theme. react as front-end
This project is based on react-starter-kit
clone from github
git clone https://github.com/imhazige/expressjs-adminlte-project-template.git
install yarn if need npm install --global yarn
cd to the folder
run yarn install
develop run yarn start
release run yarn start -- --release
build run yarn run build -- --release
, then node build/server.js
yarn run build release
and add the build folder to gitnode build/server.js
More usage refer to react-starter-kit start guid and doc list
see the example page: [lte-test] (./src/routes/lte-test/index.js)
in folder src/routes define page with the page name as a subfolder, need a index.js as a main script and include the component under the same folder or in the component folder do the rendering.
in folder src/components, define a component with a named folder, must include a package.json
in folder public
in the code src/config.js
connect with sequelize src/data/sequelize.js
sequelize model defined under src/data/models
normally you need not remove the User… Models, as the passort code depend on it.
see
see
using log4js
see <./src/common/log.js>, config is in the <./src/config.js>
you can import image directly like
import userimg from './logo-small.png';
<img src={userimg} className="img-circle" alt="User Image" />;
or put the image under the public folder which will be accessabile via path “/“
you can load css directly via css loader
import s from './Navigation.css';
<div className={s.someclass}>
export default withStyles(s)(Navigation);
class imported from modules is able to refer to class name directly.
import fetch from 'node-fetch';
fetch(url)
.then(res => res.json())
.then(json => {
})
.catch(err => {});
run yarn run test
will run all the test script with file extension .test.js
run yarn run test <path-to-xxx.test.js>
will run the one test script
see <./test/api/t1.test.js> as a example
Add script in package.json"rone": "babel-node"
Then at the root folder of the project, run yarn rone <path-to-script>
run
yarn add sqlite3
If you import external CSS file from your internal CSS then it will be inlined and processed with CSS modules.
instead, you should import css from js
for example / /
it try to resolve the react from its own dependency - ‘ERROR in ./node_modules/adminlte-reactjs/node_modules/react-dom/lib/ReactDOMInvalidARIAHook.js’
so be careful when you think you need change the html component. or if you should consider deffiernt html for different page
if you want load different resource.
look into this pull, https://github.com/kriasoft/react-starter-kit/pull/1608/files, add these two lines to coresponding code if you encountered these problem.
error like document is not defined
use import
on the top of the code will cause import in server side render phase, to solve it, use client side require in the client code
example:
componentDidMount = () => {
//import echarts when component loaded
const echarts = require('echarts');
...
}
it require to use defined string when invoke require, also __dirname
will be the build folder instead, do not rely on it.
const s = '../model'
var model = require(s).default; //error
var model = require('../model').default //correct
refer to the issue