feat(create-app): add basic functionality #5

szymonrybczak · 2024-09-23T18:33:42Z

Summary

Add basic functionality for creating a new project.

Test plan

pnpm run build
node packages/create-app/dist/src/index.js

packages/create-app/src/template-basic/package.json

szymonrybczak · 2024-09-23T20:28:15Z

packages/create-app/src/template-basic/_.eslintrc.js

Warning
Here file has a _ prefix in the name because pnpm run build fails when there's .eslintrc.js because it treats it as a real ESLint config. For now I didn't implement logic for removing underscore prefix inside files because maybe there's a way to avoid adding such logic and simple ignore files under template-* and don't try resolve them, if not let's implement replacement logic for files with _ underscore 👍

packages/create-app/package.json

packages/create-app/src/lib/create-app.ts

thymikee · 2024-09-24T10:56:01Z

I was able to run these successfully:

npm create rnef-app RNEFApp
yarn create rnef-app RNEFApp
bun create rnef-app RNEFApp

but pnpm create rnef-app RNEFApp fails with ERR_PNPM_DLX_NO_BIN No binaries found in create-rnef-app. Didn't find anything actionable in their github issues, not sure if it's something with my local setup or not.

packages/create-app/project.json

thymikee · 2024-09-24T14:27:58Z

We need to copy executables with correct chmod:

thymikee · 2024-09-25T11:27:32Z

To treat any platform as first-class citizen from the start, I'd like to encourage you to experiment with splitting this template into three packages:

JS template
Android template
iOS/Apple template

packages/create-app/project.json

packages/create-app/src/lib/create-app.ts

packages/create-app/tsconfig.json

packages/create-app/src/lib/validate-project-name.ts

grabbou · 2024-09-27T15:12:53Z

packages/create-app/src/lib/validate-project-name.ts

+  'while',
+];
+
+const reservedNames = ['react', 'react-native', ...javaKeywords];


nit: any reserved words in Swift/Objective-C?

Expo has pretty short list of reserved names, but that might be due to CNG: https://github.com/expo/expo/blob/6c19a5234eb352566a98b6e0c4d85154074aedee/packages/create-expo/src/Template.ts#L28

Perhaps we can actually allow user to have these names in JS, but do some transformation to make them safe in iOS/Android native context

grabbou

Thanks for the PR. Left some comments!

Generally speaking, I am not sure whether we want to copy template or reference React Native one directly instead.

Ideally, I would like to have a template that is:

typescript enabled
does not have native files (uses CNG by default, or managed workflow)

However, these components are not ready yet, so I guess it makes sense to not clone existing React Native template (because we will create our own in the future anyway with more opinions), but reference it instead.

grabbou · 2024-09-27T15:16:38Z

templates/README.md

+
+Each template is a separate directory with a `package.json` file.
+
+The template will be available as a dependency in the project and can be selected using the `--template` flag.


One particular challenge I always have with templates is how do we make sure we can test them frequently. What I found very useful and future-proof is treating each template as an actual standalone project.

This is what we've been doing in Rise Tools as well as Expo:

https://github.com/expo/examples

https://github.com/rise-tools/rise-tools/tree/main/templates

Following this approach allows you to easily clone and replace what you want, w/o having to create all that logic for renaming and moving files around.

https://github.com/rise-tools/rise-tools/blob/main/packages/create-rise/src/utils.ts#L12-L37

This tar takes fileTransformer and it is what Expo has been using to replace contents / rename files in a stream, as you copy it, super quickly.

https://github.com/expo/expo/blob/ab8a962d2c3dddbda124a6bd88d24475831dae00/packages/create-expo/src/createFileTransform.ts#L4

TL;DR

I would suggest doing everything we can to keep every template a standalone package in this repository, so we can treat it as a playground and ensure everything works.

packages/create-app/src/bin.ts

grabbou · 2024-09-27T15:19:04Z

packages/create-app/src/lib/create-app.ts

+    __dirname,
+    // Workaround for getting the template from within the monorepo
+    // TODO: implement downloading templates from NPM
+    '../../../../../templates',


nit: To start with, maybe we can use existing React Native template for compatibility and build on top of that? We want some sort of easy migration path for existing users, so having the ability to use community template sounds like a good idea.

Otherwise, with iOS and android folders here, we add another unnecessary layer of complexity at this point that we could otherwise avoid, at least for now.

We can start with RNC template but we would have to do a "migration" step on top of that:

it is having references to RN CLI in it's scripts, we would have to replace it with our CLI

add our configs

potentially remove some RN CLI stuff

Pros:

Meta/Community would update template for new RN versions for us

Faster start

Cons:

Meta/Community changes could break our tool, as they will not care about our use case

Less control

packages/create-app/src/lib/parse-cli-options.ts

grabbou · 2024-09-27T15:21:26Z

templates/rnef-template-default/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',


TBD for the future, but let's make sure there's an issue for that. If we want to be prescriptive with custom CLI and inits, we should also have custom ESLint configuration (similar to Expo) with basic and other things in the future too.

Re template in general i've created an issue for discussing the details of how do we want to have it: #9

templates/rnef-template-default/__tests__/App.test.tsx

grabbou · 2024-09-27T15:22:17Z

templates/rnef-template-default/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png

nit: would be great, for custom template, to have custom icon. Tiny little things.

agree! writing down for the future improvements (and once this project will have a logo lol)

templates/rnef-template-default/index.js

packages/create-app/src/lib/create-app.ts

mdjastrzebski · 2024-09-25T13:49:29Z

packages/create-app/src/lib/validate-project-name.ts

+const NAME_REGEX = /^[$A-Z_][0-9A-Z_$]*$/i;
+
+// ref: https://docs.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html
+const javaKeywords = [


[nit] Do we really need to ban all Java keywords? Perhaps this is a matter of reviewing "project name" value usage in the template

It saved me few times so I wanted to have this also inside this CLI. Creating a project with Java keyword can cause really hard to debug issues 😅

packages/create-app/src/lib/validate-project-name.ts

packages/create-app/src/lib/edit-template.ts

packages/create-app/src/template-basic/package.json

packages/create-app/project.json

packages/create-app/src/bin.ts

mdjastrzebski · 2024-09-27T15:50:50Z

packages/create-app/src/lib/create-app.ts

+    __dirname,
+    // Workaround for getting the template from within the monorepo
+    // TODO: implement downloading templates from NPM
+    '../../../../../templates',


We can start with RNC template but we would have to do a "migration" step on top of that:

it is having references to RN CLI in it's scripts, we would have to replace it with our CLI

add our configs

potentially remove some RN CLI stuff

Pros:

Meta/Community would update template for new RN versions for us

Faster start

Cons:

Meta/Community changes could break our tool, as they will not care about our use case

Less control

packages/create-app/src/lib/parse-cli-options.ts

mdjastrzebski · 2024-09-27T15:59:24Z

templates/rnef-template-default/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',


Re template in general i've created an issue for discussing the details of how do we want to have it: #9

This reverts commit 583309e.

templates/rnef-template-default/metro.config.js

szymonrybczak · 2024-09-30T15:33:50Z

Went through changes from @mdjastrzebski and all looks good to me, shall we merge? 🤩

szymonrybczak force-pushed the feat/setup-basic-create-app-expierence branch 5 times, most recently from 9c7bc65 to 5727022 Compare September 23, 2024 19:22

szymonrybczak commented Sep 23, 2024

View reviewed changes

packages/create-app/src/template-basic/package.json Show resolved Hide resolved

szymonrybczak commented Sep 23, 2024

View reviewed changes

packages/create-app/package.json Show resolved Hide resolved

szymonrybczak commented Sep 23, 2024

View reviewed changes

packages/create-app/src/lib/create-app.ts Outdated Show resolved Hide resolved

szymonrybczak commented Sep 23, 2024

View reviewed changes

packages/create-app/src/lib/create-app.ts Outdated Show resolved Hide resolved

thymikee reviewed Sep 24, 2024

View reviewed changes

packages/create-app/project.json Outdated Show resolved Hide resolved

mdjastrzebski reviewed Sep 25, 2024

View reviewed changes

packages/create-app/project.json Outdated Show resolved Hide resolved

mdjastrzebski reviewed Sep 25, 2024

View reviewed changes

packages/create-app/src/lib/create-app.ts Outdated Show resolved Hide resolved

mdjastrzebski reviewed Sep 25, 2024

View reviewed changes

packages/create-app/src/lib/create-app.ts Outdated Show resolved Hide resolved

grabbou reviewed Sep 27, 2024

View reviewed changes

packages/create-app/tsconfig.json Outdated Show resolved Hide resolved

grabbou reviewed Sep 27, 2024

View reviewed changes

packages/create-app/src/lib/validate-project-name.ts Outdated Show resolved Hide resolved

grabbou reviewed Sep 27, 2024

View reviewed changes

This was referenced Sep 27, 2024

FIX: eslint error #8

Closed

Default Template #9

Closed

mdjastrzebski reviewed Sep 27, 2024

View reviewed changes

szymonrybczak and others added 6 commits September 30, 2024 12:16

feat(create-app): setup basic command

2a71ecb

feat: add template files

3d1055d

feat: add logic for replacing placeholder

c0158c3

fix: remove hardcoded path by extending assets

55fd541

chore: fix build path so it has access to node_modules

fc4cc78

Revert "chore: fix build path so it has access to node_modules"

0b3ebdf

This reverts commit 583309e.

mdjastrzebski added 12 commits September 30, 2024 12:16

refactor: move template to templates/rnef-template-default

7d00bcc

refactor: simplify

64c79cc

chore: fix lint

f17634f

chore: exclude templates from linting

30b2c06

chore: disable incorrect lint rule

1db653b

chore: exclude template from create-app file

d24420f

refactor: improve template selection

f9334c9

refactor: self code review

4f75b17

refactor: code review changes

a0e10d3

refactor: code review changes

41deba1

chore: fix lint warning on dist

ff68932

refactor: self code review

f5802d9

mdjastrzebski force-pushed the feat/setup-basic-create-app-expierence branch from f2775da to f5802d9 Compare September 30, 2024 10:22

refactor: always show template selector

12c11ee

szymonrybczak commented Sep 30, 2024

View reviewed changes

templates/rnef-template-default/metro.config.js Show resolved Hide resolved

mdjastrzebski merged commit 3bd7380 into main Sep 30, 2024
1 check passed

mdjastrzebski deleted the feat/setup-basic-create-app-expierence branch September 30, 2024 17:53

LiChuanZhu mentioned this pull request Sep 29, 2025

There is a bug in the gradlew assembleRelease #540

Closed


		Each template is a separate directory with a `package.json` file.

		The template will be available as a dependency in the project and can be selected using the `--template` flag.

feat(create-app): add basic functionality #5

feat(create-app): add basic functionality #5

Uh oh!

Conversation

szymonrybczak commented Sep 23, 2024

Summary

Test plan

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thymikee commented Sep 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

thymikee commented Sep 24, 2024

Uh oh!

thymikee commented Sep 25, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

grabbou left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

szymonrybczak commented Sep 30, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

thymikee commented Sep 24, 2024 •

edited

Loading