I have successfully deployed several HTML sites on Firebase but this time trying to publish the React one written on TypeScript when I visit it says Site Not Found
I found one should use build folder when deploying to firebase to look for source, unfortunately I can't find any build but dist available, so I tried the same
Overview of my app structure
src contains assets, main.tsx etc
public (empty directory)
dist gets generated and contains index.html, assets
root contains src, public, dist, index.html, package.json etc
I hope you've realized, I am new to React and just started with a simple Hello World app (works great offline) and just trying to host same on Firebase
Following NPM Commands, I've used to build and run an app offline
npm install
npm run build
npm run dev
That's what package.json looks
{
"name": "helloworld",
"version": "0.0.1",
"private": false,
"scripts": {
"build": "tsc && vite build",
"dev": "vite",
"format": "prettier --write .",
"lint": "eslint --fix . --ext .ts,.tsx",
"lint:css": "stylelint --fix '**/*.css'",
"preview": "vite preview"
},
....
}
Link to YouTube tutorial, I always follow to host a website on Firebase
Related
I would like to run a vite react app locally in production mode? How can I do it?
In the vite docs I did get any solution for that. Any hint about the solution would be appreciated.
Go to package.json file of you vite react app.
modify your script like that :
{
"scripts": {
"build": "vite build",
"serve": "vite preview"
}
}
then run :
npm run build
npm run serve
In my project, I have custom built CKEditor 5. My project folder structure looks like this
When I run application locally, it works fine. But after I have deployed npm run build application to Heroku, build log in heroku websites shows error that:
./src/screens/PostEditScreen.js
Cannot find module: '#sunilshrestha/ckeditor5-build-classic
I couldn't figure out how to deploy this custom built ckeditor5 to heroku where my frontend react app can use. The scripts in package.json file looks like this:
"scripts": {
"start": "node backend/server",
"build": "cd frontend && react-scripts build",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Package.json of frontend have dependencies for custom build ckeditor5 looks like this:
"#sunilshrestha/ckeditor5-build-classic": "file:../ckeditor5/packages/ckeditor5-build-classic",
As the title says, currently I am unable to deploy functions from my terminal. I want to deploy functions as normal. It seems Next comes in the way.
My project folder directory structure is as follows:
- root
- dist
- src
- app
- functions <- I only want to deploy this folder to Cloud Functions
- public
- node_modules
- package.json
- jest.config.js
- firebaserc
And other setting files are managed here
This is firebase.json
{
....
"functions": {
"predeploy": [
"npm run lint",
"npm run build"
],
"source": "."
},
...
}
This is my package.json
{
"name": "functions",
"scripts": {
"dev": "NODE_ENV=development next src/app",
"clean": "rimraf dist",
"build:app": "npm run clean && NODE_ENV=development next build src/app",
"build:app:prod": "npm run clean && NODE_ENV=production next build src/app",
"start:app": "next start src/app",
"lint": "tslint --project src/functions/tsconfig.json",
"build": "tsc --project src/functions",
"serve": "npm run build && firebase emulators:start --only functions,hosting",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "npm run build && firebase deploy --only functions",
"deploy:hosting": "firebase deploy --only functions:hosting",
"logs": "firebase functions:log"
},
"main": "dist/functions/index.js",
"dependencies": {.....}
}
This is what the error message in the console below says while executing script:
Running command: npm run build
> functions# build /Users/{user}/Desktop/{project}
> tsc --project src/functions
✔ functions: Finished running predeploy script.
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔ functions: required API cloudbuild.googleapis.com is enabled
✔ functions: required API cloudfunctions.googleapis.com is enabled
i functions: preparing . directory for uploading...
Error: Error occurred while parsing your function triggers.
Error: Could not find a valid build in the '/Users/{user}/Desktop/{project}/dist/functions/next' directory! Try building your app with 'next build' before starting the server.
I have no idea why this error comes out? What am I doing wrong here? Is there any wrong with configuration/json files??
I suggest you read the official nextjs tutorial first.
You use nextjs so that your website pages are generated in server instead of in client, pre-render pages at build time (SSG) or request time (SSR), this is done mostly to make website SEO friendly. That's why you need pages directory in root which will have all pages.
Your scripts also needs to be modified, it should atleast have something like follows:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
This way when you do npm build, nextjs will build a "build version" of your project, which you can deploy later.
I followed this youtube tutorial to deploy my react app to github pages. I made my react app in codesandbox and exported my sandbox to my github. I downloaded node.js, npm, and git.
My folder structure:
Users > test > package-lock.json + andair-master > (inside andair-master) node_modules + build > (inside build) public + src + package.json
I downloaded my github project "andair-master" and copied and pasted its contents into an empty folder "test".
I opened Git Bash and changed directories until I was in "andair-master". I did "git init" then "git remote add origin https://github.com/develijahlee/andair.git" then I tried "npm run deploy". I realized I was missing a "build" folder so I made one within the "andair-master" folder. Then I put my "src" and "public" folders inside the "build" folder and tried running "npm run deploy". Still not working. I notice that my github is missing a gh-pages branch. I am not sure how to make a gh-pages branch or why "npm run deploy" is not working. If anyone could tell me if I'm missing a step, that would be greatly apprecitated. Thank you.
There are a few missing dependencies in your create-react-app project. This probably happened because you tried to export the project from codesandbox (I'm not sure though)
You have to fix those first.
Dependency 1 (react-scripts):
npm install react-scripts --save-dev
Dependency 2 (node-sass because you are using scss in your project)
npm install node-sass --save
Dependency 3 (gh-pages)
npm install gh-pages --save-dev
After the above steps are completed, verify your package.json to match below structure
{
"name": "and-air",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"homepage": "https://develijahlee.github.io/andair/",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "1.2.25",
"#fortawesome/free-regular-svg-icons": "5.11.2",
"#fortawesome/react-fontawesome": "0.1.5",
"node-sass": "^4.13.0",
"react": "16.9.0",
"react-dom": "16.8.6"
},
"devDependencies": {
"gh-pages": "^2.1.1",
"react-scripts": "^3.2.0",
"typescript": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Now you can run the deploy script
npm run deploy
After this step, verify that a new branch created with name gh-pages
Click on the settings tab in github
Scroll down to the GitHub Pages section and switch your branch to gh-pages branch.
You should get a success message when the page is live.
Here is what deploy script in your code:
"deploy": "gh-pages -d build"
Which is means gh-pages tool use build directory to make it deploy, so you need two things in order to make it work
Create a build folder properly with the following command:
npm run build
now install gh-pages tool for your add locally:
npm i gh-pages
Now you can run deploy command, and it'll work.
I hope this can be helpful to you.
I am trying to deploy a react app with the backend into the same repository on github pages. It all works fine until I add the backend code to it. I can deploy the front-end, but I cannot figure out how to deploy the backend to github.
In my package.json I have the followings:
....
"scripts": {
"start": "react-scripts start",
"server": "nodemon server.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
...
I have pushed it to github. Installed gh-pages package.
I have added
"homepage" : "https://[your-user-name].github.io/[your-repo-name]/"
“predeploy”:
“deploy”:
I think this is where I am going wrong. I know what predeploy and deploy should specify, but I have tried to enter a thousand different versions and I am getting error.
Github pages will not execute any serverside code. You may only upload static files (html,css,js, images, etc.).
In order to have a hosted backend you should look for another service like Google Cloud, AWS Lambda, Heroku, etc.