This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.
Related
I have a React app which holds the code for a custom component that will be leveraged as a shared component in other apps. I've implemented a rollup.config.ts which outputs the following dist directory for the component:
|-dist
|--index.js
|--index.es.js
I'm creating developer documentation for the update process. Seems best to have developers test the updated npm package on a local copy of a consuming app before pushing the updated npm package code to the repo. Looks like npm install supports local directories and packages.
https://www.stefanjudis.com/today-i-learned/npm-install-supports-local-packages/
Looks like this ^^^ approach requires the defined package path to have a valid package.json. So how would you typically configure this? The following rollup.config.ts encounters an error and writes it to the log, although the specific error does not appear clear in the log file:
output: [
{
file:'package.json',
format:'json'
}
],
I'm assuming that the output config above (or similar) is required, since the url above says that package.json is required in the dist folder for npm install via local directory. What's the best way to automate inclusion of package.json into the dist folder?
Also, let's say that the shared npm package is named "user-manager" and that's how it's installed in my local ConsumerApp. What would be a good way to test the package updates via local consumer app?For example, should the documentation say something like:
Copy "dist" folder from user-manager project to top-level of
local ConsumerApp
Rename "dist" folder to "user-management"
Open git bash to that "user-management" directory and "npm install user-management"
Test app
If success then roll back ConsumerApp changes and push code updates from user-manager project
I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.
I've grabbed this example ReactJS project > https://github.com/alik0211/pokedex to experiment with Azure devops. When I build the project locally and use npm start in the build folder the app works fine. This is the path for a file http://localhost:3000/static/js/0.chunk.js`.
But on my Azure environment http://pokedeks.azurewebsites.net/ the server is looking for http://pokedeks.azurewebsites.net/pokedex/static/js/2.c662eb5c.chunk.js. Notice that the `/pokedex/ folder has been added to the path. I'm unsure why this is happening.
I can reproduce it locally by running serve in the build folder instead of npm start: http://localhost:5000/pokedex/static/js/2.a7ba4e0c.chunk.js
I've tried adding npm start to my tasks in the release pipeline but that's also causing errors. So I think the fastest way is to figure out why when using serve the /pokedex/ folder gets added to the routes?
I fixed the issue by replacing the homepage value in my package.json from "homepage": "https://alik0211.github.io/pokedex/", to "homepage": "./", now when I run serve the paths to the files are correct.
It seems one way is to deploy the React app to Heroku, but is there a simple way to deploy to our own website or to GitHub page feature so that you can see the page off from GitHub? (just as a sample, not for production)
Details:
It seems that one possible way may be to use
wget -r --no-parent http://localhost:8080 -P sample -nH
cp -rf images any_needed_folder sample
and now you can git add sample and git commit and push to github and turn on the GitHub page for your repo and be able to see your React app inside of sample.
You also need to change the paths in the index.html, from /bundle.js to bundle.js, etc, because you need relative path instead of going to the root of your website.
(I used wget to recursively download index.html, bundle.js, and style/ (the CSS files) because bundle.js cannot be found in the whole directory on the local hard drive. I used wget because curl doesn't seem to be able to download recursively)
Ok, I found that the latest React, it will tell you to use
create-react-app hello-world
to create the app, and then there is an official
npm run build
to build it to host it as a Gthub page, or on your own website.
If wget is doing what you want, cool, use that.
For the actual deploying, I recommend using gh-pages on npm. It handles creating an orphan branch and copying your output files into it, and then pushing all in one command.
Install it:
npm install --save-dev
And in an npm script:
gh-pages -d sample
When I create an AngularJS project with
yo angular
it creates a node_modules/ directory but puts that directory in .gitignore. When I clone the project elsewhere and run
grunt server
I get
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or
grunt hasn't been installed locally to your project. For more
information about installing and configuring grunt, please see the
Getting Started guide:
The getting started guide doesn't say anything about how to handle the missing node_modules/ directory however.
The node_modules/ directory is missing deliberately because yeoman put it in .gitignore.
What's the right way to use Yeoman and Grunt in this case?
Is there some better documentation for Yeoman and Grunt?
Thanks.
That is the correct behaviour. The contents of node_modules is not meant to be committed to source control. The idea behind npm is that it tracks all required node dependencies in a file called package.json. This file should be committed to source control. Then on a different machine, you can check out the code and run
npm install
This looks at the package.json file and downloads all required files from the cloud and puts them all into a new node_modules directory.
If you do enough searching on the topic you'll eventually run across the following article which states that if you're building an application that you should check-in your dependencies. Reliance on package.json can cause issues as module authors publish updates, a better solution is to use
npm shrinkwrap
which creates a file locking down your dependencies and your dependencies dependencies but even this can be brittle as it is possible for a module author to re-publish the same version with different code.
Since yo angular is creating an application IMHO node_modules should not be included in .gitignore, however as I just rudely discovered if you're on Windows there's a significant chance that you can't check-in the modules in that folder due to path lengths...sigh.