I am testing out Sanity Studio v3 for the first time. In the past (v2), I was able to get Sanity and my frontend (Sveltekit or Next) set up in a simple PNPM monorepo so I only need to run one command to start everything and do other common tasks.
The monorepo I am using is here. This is a demo, but is will show you the basic inter workings.
The problem I am having is that I do not seem to have the ablity to start sanity sudio in dev mode from the root packack.json. Here are my scripts:
"scripts": {
"start:sveltekit": "pnpm -F #sanity-3-playground/sveltekit dev",
"start:sanity": "pnpm -F #sanity-3-playground/sanity pnpm dev",
"start": "pnpm -r start",
"update:all": "pnpm -r update -i -L",
"clean": "find ./ -name node_modules -type d -exec rm -rf {} +"
},
Here are the scripts in the Sanity package.json:
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
When I pnpm start from the sanity dir every this is great, but when I run pnpm start:sanity in the root folder, I get
IMPORTANT: You're running Sanity Studio v3, and in this version
the [start] command is used to preview static builds. To
run a development server, use the [npm run dev] command instead.
For more information go to https://www.sanity.io/help/studio-v2-vs-v3
I can see that it wants me to hit enter to enter dev mode, but it does not work.
Related
Every time I add a new class in the className of a react component, i need to go to the terminal and type npm run build-css in order for the classes to take effect.
What npm run build-css does is "build-css": "npx tailwindcss build -o src/styles/main.css",.
Is there a way to not have to run the above command on every UI change I do? I have used tailwind css in nextjs by following the official guide and it updates on its own whenever I do a change in the UI.
My scripts:
"scripts": {
"prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer . ",
"start": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development && craco start",
"build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
"watch-css": "npx tailwindcss build -i src/styles/index.css -o src/styles/main.css --watch",
"build-css": "npx tailwindcss build -o src/styles/main.css",
"package-m1": "electron-forge package --arch=arm64 --platform=darwin",
"package-intel": "electron-forge package --arch=x64 --platform=darwin",
"package": "npm run package-m1 && npm run package-intel",
"postpackage": "electron-packager ./ --out=./builds"
},
You should be able to combine this command into your normal run command, I'm not sure if you're using a framework or not but if you go into you package.json and look at your normal run/start command you can edit that to include the tailwind build. Depending on if you are using a unix or windows environment it will be slightly different. For react it would look like this(I don't remember syntax for nextjs)
"start": "npx tailwindcss build -o src/styles/main.css && node scripts/start.js"
The above would be for windows and the below for unix
"start": "npx tailwindcss build -o src/styles/main.css & node scripts/start.js"
when I issue below command to start react app facing this error, can anyone help.
npm start
react_template#0.1.0 start
env-cmd -f .env.dev craco start
'env-cmd' is not recognized as an internal or external command,
operable program or batch file.
Did you install cross-env with npm? Try running
npm install
This should work.
its really hard to tell without taking a look at your package.json file. but i see that you're using env-cmd package which provides custom run and build commands and lets you have multiple environment declarations.
here is an example of what you can do with it in your package.json (this example is a nextjs example)
"scripts": {
"dev": "env-cmd -f env/.env.local next dev",
"build:pre": "env-cmd -f env/.env.pre next build",
"start:pre": "env-cmd -f env/.env.pre next start",
"build:stg": "env-cmd -f env/.env.stg next build",
"start:stg": "env-cmd -f env/.env.stg next start",
"build:rc": "env-cmd -f env/.env.rc next build",
"start:rc": "env-cmd -f env/.env.rc next start",
"build:prod": "env-cmd -f env/.env.prod next build",
"start:prod": "env-cmd -f env/.env.prod next start"
},
as you can see i created a build and run command for each environment and i also provided a .env.ENVNAME file for my config. the env/,env.ENVNAME is the path of my .env files. the env folder is in the root of the project.
here is how to run and build the app with env-cmd for above scripts:
npm run build:Env_name
for example for building my stg env:
npm run build:stg
or for starting the app
npm run start:Env_name
for example:
npm run start:stg
in your local you can use npm run dev to run the application and npm run build to build it.
Now It doesn't run on my ubuntu machine. When I run the npm start command it says missing script start. Is there any method to run the downloaded project?
In your package.json file, check scripts property:
"scripts": {
"clean": "rimraf build/*",
"copy-assets": "ts-node src/tools/copyAssets",
"tsc": " tsc",
"build": "npm-run-all clean tsc copy-assets",
"dev": "nodemon --watch src -e ts,ejs,css --exec npm run dev:start",
"dev:start": "npm-run-all build start",
},
Looks like start script does not exist. Instead run the appropriate one from the scripts section.
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.
In my project I have many git branch names (dev, test, stage ....) and I am building my React app using Docker, and using Jenkins to deploy it.
What I want is to specify my REACT_APP_BASE_URL based on my current branch name because I have several base URLs, for example (https://abc.dev.example, https://abc.test.example ..), and I want to run the matched name.
What I did was:
create .env.dev :
REACT_APP_BASE_URL= 'https://abc.dev.example'
create .env.production :
REACT_APP_BASE_URL= 'https://abc.production.example'
create .env.test :
REACT_APP_BASE_URL= 'https://abc.test.example'
npm install env-cmd --save
My script:
"start": "env-cmd -f .env.dev react-app-rewired start",
"build": "react-app-rewired build",
"build:develop": "env-cmd -f .env.dev react-app-rewired build",
"build:test": "env-cmd -f .env.test react-app-rewired build",
"build:demo": "env-cmd -f .env.demo react-app-rewired build",
It's always looking for the url on .env.production file for all branches because it considers the production during the build process, so how can I solve that?
Any ideas?