Host React App with Parcel Build on gh pages? - github

Can someone please help me figure out how to host my app on gh pages. All I am getting when I deploy it is the ReadMe file.
My app is deployed using parcel build, and it works perfectly fine when ran locally.
This is my package.js:
{
"name": "myflix-client",
"version": "1.0.0",
"description": "",
"default": "src/index.html",
"dependencies": {
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"axios": "^0.24.0",
"font-awesome": "^4.7.0",
"js-tokens": "^4.0.0",
"loose-envify": "^1.4.0",
"moment": "^2.29.1",
"object-assign": "^4.1.1",
"parcel": "^2.0.0-rc.0",
"parcel-bundler": "^1.12.5",
"prop-types": "^15.8.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.2",
"react-dom": "^17.0.2",
"react-paginate": "^8.1.0",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"scheduler": "^0.20.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "parcel src/index.html",
"build": "parcel-build src/index.html",
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/johannesvw3/myFlix-client-react.git"
},
"author": "Deepthi Rao",
"license": "ISC",
"bugs": {
"url": "https://github.com/johannesvw3/myFlix-client-react"
},
"homepage": "https://github.com/johannesvw3/myFlix-client-react",
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-rc.0",
"#parcel/transformer-sass": "^2.0.0-rc.0",
"gh-pages": "^3.2.3"
}
}
Thanks!

Related

#sveltejs/adapter-cloudflare. I get many error while run `npm run build`

I'm Using #sveltejs/adapter-cloudflare to deploy my project to Cloudflare Pages.
I'm tried to use this package for a simple sveletKit app. It can success deploy to Pages.
But with more complex project, I got many many ERROR log while run build.
This is the log: https://pastebin.com/Yhw1Gu0c
And this is my package.json
"name": "app",
"version": "0.0.1",
"scripts": {
"dev": "vite dev --port 3331",
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"#carbon/colors": "^11.3.0",
"#firebase/app-types": "^0.7.0",
"#playwright/test": "^1.22.2",
"#solana/qr-code-styling": "1.6.0-beta.0",
"#sveltejs/adapter-auto": "next",
"#sveltejs/adapter-cloudflare": "^1.0.0-next.31",
"#sveltejs/kit": "next",
"#typescript-eslint/eslint-plugin": "^5.27.0",
"#typescript-eslint/parser": "^5.27.0",
"bignumber.js": "^9.0.2",
"carbon-components-svelte": "^0.67.4",
"carbon-icons-svelte": "^11.2.0",
"carbon-preprocess-svelte": "^0.9.1",
"cookie": "^0.5.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"firebase-admin": "^11.0.1",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.54.0",
"svelte": "^3.44.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.3.1",
"typescript": "^4.7.4",
"vite": "^3.0.0"
},
"type": "module",
"dependencies": {
"#solana/web3.js": "^1.50.1",
"firebase": "^9.9.1"
}
}

Importing jQuery with Parcel JS

I am trying to create a library using parceljs and after npm run watch, i am getting
Uncaught ReferenceError: require is not defined
package.json
{
"name": "social-tagger",
"version": "1.0.0",
"description": "",
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"scripts": {
"watch": "parcel watch",
"build": "parcel build"
},
"author": "",
"license": "ISC",
"dependencies": {
"#yaireo/tagify": "^4.12.0",
"jquery": "^3.6.0"
},
"devDependencies": {
"#parcel/packager-ts": "^2.6.2",
"#parcel/transformer-typescript-types": "^2.6.2",
"#types/jquery": "^3.5.14",
"parcel": "^2.6.2",
"typescript": "^4.7.4"
}
}
src/social.ts
import * as jQuery from 'jquery';
How to properly import jQuery
Output From Inspect Element
Added Targets to package.json
package.json
{
"name": "social-tagger",
"version": "1.0.0",
"description": "",
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"scripts": {
"watch": "parcel watch",
"build": "parcel build"
},
"author": "",
"license": "ISC",
"dependencies": {
"#yaireo/tagify": "^4.12.0",
"jquery": "^3.6.0"
},
"devDependencies": {
"#parcel/packager-ts": "^2.6.2",
"#parcel/transformer-typescript-types": "^2.6.2",
"#types/jquery": "^3.5.14",
"parcel": "^2.6.2",
"typescript": "^4.7.4"
},
"targets":{
"main": {
"includeNodeModules": true
}
}
}
Create a file named jquery.ts
jquery.ts
import jquery from "jquery";
export default ((window as any).jQuery = jquery);
Dont import jquery instead import from jquery.ts
social.ts
import './jquery';

#capacitor-community/electron gives Unhandled Promise Rejection on built package

When I pack my Ionic project with #capacitor-community/electron packager (using electron-builder), I get the following error:
Unhandled Promise Rejection
Error: ENOENT: no such file or directory, open 'D:/Users/.../example/electron/dist/win-unpacked/resources/app-update.yml'
Steps to reproduce the problem:
# create generic ionic example
ionic start example tabs --type angular
cd example
npm i #capacitor-community/electron --save-dev
# required to add electron
ionic build
npx cap add #capacitor-community/electron
cd electron
# runs npm run build && electron-builder build --dir -c ./builder-effective-config.yaml
npm run electron:pack
Here is the package.json of main ./example project:
{
"name": "example",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~12.1.1",
"#angular/core": "~12.1.1",
"#angular/forms": "~12.1.1",
"#angular/platform-browser": "~12.1.1",
"#angular/platform-browser-dynamic": "~12.1.1",
"#angular/router": "~12.1.1",
"#capacitor-community/electron": "^4.0.3",
"#capacitor/app": "1.0.3",
"#capacitor/core": "3.2.4",
"#capacitor/haptics": "1.1.0",
"#capacitor/keyboard": "1.1.0",
"#capacitor/status-bar": "1.0.3",
"#ionic/angular": "^5.5.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.1.1",
"#angular-eslint/builder": "~12.0.0",
"#angular-eslint/eslint-plugin": "~12.0.0",
"#angular-eslint/eslint-plugin-template": "~12.0.0",
"#angular-eslint/template-parser": "~12.0.0",
"#angular/cli": "~12.1.1",
"#angular/compiler": "~12.1.1",
"#angular/compiler-cli": "~12.1.1",
"#angular/language-service": "~12.0.1",
"#capacitor/cli": "3.2.4",
"#ionic/angular-toolkit": "^4.0.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "4.16.1",
"#typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "An Ionic project"
}
Here is package.json of ./example/electron project:
{
"name": "example",
"version": "1.0.0",
"description": "An Amazing Capacitor App",
"author": {
"name": "",
"email": ""
},
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"main": "build/src/index.js",
"scripts": {
"build": "tsc && electron-rebuild",
"electron:start-live": "node ./live-runner.js",
"electron:start": "npm run build && electron --inspect=5858 ./",
"electron:pack": "npm run build && electron-builder build --dir -c ./electron-builder.config.json",
"electron:make": "npm run build && electron-builder build -c ./electron-builder.config.json -p always"
},
"dependencies": {
"#capacitor-community/electron": "^4.0.1",
"chokidar": "~3.5.2",
"electron-is-dev": "~2.0.0",
"electron-serve": "~1.1.0",
"electron-unhandled": "~3.0.2",
"electron-updater": "~4.3.9",
"electron-window-state": "~5.0.3"
},
"devDependencies": {
"electron": "~13.1.9",
"electron-builder": "~22.11.7",
"electron-rebuild": "~2.3.5",
"typescript": "~4.3.5"
},
"keywords": [
"capacitor",
"electron"
]
}
And here is electron-builder.config.json file:
{
"appId": "com.yourdoamnin.yourapp",
"directories": {
"buildResources": "resources"
},
"files": [
"assets/**/*",
"build/**/*",
"capacitor.config.*",
"app/**/*"
],
"publish": {
"provider": "github"
},
"nsis": {
"allowElevation": true,
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"win": {
"target": "nsis",
"icon": "assets/appIcon.ico"
},
"mac": {
"category": "your.app.category.type",
"target": "dmg"
}
}
So, apparently problem lies in default publish method. You need to change your electron-builder.config.json file to the following form (without the comment):
{
"appId": "com.yourdoamnin.yourapp",
"directories": {
"buildResources": "resources"
},
"files": [
"assets/**/*",
"build/**/*",
"capacitor.config.*",
"app/**/*"
],
"publish": {
"provider": "github",
"publishAutoUpdate": false // This is the line you need to add!
},
"extends":null,
"nsis": {},
"win": {
"target": "nsis",
"icon": "assets/appIcon.ico"
}
}

Electron App Not Starting after I build it

I have installed the electron-packager npm module globally and run npm run build to build my application.
When I do this, the app seems to build properly and it outputs an application (see picture). However, the date/time on the application is from over a month ago. Furthermore, when I open the application, it simply presents a blank screen.
Below, please find my package.json and accompanying pictures.
{
"name": "turtlecreeklane",
"version": "0.0.1",
"author": "Tanner Houghton <houta483#uchicago.edu>",
"description": "An electron-vue project",
"license": "ISC",
"main": "./dist/electron/main.js",
"scripts": {
"build": "electron-packager . TCL",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "./start_backend.sh& node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "turtlecreeklane",
"appId": "com.example.yourapp",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/Icon-48"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"ejs": "^3.0.2",
"electron-unhandled": "^3.0.2",
"express": "^4.17.1",
"multer": "^1.4.2",
"path": "^0.12.7",
"pillow": "0.0.9",
"vue": "^2.5.16",
"vue-axios": "^2.1.5",
"vuex": "^3.1.3"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"cfonts": "^2.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^14.2.1",
"electron-prebuilt": "^1.4.13",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "0.4.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
Picture showing that the project seems to be built but the date if for over a month ago...
Picture showing that the app looks blank after it is opened
Thanks,
Tanner

facing error TS2339: Property 'then' does not exist on type 'StepDefinitions & Hooks'

facing error TS2339: Property 'then' does not exist on type 'StepDefinitions & Hooks'.
when I am trying to run tsc -w
tried all the solution which I know but nothing is working out.
Feature file:
Feature: Login creation for Amazon AWS
Scenario: Successful creation of Login
Given User navigate to Home Page
When User enter email and other details
Then Login is created sucessfully
Package.json
{
"name": "package.json",
"version": "1.0.0",
"description": "package",
"main": "index.js",
"dependencies": {
"#types/node": "^12.7.5"
},
"scripts": {
"test": "./node_modules/.bin/cucumber-js -p default"
},
"compilerOptions": {
"target": "es6"
},
"devDependencies": {
"#types/chai": "^4.2.2",
"#types/cucumber": "^4.0.7",
"chai": "^4.2.0",
"cucumber": "^5.1.0",
"cucumber-pretty": "^1.5.2",
"cucumber-tsflow": "^3.2.0",
"exceljs": "^2.0.1",
"protractor": "^5.4.2",
"protractor-cucumber-framework": "^6.1.3",
"ts-node": "^8.3.0",
"typescript": "^3.6.3",
"xlsx": "^0.15.1"
},
"author": "Bharani",
"license": "ISC"
}
Step Definition file:
import { Given, When, Then } from "cucumber"
Given("User navigate to Home Page", function(){
console.log("hafd");
});
When("User enter email and other details",function(){
console.log("dfhagsdf");
});
Then("Login is created sucessfully",function(){
console.log("dhfhd");
});
Package.json:
{
"name": "package.json",
"version": "1.0.0",
"description": "package",
"main": "index.js",
"dependencies": {
"#types/node": "^12.7.5"
},
"scripts": {
"test": "./node_modules/.bin/cucumber-js -p default"
},
"compilerOptions": {
"target": "es6"
},
"devDependencies": {
"#types/chai": "^4.2.2",
"#types/cucumber": "^4.0.7",
"chai": "^4.2.0",
"cucumber": "^5.1.0",
"cucumber-pretty": "^1.5.2",
"cucumber-tsflow": "^3.2.0",
"exceljs": "^2.0.1",
"protractor": "^5.4.2",
"protractor-cucumber-framework": "^6.1.3",
"ts-node": "^8.3.0",
"typescript": "^3.6.3",
"xlsx": "^0.15.1"
},
"author": "Bharani",
"license": "ISC"
}
Error in console:
'''[16:44:58] Starting compilation in watch mode...
POM_TS_CUCUMBER/Featurefile/stepdefinition/Steps.ts:3:32 - error
TS2339: Property 'then' does not exist on type 'StepDefinitions &
Hooks'.
3 defineSupportCode(({Given,When,then}) =>{
~~~~
[16:45:04] Found 1 error. Watching for file changes. '''
You have written Then in feature file which is not from the cucumber library. Try writing then statement again from cucumber library and try again.