An express and webpack boilerplate for creating SPAs. The boilerplate is frontend agnostic and Features:
- hot reload
- convenient configured webpack loaders
- convenient configured express middlewares
There are 2 ways to use this boilerplate. You can fork the code (shown below) or you can recreate it using it as a guideline like a right copycat.
This will create a fork with two remotes so you can still push to your own repository and retrieve updates from this.
mkdir $APPLICATION_NAME
cd $APPLICATION_NAME
git init
git remote add upstream [email protected]:TimurKiyivinski/express-webpack-boilerplate.git
git pull upstream master
git remote add origin $YOUR_REPO_URL
git push -u origin master
That should be it! If you use HTTPS
instead of SSH
because you're some sort of hipster that remembers passwords, replace [email protected]:TimurKiyivinski/express-webpack-boilerplate.git
with https://github.com/TimurKiyivinski/express-webpack-boilerplate.git
instead.
Copy env.json.example
to env.json
and run npm install
. Make sure you have webpack all set up.
Webpack is configured in webpack.config.js
and loaded by index.js
when the environment
key in env.json
is configured as development
. You may add and customize the loaders depending on your frontend stack. Webpack code is built and bundled to the public/
directory.
Your index.html
should serve as the loader for webpack and should serve as the entrypoint for your webpack bundle.
Your main application entrypoint is in app/main.js
. Your entire frontend stack goes into the app/
directory.
This should be logical if you're familiar with Express. You can create your APIs here.
The boilerplate is configured such that all routes for the relative path assets/
are routed to index.html
to be handled by your frontend router. Put your Express code after the place noted:
// Put your Express code here
app.use((req, res, next) => {
// This is an example middleware
next()
})
app.get('/v1/users', ...) // Example