Hello,
I have been following the exercise runbooks of module "Enable real-time updates in a web application using Azure Functions and SignalR Service" unit 7: Exercise - Use a storage account to host a static website and I'd got errors while building the static web app for deployement and client app wasn't working at the end.
After several back and forth reviewing steps, code, troubleshouting the environment and looking at solution code and I figured out that there are several missing instructions in the runbook.
Second step "Update the client .env": is pretty useless as it is as we are not trying to run the client locally on the other hand we need to create a helper file ./start/client/src/env.js to expose BACKEND_URL env variable with bellow code
const BACKEND_URL = process.env.BACKEND_URL;
console.log(`CLIENT ENV BACKEND_URL: ${BACKEND_URL}`);
export {
BACKEND_URL
};
Also amend the ./start/client/webpack.config.js to modify
plugins: [
new Dotenv({
systemvars: true,
}),
new CopyWebpackPlugin({
patterns: [
{ from: './src/style.css', to: './' },
{ from: './src/favicon.ico', to: './' },
{ from: './index.html', to: './'}
],
}),
]
into
plugins: [
new Dotenv({
systemvars: true,
}),
new CopyWebpackPlugin({
patterns: [
{ from: './src/style.css', to: './' },
{ from: './src/favicon.ico', to: './' },
{ from: './index.html', to: './'}
],
}),
]
This will allow in the next step to have Github Actions workflow to load BACKEND_URL from secret variables rather than from the missing .env file which is not uploaded in git repository (.gitignore)With those two additional steps the exercise can run smoothly.
Regards
This question is related to the following Learning Module