@mlatham/cyber
v0.4.4
Published
Cross-platform UI bridge for mobile-embedded next.js apps.
Downloads
21
Maintainers
Readme
Cyber.js
Bundle next.js into your native mobile apps.
Getting Started
npx create-next-app my-app --example https://github.com/mlatham/cyber.js --example-path packages/next-cyber-starter
Documentation
TODO:
Roadmap
- Create example project.
- iOS Project + WKWebView
- Android Project + WebView
- Create tool which replicates example project, substituting certain values (app name, etc).
Notes
Testing locally:
npx create-react-app my-app --template file:/Users/matt/Documents/workspace/cyber/packages/cra-template-cyber-app
npx create-next-app next-cyber-starter --typescript --tailwind --eslint --src-dir --app --use-npm --import-alias "@/*"
npx create-next-app my-app --example https://github.com/mlatham/cyber --example-path packages/next-cyber-starter
Custom integration:
npm install cyber (<- add the Javascript bridge interface)
spm install cyber-ios (<- add the iOS bridge interface)
- Adds custom build step to copy cyber-ios.js as a resource
gradle install cyber-android (<- add the android bridge interface)
- Adds custom build step to copy in cyber-android.js as a resource
npx create-react-app my-app --template cyber-react-app
- esbuild
npx create-react-app my-app --template cyber-mobile-app
- cyber-react-app + ios
https://createapp.dev/webpack
main library
- react vs svelte vs vue? react consistently most popular
UI library (NONE)
- bootstrap vs tailwind vs material UI? tailwind + bootstrap similar popularity. Suggestion is to learn raw CSS first
Test framework (NONE)
Transpiler
- typescript (ES6 modules)
Styling
- CSS (vs CSS modules, PostCSS, Sass, Less, stylus)
Image
- SVG (vs PNG)
Utilities (NONE)
Linting
- Prettier
Optimization (NONE)
- Code split vendors (?)
Webpack plugins
- HTML webpack plugin
React
- React hot loader
https://createapp.dev/webpack/react--babel--css--html-webpack-plugin--prettier--svg--typescript--style-loader--css-loader
Added:
npm install webpack-dev-server style-loader css-loader --save-dev
webpack.config.*.js
tsconfig.json:
- allowSyntheticDefaultImports: true
Modified: "build-dev": "webpack --mode development --config webpack.config.development.js", "build-prod": "webpack --mode production --config webpack.config.js"
{ test: /\.(png|jp(e*)g|svg|gif)$/, type: 'asset/resource' }
index.tsx ("root" -> "app", to align with HtmlWebPackPlugin)
Use template file: new HtmlWebpackPlugin({ template: './src/index.html', })
iOS Notes
- Let Safari inspect webview within iOS Simulator via Develop->Simulator in Safari (Also Safari->Settings->Advanced->Show Develop menu in menu bar)
if #available(iOS 16.4, *) { self.webView.isInspectable = true }
- Faster-tap (ios) and disable zooming: