I have a React app (created with npx create-react-app
) that doesn't have Webpack installed. I want to add lucid-cardano
to it. Going through Lucid documentation, I found that Webpack is a dependency, since I need to enable webpack.config.js
file with the following configuration to make it work:
experiments: {
asyncWebAssembly: true,
topLevelAwait: true,
layers: true // optional, with some bundlers/frameworks it doesn't work without
}
I tried to install Webpack in my project but it seems I am missing a lot of things, since I not only have to add the webpack.config.js
file but also some loaders and a server to serve the bundle.js
generated (I got to this point with no issues).
This is the webpack.config.js
file I generated for my project:
// Webpack uses this to work with directories
const path = require('path');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
experiments: {
asyncWebAssembly: true,
topLevelAwait: true,
layers: true // optional, with some bundlers/frameworks it doesn't work without
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
// Path to your entry point. From this file Webpack will begin its work
entry: './src/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{ test: /\.css$/, use: { loader: "css-loader" } }
]
}
};
What are the steps I am missing to correctly serve my frontend and be able to use lucid-cardano
?