Code Monkey home page Code Monkey logo

cra-template-hipo-typescript's People

Contributors

akgunberk avatar anlerkan avatar edizcelik avatar gulcinuras avatar jamcry avatar yigiterdev avatar

Stargazers

 avatar  avatar

Watchers

 avatar

cra-template-hipo-typescript's Issues

Add "add polyfills" script

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

Refactor folder structures for examples

  • Create an ExampleApp parent component in examples/
    • Move the pure examples there (example api, example routes etc.)
    • We can leave AppConext and reducer as it is since it's in the correct folder structure, and they'll stay in real projects

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.