1

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']
        })
    ]
}

0

You must log in to answer this question.

Browse other questions tagged .