So this is my first self-hosted site and server, so go easy on me please! XD
I've been developing locally using webpack and vanillajs. My server is hosted on digitalocean with ubuntu. I build locally, push to a github repo, and then pull that repo in to my server. I plan to use github actions from next week, but for the time being that's the (maybe less than ideal?) set-up I learnt from frontend masters
My Server folder structure:
www
|--site-folder
|--src
|-- css
|-- js
|-- index.html
// etc
|--dev
|-- index.html
|-- index.bundle.js
|-- page2.html
|-- page2.bundle.js
|-- image.png
//... assets/more js/html files etc...
I'm just wondering both where should I put my express app that's going to serve my html, and how I can better structure webpack's output?
As you can see it has just output everything in to one folder, but I'd like it to have a better structure. Should I have a script that moves files after every git pull
? Or should I be specifying better paths in my webpack config?
This is my webpack config at the moment, I guess I could add path.resolve(__dirname, 'dist/js')
, look for an output path option for each of the relevant module rules, and do the same with HtmlWebpackPlugin
or add a path before the filename?
I could then place a simple express app in the route directory?
Sorry, I'm just a little confused! Appreciate any help
module.exports = {
entry: {//snip},
output: {
filename: '[name].bundle.[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test:/\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.js$/i,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
type: 'asset/resource'
},
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'admin.html',
template: './src/admin.html',
chunks: ['admin']
})
]
}