EatTheBlocks Forum

Two or more frontends for a project with webpack

My scenario is that I have two contracts where one interfaces to the other. Each contract has a very basic frontend based on the Day 5 CRUD tutorial. These frontends work independently but I have to swap in the index.js and index.html files in the client and public directories and then run npm start each time.

I want to be able to serve up both frontends from the project directory simultaneously. It would appear that this is controlled by the webpack.config.js file but the exact syntax eludes me at this time. I have created subdirectories under the client and public folders for each index.js and index.html file:

Webpack clearly has it’s own learning cure but for now I just need a solution to this issue so that I can continue testing.

I attempted to piece something together from the forums (below) but it’s just guesswork at this point. It’s currently not recognizing the plugins.

const path = require(‘path’);

module.exports = {
mode: ‘development’,
entry: {
‘po’: ‘./client/po/index.js’,
‘org’: ‘./client/org/index.js’
},
output: {
path: path.resolve(__dirname, ‘public’),
filename: ‘bundle.js’, // string
},
devServer: {
contentBase: path.join(__dirname, ‘public’),
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
chunks: [‘po’],
filename: ‘./public/po/index.html’
}),
new HtmlWebpackPlugin({
chunks: [‘org’],
filename: ‘./public/org/index.html’
})
]
};

Thanks,

Paul

For producing 2 different bundles you can check their doc here.

Maybe more simple is just to have 2 routes on your frontend, one for smart contract 1, one for smart contract 2. (i.e route 1 will be with an url, route 2 with another).

Then you render the frontend conditionally on which route is selected.