Can i use create-react-app for creating new packages?


#1

Hi
i want to use ant-design for my package.
i’ve used it for my other projects with create-react-app and it was awesome, but for using in the osjs packages without create react app, it has some issues.
i’m wondering if we can make our packages with CRA or not?
if the answer is yes, could your please tell me how to do so?


#2

Yes, you can use CRA to create a new package. You just gotta make sure to:

  1. Bundle a “index.js” file like you get in the osjs-example-application
  2. You must have the “metadata.json” file and this must have your bundle file(s) listed
  3. Your “package.json” must contain a special “osjs” section: https://github.com/os-js/osjs-example-application/blob/master/package.json#L35

Another alternative is to create an iframe application and leave your CRA application totally isolated from the OS.js package stuff.

https://manual.os-js.org/tutorial/iframe/


#3

Did this work out for you ? :blush:


#4

unfortunately no.
i tried these steps:

in terminal, i went to: /src/packages
then: npx create-react-app package-name
in root dircetory of package (where there is public, src, package.json) i made index.js, metadata.json and server.js files as below:

index.js:

import “./index.scss”;
import osjs from “osjs”;
import { name as applicationName } from “./metadata.json”;

// Our launcher
const register = (core, args, options, metadata) => {
// Create a new Application instance
const proc = core.make(“osjs/application”, { args, options, metadata });

// Create a new Window instance
proc
.createWindow({
id: “MyApplicationWindow”,
title: metadata.title.en_EN,
dimension: { width: 400, height: 400 },
position: { left: 700, top: 200 },
})
.on(“destroy”, () => proc.destroy())
.render();
return proc;
};

// Creates the internal callback function when OS.js launches an application
osjs.register(applicationName, register);


metadata.json:

{

“type”: “application”,
“name”: “MyApplication”,
“category”: null,
“server”: “server.js”,
“title”: {
“en_EN”: “My Application”
},
“description”: {
“en_EN”: “My Application”
},
“files”: [“main.js”, “main.css”]
}


server.js:

// Methods OS.js server requires

module.exports = (core, proc) => {
const { routeAuthenticated } = core.make(“osjs/express”);

return {
// When server initializes
init: async () => {
// HTTP Route example (see index.js)
routeAuthenticated(“POST”, proc.resource("/test"), (req, res) => {
res.json({ hello: “World” });
});

  // WebSocket Route example (see index.js)
  // NOTE: This creates a new connection. You can use a core bound socket instead
  core.app.ws(proc.resource("/socket"), (ws, req) => {
    ws.send("Hello World");
  });
},

// When server starts
start: () => {},

// When server goes down
destroy: () => {},

// When using an internally bound websocket, messages comes here
onmessage: (ws, respond, args) => {
  respond("Pong");
},

};
};


after all , when i tried to build the cra project, via npm start, i was given the following error:

react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

“babel-loader”: “8.1.0”

Don’t try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

/Users/iamkeyvan72/Developer/sarbazi/OS.js/node_modules/babel-loader (version: 8.2.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove “babel-loader” from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
    This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/iamkeyvan72/Developer/sarbazi/OS.js/node_modules/babel-loader is outside your project directory.
    For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls babel-loader in your project folder.
    This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :slight_smile: We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hayula-tuts-package@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hayula-tuts-package@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/iamkeyvan72/.npm/_logs/2020-12-25T10_56_24_355Z-debug.log


what should i do?
did i made each step right?
would you please explain how to make a CRA package for osjs , step by step?


#5

I tried this myself and the CRA is quite opinionated, so there’s a few extra steps here required for this to work properly.

But before I dig into this deeper, there’s a way you can do this without any modifications, which is to run your CRA application inside an iframe. Is this an option for you ?

If not I’ll make a short guide on how to use CRA “natively”.


#6

Just in case you haven’t seen this article, there’s a way to make a really simple react package setup that you can add to as you want:

https://manual.os-js.org/guide/framework/#react