This is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Amplify Auth Flow</title>
</head>
<body>
<!-- Navbar -->
<ul class="nav justify-content-end bg-light">
<li class="nav-item">
<a id="nav-logout" class="nav-link" href="/helloworld.html">Hello</a>
</li>
</ul>
<!-- Main Content -->
<section id="landing-page">
<div class="d-flex justify-content-center min-vh-100">
<div class="align-self-center">
<h1>My Landing Page</h1>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous">
</script>
<script src="main.bundle.js"></script>
</body>
</html>
This is package.json file
{
"name": "amplify-js-app",
"version": "1.0.0",
"description": "Amplify JavaScript Example",
"dependencies": {
"aws-amplify": "latest"
},
"devDependencies": {
"copy-webpack-plugin": "^6.1.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"scripts": {
"start": "webpack && webpack-dev-server --mode development",
"build": "webpack"
}
}
This is webpack.config.js file
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/
},
]
},
devServer: {
client: {
overlay: true,
},
hot: true,
watchFiles: ['src/*', 'index.html']
},
plugins: [
new CopyWebpackPlugin({
patterns: ['index.html']
}),
new webpack.HotModuleReplacementPlugin()
]
};
I use npm start to start webpack server. Then I go to http://localhost:8080/ to access my index.html page. When I try to access the hello link from my index.html page to get to helloworld.html page, I get Cannot GET /helloworld.html and the network is 404.
But when I use vscode extension Open with Live Server. It works just fine. What I am thinking is the webpack server cannot find helloworld.html file even though it is in the same directory.
File structure:
amplify-js-app
|
|__index.html
|__helloworld.html
|__package.json
|__package-lock.json
|__webpack.config.js
Comments
Post a Comment