I have built an application using the create-react-app version 2.0 locally. It runs, builds and works as expected. I am trying to deploy it to Zeit, using now. It works fine when I run the now command from withing the generated ./build folder (npm run build's destination).
My goal is to integrate it with GitHub so it updates the deployment on git push. Unfortunately, running now at the project's root folder doesn't work. I have a now.json file with the following contents:
{
"version": 2,
"name": "somename",
"builds": [
{
"src": "package.json",
"use": "#now/static-build"
}
],
"routes": [
{
"src": "^/static/(.*)",
"dest": "/static/$1"
},
{
"src": ".*",
"dest": "/index.html"
}
]
}
and my package.json contains the "now-build": "serve --single ./build" script.
The error
Every build attempt from the root folder results to this error:
Tries
I have tried changing the now-build to now-start and it didn't work, as it specifically needs now-build, I have tried removing the now.json altogether and it didn't work and every YouTube video I found on the issue doesn't do anything different but it works for them.
Any ideas?!
It turns out that the build command is wrong. The correct one is:
"now-build": "npm run build && mv build dist" in the package.json.
More info: https://github.com/zeit/now-examples/tree/master/create-react-app
Related
Though I have set up several web apps on Firebase in the past. This time I am having problems uploading this one to the server.
The special thing about this app is that I am using React.
I followed this tutorial, did the following to get started in the terminal:
$ npx create-react-app myapp
$ cd myapp/
$ npm install firebase --save
$ npm start
And then after spending much time working on the React side of things to get something close enough to my taste, at this point I can see the app running, on port 3000 (http://localhost:3000/), in the browser as I expect. It is also accessing a Realtime database on the sever as I want. The next step is for me to have the app itself run on the server and not only on my localhost as it is now. What do I need to do for that?
I have made a few trials based on my previous experience with Firebase, running "firebase deploy" (+ some other things), but it is not working. The app is not on the server. More precisely, it shows a white page.
As a complementary piece of information, this is my firebase.json file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
And this is how the public directory looks:
...$ ls public/
404.html index.html logo512.png robots.txt
favicon.ico logo192.png manifest.json
...$
You must build your React app (npm run build or your build command) and then make sure that public directory in firebase.json is your build folder.
{
"hosting": {
"public": "build", // name of build output directory
}
}
In your case it was set to public and hence that directory was being deployed.
I have tried using Nx in an attempt to make use of Monorepos. I have been facing an issue to serve multiple apps via nx run-many command. Can anyone correct me if I'm doing something wrong?
Command used: nx run-many --target=serve --all
I can see the Nx Console logging all the available apps but only running one
> NX Running target serve for projects:
- app1
- app2
———————————————————————————————————————————————
> nx run app1:serve
Try this:
nx run-many --parallel --target=serve --projects=frontend,backend
This happens due to port overriding, if you have multiple frontend apps for example they will run on the same port.
You can manage every project configuration in project.json file, and there you can handle different port for every project.
example:
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "react-todo:build",
"hmr": true,
"port": 3001
},
"configurations": {
"production": {
"buildTarget": "react-todo:build:production",
"hmr": false
}
}
},
this is a react config in (apps/<Your_Project_Name>/project.json)
nx run-many --target=serve --all --maxParallel=100
The default value for --maxParallel is three, it means runs tasks in batches of three by default.
Additional, Exclude few apps to not serve then.
nx run-many --target=serve --all --maxParallel=100 --exclude=app-name
Github
Update solution in 9/2022.
go to package.json adding this script that allow us to run many project with only one command
"all": "npx nx run-many --target=serve --all --maxParallel=100"
inside apps folder, there are several application, and go to their package.json, and edit `targets -> serve -> options like this sample
"options": {
"buildTarget": "your app name:build",
"hmr": true,
"port": 4201 // adding this
},
You can change the serving port by editing package.json
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "admin-web:build",
"port": 4220,
"hmr": true
},
"configurations": {
"production": {
"buildTarget": "admin-web:build:production",
"hmr": false
}
}
}
After that you can run nx run-many
nx run-many --parallel --target=serve --projects=frontend,backend
For now, Remix uses a hardcoded 8002 port for file watcher. When running two or more remix apps at once, either one of the apps (which was started later) would have an error accessing the file server port.
To override, add a .env or .env.local file in your respective app directory and add the environment variable REMIX_DEV_SERVER_WS_PORT.
apps/
- app1
.env.local -> REMIX_DEV_SERVER_WS_PORT=8003
- app2
.env.local -> REMIX_DEV_SERVER_WS_PORT=8004
This worked for me.
So I created a react app using create-react-app toolchain.
Wrote some components and ran
firebase init
npm run build
firebase deploy --only hosting
Now when i inspected my live app in source tab of chrome dev-tools it showed all the source files of react app including comments as it is.
Isn't firebase supposed to deploy only the chunks inside build directory which are optimised and minified for production ?
I ran Network test to see what kind of files are being fetched and amazingly it fetches only the chunks inside build directory. Then how all the files of my src directory also present there in raw form ?
Now chances are maybe browser construct them from chunks. Then it seems a react build problem that doesn't remove comments and uglify in production build.
But i also analyzed the js chunks in my build directory and they don't have comments embedded.
Here is my firebase config :
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
So I found the solution.
And it's not related to firebase hosting.
It's react's build that needs to be configured to solve this problem.
Basically, We have to stop react build generating source map.
It looks like these source map inside build directory contains our raw js files that get deployed to firebase.
Change your react build command in package.json to
"build": "GENERATE_SOURCEMAP=false react-scripts build",
I am using nextjs framework and as UI framework I have chosen semantic-ui accompanied with semantic-ui-react.
The main reason for me choosing semantic-ui is the theming power of the framework.
I have installed the full package of semantic-ui as it being showed here.
`
semantic.json file has the following:
{
"base": "/client/static/semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [blah blah],
"version": "2.2.10"
}
Theming is working properly on localhost.
The problem is the following: when trying to deploy usin now dependencies are being installed and semantic-ui feels like it is not there. That means there is no styling at all.
I am including semantic folder to my project (meaning, I am now gitignoring the /client/static/semantic folder).
What is the right way to deploy using Nextjs and semantic-ui?
**UPDATE:
Found where the problem comes from but still dont know how to solve it.
So the proccess goes like that when you theme your semantic-ui.
You install semantic-ui .
semantic-ui looks for the file semantic.json and knows you are theming.
Files and folder for theming are being created BUT not build. That means in order for the compoments of semantic-ui to be build it is needed to navigate to the specific semantic folder and run gulp build.
The problem is now dont know how to do this.
Any ideas?
So to close this with an answer from the comments.
In order to get pre-builds such as gulp/grunt/etc before the actual next build you have to create a script which does what you want.
Example:
// package.json
{
"scripts": {
"build": "gulp build && next build",
"start": "next start"
}
}
and just run npm run build to have your building process started.
I'm using lite server for developing my Angular projects. It depends on and uses BrowserSync to do most of the work (serving the site to localhost, live reload etc).
Currently, I have a config file bs-config.json in my root for this module:
{
"injectChanges": true,
"files": ["./**/*.{html,css,js,png,jpg,svg,gif}"],
"watchOptions": {
"ignored": [
"node_modules",
"src/**/*.*",
"app/**/*.js"
]
}
}
Then in my package.json I have a script to execute it, referring to the config file:
{
"version": "1.0.0",
"scripts": {
"dev": "lite-server -c bs-config.json"
},
"devDependencies": {
"lite-server": "~2.2.0"
}
}
Works great. But ideally I don't want a config file in the root of my project that isn't used in production. Is it possibly to extend the script in my package.json to execute the config inline with the command?
Unfortunately, its not possible to extend the dev script in your package.json to execute the config inline when using lite-server.
If you don't want a config file in the root of your project, you would simply place it elsewhere in your project (i.e., in a folder called configs) and provide a custom path to your config file via -c or --config run time options. So your dev script will be "lite-server -c configs/bs-config.json".
Check out this GitHub issue: Command line arguments no longer supported?