hipo / cra-template-hipo-typescript Goto Github PK
View Code? Open in Web Editor NEWCustom CRA TypeScript template of Hipo web team for creating new web apps
Custom CRA TypeScript template of Hipo web team for creating new web apps
Usually we need to add polyfills to be able to use 3rd party libraries such as algosdk
.
I have created a script to easily do this, we can include this in the template:
// add-polyfills.mjs
/* eslint-disable consistent-return */
import util from "util";
import {exec} from "child_process";
import fs from "fs";
// promisify `exec` so we can "await" it
const execAsync = util.promisify(exec);
// content of config-overrides.js file to be added
const CONFIG_OVERRIDES_CONTENT = `
const webpack = require("webpack");
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
buffer: require.resolve("buffer/"),
});
config.resolve.fallback = fallback;
config.ignoreWarnings = [/Failed to parse source map/];
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);
return config;
};
`;
async function main() {
await installReactAppRewired();
createConfigOverrides();
updateNpmScripts();
}
function installReactAppRewired() {
return execAsync(
"npm install react-app-rewired --save-dev",
(error, stdout, stderr) => {
if (error) {
console.log(`ERROR while installing react-app-rewired: ${error.message}`);
return;
}
if (stderr) {
console.log(`stderr: ${stderr}`);
return;
}
console.log(`stdout: ${stdout}`);
}
);
}
function createConfigOverrides() {
fs.writeFile("config-overrides.js", CONFIG_OVERRIDES_CONTENT, (err) => {
if (err) {
throw err;
}
console.log("config-overrides.js was created successfully!");
});
}
function updateNpmScripts() {
// next line opens package json, updates start and other scripts to use react-app-rewired
// and saves the file
fs.readFile("package.json", "utf8", (err, data) => {
if (err) {
return console.log(err);
}
console.log(data);
const result = data
.replace(/"start": "react-scripts start"/g, '"start": "react-app-rewired start"')
.replace(/"build": "react-scripts build"/g, '"build": "react-app-rewired build"')
.replace(/"test": "react-scripts test"/g, '"test": "react-app-rewired test"')
.replace(/"eject": "react-scripts eject"/g, '"eject": "react-app-rewired eject"');
fs.writeFile(
"package.json",
result,
{
encoding: "utf8",
// "w" so it will overwrite
flag: "w"
},
(writeError) => {
if (writeError) {
return console.log(writeError);
}
}
);
});
}
main();
run:
node add-polyfills.mjs
ExampleApp
parent component in examples/
AppConext
and reducer
as it is since it's in the correct folder structure, and they'll stay in real projectsCreate components page and add components examples here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.