I deployed a create-react-app on GitHub Pages using a mix of these 2 tutorials (https://create-react-app.dev/docs/deployment & https://github.com/gitname/react-gh-pages). It's working just fine.
But this webpage is supposed to evolve regularly, I have some content to add.
Is there a way to modify the deployed app? How can I push the changes I would make in my local directory to gh-pages (production mode)? Do I need to run npm build again after my additions?
For the moment I have the development mode on master branch. I think it's the build mode on gh-pages, although I don't have any other branch.
Thank you for your help.
What I did to deploy:
Terminal
$ npm install --save gh-pages
$ git init
$ git remote add origin https://github.com/REMOTE
$ npm run deploy
Package.json
{
"homepage": "https://USER-PAGE.github.io/",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
To modify the site just make the changes and then git add, commit and push like one would normally do to the required branch.
Then again run the command:
npm run deploy
Related
I have an old project that I started by using Create React App to generate boilerplate. At some point down the line I "ejected" the project. Running npm run build successfully generates all of the expected build artifacts inside the /build folder when run on my dev machine and serving the build folder works perfectly.
Now I'm trying to Dockerize this app and have created the following Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package.json .
COPY package-lock.json .
ENV NODE_ENV production
RUN npm install
COPY . .
RUN npm run build
CMD [ "npx", "serve", "-l", "3000", "build" ]
I can build and run the image as a Docker container, and the build folder is served fine except that most of its contents are missing. The only two files present are favicon.ico and manifest.json. If I open a shell and list out the build folder it's the same. For some reason the webpack bundles, index.html, styles etc. are all missing.
I've been Googling around for hours but can't find anything. I can't even find out how to log the output of CRA's npm run build command to a file so that I can see the build log.
Can anyone give me a hint at where the problem might lie? Thanks
I successfully deployed my Django project to Heroku. But I want to be able to automatically build React before deploying.
The React app is served through Django, so I have the bundled files of React in my templates and static folders of the Django app.
The project structure looks something like this:
react/
build/
components/
App.js
package.json
...
django/
templates/
static/
...
Procfile
requirements.txt
Pipfile
I have both the React and Django projects in the same repository and I want to run npm run build automatically before Django is deployed.
I set up the build script to move the bundled files from React to Django.
From what I've read, I need to add the NodeJS buildpack, but I don't know how to set it up to run before the Python buildpack.
Basically, the NodeJS process should just build my React app and then terminate. After that, the Python process should start up and deploy the Django project.
One solution to do this would be to use Docker and deploy that image to Heroku.
But, is there an easier way?
You can add indexed buildpacks in heroku. Take a look here for adding multiple buildpacks to your project.
I wrote a simple tutorial on how one can deploy a React + Django app to Heroku. You can take a look if you're interested. In your case, you only need the instructions for adding the buildpacks.
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
You don't need to setup any extra commands to build the React app. Heroku automatically installs and runs the build script from your package.json file(If it's in the project root).
I found a way to do this.
I added the nodejs buildpack as the first one and then I created a package.json file in the root directory:
{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"build": "cd react && npm install && npm run build"
},
"dependencies": {},
"devDependencies": {},
"cacheDirectories": [
"node_modules",
"react/node_modules"
]
}
Heroku is looking for a package.json in the root directory and automatically runs the build command.
Background
I currently have an npm script that looks something like
"dev":"yarn install && concurrently -k \"npm run webpack\" \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
Logically this runs webpack, starts the app, lints, and tests in parallel.
npm webpack in that script has --watch set
Note: this is for dev.
The Problems
This tries to run the app before it has webpacked
This won't re-run the app when webpack repacks due to watch
The Goal
Run npm run webpack once
When it outputs (meaning the watch fired and finished) run the other three commands
when something crashes inform me, don't waste time running stuff that won't work, but try again when I fix the file.
The Real Problem
I don't know what I don't know. I suspect the real answer will be in the webpack config itself potentially, or there's a better tool than concurrently/watch for my use case, or the core idea on how I've designed this is just crazy. Maybe I want to create a devServer.js that uses webpack dev middleware to serve these instead? how would that pull in linting and testing then?
I don't know what a beautiful version of this build would look like.
What I Really Need
A great tutorial/guide/blog post about how this 'Should' go.
Here's what I would do; perhaps there's a better way:
"scripts": {
"dev": "yarn install && concurrently -k \"npm run webpack\" \"npm run watch\"",
"watch": "onchange \"dist/**/" -- concurrently -k \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
}
This uses onchange. npm run dev starts webpack and onchange in parallel. onchange monitors for any file changes in dist/ and runs your tasks when any files change.
The limitation of this approach is that your tasks will not run until files change in dist. You can work around this by deleting dist/ before running webpack. (Use rimraf to do this in a cross-platform way.) Example:
"dev": "yarn install && rimraf dist && concurrently -k \"npm run webpack\" \"npm run watch\""
You can just use rm -rf dist if you don't care about Windows support.
I have a Django app that I managed to deploy with Heroku. My Procfile file only contains :
web: gunicorn omegapp3.wsgi --log-file -
So when I run heroku local it works.
But when I deploy with heroku push master, the console detects a Node app because the app has a package.json and then the build fails.
What I would like to do is the following :
run npm install to install gulp etc.
run gulp build.
Do you know how I can do that ?
According to the official documentation, you should add multiple buildpacks to your setup, rather than a single multi buildpack.
For example, if you wanted to deploy an app that uses a Nodejs package (i.e. grunt, gulp, etc) to do some setup on your app, you would run this from your command line:
heroku buildpacks:add --index 1 heroku/nodejs
The add command adds the Nodejs buildpack as an additional buildpack, rather than replacing your current buildpack. Note the --index 1. This specifies that the Nodejs buildpack is the first in the order of buildpacks. This is important because the final buildpack is the one used for actual process type. You can call heroku buildpacks from the command line to verify the buildpack setup. I run a Python app, so my heroku buildpacks looks like this:
=== your_app_name_here Buildpack URLs
1. heroku/nodejs
2. https://github.com/heroku/heroku-buildpack-python
Then, as stated by rocketer, you can place this in your package.json file to be run on deploy:
"scripts": {
"postinstall": "./node_modules/.bin/gulp build"
}
Solved by using $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi.git.
It allows to use node and python (you have to specify in a .buildpacks file).
In ordre to run gulp build, I added the following to my package.json :
"scripts": {
"postinstall": "./node_modules/.bin/gulp build"
}
As a starting point to making my own app that uses meanjs, I went to the meanjs website and used their yeomen generator to create the template/sample app. Following the instructions getting the sample application running out of the box on my local desktop machine worked within minutes. To complete the exercise I tried to deploy the sample app to an AWS/EC2 instance before making any changes to it. I have used the command line deployment tools in the past and liked it. Also it is nice how now you can just select an EC2 Linux instance with node and npm already installed and ready.
After checking the sample into git, I run "git aws.push" to deploy the app.
The problem is in the package.json the line:
"postinstall": "bower install --config.interactive=false"
In the eb-activity.log:
npm WARN cannot run in wd meansample#0.0.1 bower install --config.interactive=false (wd=/tmp/deployment/application)
The result is that AngularJS ends up not getting installed in /public/lib.
First thing I tried was giving the full path in the package.json file: node_modules/bower/bin/bower. This didn't help and results in the same error. Also noting that other commands like "grunt" don't need the full path specified in the package.json and they work.
I don't understand enough of the black box magic that aws.push does to understand why this error is happening. For example what user does it run as? What permissions does that user have? what options if any does it use when it runs npm install?
I did figure out a work-around, but it adds a lot of extra steps that shouldn't be required if aws.push was able to run bower install directly. Basically I can manually run the bower install in the ssh client connected to my EC2 instance, set the owner/group on the installed files, and restart the server.
Work-around steps:
1) On local command prompt run git aws.push. Wait for unsuccessfully deployment to finish.
2) Connect ssh client to EC2 instance. From the command prompt:
cd /var/app/current
/* NOTE: if I don't use sudo the ec2user I am logged in as does not have permission to create /public/lib needed to install AngularJS into*/
sudo node_modules/bower/bin/bower install --config.interactive=false --allow-root
/* NOTE: just changing the owner and group to match the same as the other files that aws.push deployed */
sudo chown -R nodejs public/lib
sudo chgrp -R nodejs public/lib
From AWS dashboard, select the correct EC2 instance, Action = Restart App Server(s)
Now AngularJS is install and the sample app works.
How do I eliminate the extra steps and make it so aws.push can do the bower install successfully?
I have experienced the same problem when trying to publish my nodejs app in a private server running CentOs using root user. The same error is fired by "postinstall": "./node_modules/bower/bin/bower install" in my package.json file so the only solution that was working for me is to use both options to avoid the error:
1: use --allow-root option for bower install command
"postinstall": "./node_modules/bower/bin/bower --allow-root install"
2: use --unsafe-perm option for npm install command
npm install --unsafe-perm