here are my configurations if that helps at all.
webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
let localCanisters, prodCanisters, canisters;
function initCanisterIds() {
try {
localCanisters = require(path.resolve(".dfx", "local", "canister_ids.json"));
} catch (error) {
console.log("No local canister_ids.json found. Continuing production");
}
try {
prodCanisters = require(path.resolve("canister_ids.json"));
} catch (error) {
console.log("No production canister_ids.json found. Continuing with local");
}
const network =
process.env.DFX_NETWORK ||
(process.env.NODE_ENV === "production" ? "ic" : "local");
canisters = network === "local" ? localCanisters : prodCanisters;
for (const canister in canisters) {
process.env[canister.toUpperCase() + "_CANISTER_ID"] =
canisters[canister][network];
}
}
initCanisterIds();
const isDevelopment = process.env.NODE_ENV !== "production";
const asset_entry = path.join(
"src",
"dtc_assets",
"src",
"index.html"
);
module.exports = {
target: "web",
mode: isDevelopment ? "development" : "production",
entry: {
// The frontend.entrypoint points to the HTML file for this build, so we need
// to replace the extension to `.js`.
index: path.join(__dirname, asset_entry).replace(/\.html$/, ".jsx"),
},
devtool: isDevelopment ? "source-map" : false,
optimization: {
minimize: !isDevelopment,
minimizer: [new TerserPlugin()],
},
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx"],
fallback: {
assert: require.resolve("assert/"),
buffer: require.resolve("buffer/"),
events: require.resolve("events/"),
stream: require.resolve("stream-browserify/"),
util: require.resolve("util/"),
},
},
output: {
filename: "index.js",
path: path.join(__dirname, "dist", "dtc_assets"),
},
// Depending in the language or framework you are using for
// front-end development, add module loaders to the default
// webpack configuration. For example, if you are using React
// modules and CSS as described in the "Adding a stylesheet"
// tutorial, uncomment the following lines:
module: {
rules: [
{ test: /\.(ts|tsx|jsx)$/, loader: "ts-loader" },
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, asset_entry),
cache: false
}),
new CopyPlugin({
patterns: [
{
from: path.join(__dirname, "src", "dtc_assets", "assets"),
to: path.join(__dirname, "dist", "dtc_assets"),
},
],
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
DTC_CANISTER_ID: canisters["dtc"],
II_URL : isDevelopment ?
"http://localhost:8000?canisterId=rwlgt-iiaaa-aaaaa-aaaaa-cai#authorize" :
"https://identity.ic0.app/#authorize",
}),
new webpack.ProvidePlugin({
Buffer: [require.resolve("buffer/"), "Buffer"],
process: require.resolve("process/browser"),
}),
],
// proxy /api to port 8000 during development
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
changeOrigin: true,
pathRewrite: {
"^/api": "/api",
},
},
},
hot: true,
static: {
directory: path.join(__dirname, "./src/dtc_assets"),
watch: true
},
port: 3000
},
};
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": [
"ES2020",
"DOM"
],
"module": "commonjs",
"strict": true,
"target": "es2020"
}
}
package.json:
{
"name": "hello_assets",
"version": "0.1.0",
"description": "Internet Computer starter application",
"keywords": [
"Internet Computer",
"Motoko",
"JavaScript",
"Canister"
],
"scripts": {
"devStart": "nodemon server.jsx",
"build": "webpack",
"prebuild": "npm run copy:types",
"start": "webpack serve --mode development --env development",
"prestart": "npm run copy:types",
"copy:types": "rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations"
},
"devDependencies": {
"@dfinity/agent": "^0.10.1",
"@dfinity/auth-client": "^0.10.1",
"@dfinity/authentication": "^0.10.1",
"@dfinity/candid": "^0.10.1",
"@dfinity/identity": "^0.10.1",
"@dfinity/principal": "^0.10.1",
"assert": "2.0.0",
"buffer": "6.0.3",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.4.0",
"events": "3.3.0",
"html-webpack-plugin": "5.3.1",
"mini-css-extract-plugin": "^2.4.3",
"node-sass": "^7.0.1",
"nodemon": "^2.0.15",
"process": "0.11.10",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.43.3",
"sass-loader": "^12.2.0",
"stream-browserify": "3.0.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "5.1.1",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"util": "0.12.3",
"webpack": "^5.24.4",
"webpack-cli": "4.9.0",
"webpack-dev-server": "^4.7.2"
},
"browserslist": [
"last 2 chrome version",
"last 2 firefox version",
"last 2 safari version",
"last 2 edge version"
],
"dependencies": {
"@stripe/react-stripe-js": "^1.7.0",
"@stripe/stripe-js": "^1.22.0",
"@types/react": "^17.0.34",
"@types/react-dom": "^17.0.11",
"axios": "^0.24.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2021": "^1.0.0",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"get-youtube-id": "^1.0.1",
"jsonwebtoken": "^8.5.1",
"nvm": "^0.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-youtube": "^7.13.1",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0"
}
}
dfx.json:
{
"canisters": {
"dtc": {
"main": "src/dtc/main.mo",
"type": "motoko"
},
"dtc_assets": {
"dependencies": [
"dtc"
],
"frontend": {
"entrypoint": "src/dtc_assets/src/index.html"
},
"source": [
"src/dtc_assets/assets",
"dist/dtc_assets/"
],
"type": "assets"
}
},
"defaults": {
"build": {
"args": "",
"packtool": ""
}
},
"dfx": "0.9.3",
"networks": {
"local": {
"bind": "127.0.0.1:8000",
"type": "ephemeral"
}
},
"version": 1
}
