How can I start my project from .next folder? - reactjs

I want to start my NextJS project from build folder (.next). I ran next build command, got .next folder and... I tried start project from .next folder many times and used a lot of ways, but I wasn't successful. Can anyone explain me what I need to do for starting my NextJS project from build folder?

Can you please mention your package.json file inside scripts: {} what was there ?
According to NextJS docs If you run like
If npm then : npm run build
If yarn : yarn build
You will get .next folder with build files. then you should run npm run start or yarn start which will running the project from .next
If you want Static HTML export which slightly different.
Step 1 : open package.json and update this "build": "next build && next export" inside scripts:{} and save.
Step 2: Run the build command yarn build or npm run build it will give you out folder with static files which you can deploy or run anywhere in your server. Official docs and also npx serve out for node server.

Related

Where does React put the continuous build files when using create-react-app

I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.

how do you clone a git Gatsby project and run it locally?

I'm familiar with cloning git projects.
But I'm struggling to clone a Gatsby project, https://github.com/MunifTanjim/gatsby-theme-dox, and then run the website locally.
I run git clone https://github.com/MunifTanjim/gatsby-theme-dox
Then it downloads
I go into the correct directly, and I've tried
gatsby build
This works
then
gatsby develop
I get the following error:
ERROR gatsby <develop> can only be run for a gatsby site.
Either the current working directory does not contain a valid package.json or 'gatsby' is
not specified as a dependency
I've also tried
I also cd into the demo folder and run the same -- I get it to run locally but with a 404 error...
Is it possible to run the demo of this gatsby project?
I'm quite new to Gatsby so trying to understand by starting with a prebuilt project.
Once you clone the repository you need to install the dependencies. cd to the root of your project and run npm install or yarn install.
gatsby build and gatsby develop, like all Gatsby commands, must be run in the root of your project, where the package.json is located. Otherwise, it will throw an exception.
In your case, run the following in order:
git clone https://github.com/MunifTanjim/gatsby-theme-dox
cd gatsby-theme-dox
npm install #or yarn install
cd demo
gatsby develop #to build the site in development mode
gatsby build && gatsby serve #to build the site in production mode
I'd suggest taking a look at Gatsby commands (gatsby-cli) to understand what you are running.
git clone https://github.com/MunifTanjim/gatsby-theme-dox.git
cd gatsby-theme-dox
yarn install
cd demo
gatsby develop (you should see the main page in http://localhost:8000/) or gatsby build and when it ends run gatsby serve in the terminal (see the main page in http://localhost:9000/)

Getting blank page after deploying React app to surge.sh

I made a simple React app in Visual Studio Code and want to host it on a website which I am using surge.sh. When I deployed the app and head to the site, it just shows a blank page although the deployment was successful when I deploy it in my terminal.
Here are my steps that I did:
cd to root directory of my project
run npm run build
cd build
run surge command
provide {domain name}.surge.sh
I am new to using surge.sh. What might I have done wrong?
Follow below step to resolve(only 4 surge):
npm run build
cd build
cp index.html 200.html
surge
You could add the following to your package.json scripts -
"scripts": {
...
"deploy": "npm run build && cp build/index.html build/200.html && surge build https://{domain_name}"
}
And then you can run this on a Terminal from the root of the project (anytime you need to deploy) using npm run deploy.

how can I run an exisiting project in react

I am new in react, and now I have an available project which is needed some kind of development. The whole project consists of app and build folder and both of them also have index.html file and some other staff. How can I launch this project for viewing its demo in linux?could anyone explain the process step by step?
thanks in advance
Approach 1: Via Node
Install Node Install Node on linux machine
Once successfully installed, go to project folder and run npm install to install dependencies.
Run command "npm start" or in background "nohup npm start &" will start default application on 3000 port, from browser check http://IP/domain name:3000
Approach 2 Via Yarn
Install Yarn on linux machine Install Yarn
from project folder run yarn install will install all dependencies.
run yarn build will create complied code in /build folder
Install apache or Ngnix and move build folder content to apache or ngnix web root folder
Access app from http://IP or domain name if seted up for ip.

How to publish a jsx file to npm?

I just want to publish a react component to npm, but found out it's so difficult. The file is simple, but with es6 syntax. what is the steps or solution to publish it to npm so that we can just install and run it with locally installed react? I have read this article http://chadly.net/2015/04/publishing-react-to-npm/, but it seems outdated and I failed by following it.
Use babel-cli to transpile the file to es5 and publish that file.
Put all your source-files in one folder, e.g. src and install babel and add build entry to your npm scripts (package.json/scripts): "build": "babel --out-dir=lib src".
No every time you call npm run build. The transpiled code will in the lib folder. In you index.js refer to this lib folder-folder.
Of course you can add build script to npm hooks such as "prepublish": "npm run build" or similar,
I wrote a full Medium story because I had the same issue as you and there is no information about it. Check it out: https://medium.com/#BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Resources