In my project I have a small script that runs some build scripts to prepare my dev. But, my current configuration is causing an error. It's looking for the themes directory in the wrong location.
My build script lives in the root directory. And my hugo app lives in frontend/. I want to call the build script from route and have it build hugo.
/my-project
/frontend
/custom-theme
build-script.sh
My frontend/config.toml:
baseURL = "https://site.local"
title = "Site Title"
themesDir = "themes"
theme = "custom-theme"
disableKinds = [ "taxonomyTerm", "taxonomy", "robotsTXT" ]
When I run my build script from the build directory with the following command I get an error:
# Build HTML and CSS
npm run build:dev --prefix $PWD/frontend/themes/custom-theme
# Hugo frontend
hugo --config $PWD/frontend/config.dev.toml
# Build PHP dependencies
composer install -d $PWD/api/
The error:
Error: Unable to find theme Directory: C:\Users\James\Projects\my-project\themes\custom-theme
It's missing the \frontend part of the path. It should be:
C:\Users\James\Projects\my-project\frontend\themes\custom-theme
Is it possible to tell hugo where to look for the themes?
It sounds like Hugo is assuming your paths are relative to the current directory. You're building from the C:\Users\James\Projects\my-project directory, so when Hugo puts that together with your themesDir setting of themes, it gets C:\Users\James\Projects\my-project\themes. Instead, try setting themesDir = "frontend\themes".
A corollary to this is that you will need to set all the other directory options as well if you want Hugo to behave like it would if you built from the frontend directory. For example, you would need to set contentDir = "frontend\content" and layoutDir = "frontend\layout". You can check which directories are configurable in the Hugo documentation.
A caveat, though: I haven't actually tested this myself, so if it doesn't work, that's probably why. :)
Related
I'm creating a basic React app using create-react-app.
When I cd into the root folder and run npm run start or yarn start, the project url is http://localhost:3000/build.
Why is it adding build to the end of the url and how can I make the server load http://localhost:3000/ instead?
Under the package.json in your project folder root (the one that spawned into existence after you created the app using the create-react-app) there are scripts defined.
There you can see what gets executed when you run npm run start or yarn start -> the "react-scripts start"
BTW, you can just npm start - no need to npm run start since it's the 1st script ;)
So where are these react scripts and what gets called?
Well, in the same root folder there you'd be your npm modules folder named node_modules. And in it after a shitload of scrolling surely there is a react-scripts subfolder and in it a folder named scripts and in it a file named start.js. This is what actually gets run.
This chunk
const urls = prepareUrls(
protocol,
HOST,
port,
paths.publicUrlOrPath.slice(0, -1)
);
I believe, determines URLs and since it glues together those parts the one coming after a port is interesting:
paths.publicUrlOrPath.slice(0, -1)
the paths object is defined in (looking from the same app root path I have been using as a reference from the start)
node_modules\react-scripts\config\paths.js
In this file this piece of code IMHO determines the path you are after:
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL
);
So you have fiddled with process.env.PUBLIC_URL either in Node or maybe at OS level, I am not sys admin ;)
Anyhow, I can give you a "get out of jail for free" card:
In the package.json file (yes, the aforementioned one in the project root) after "name":"app" or whatever your app is named add another line:
"homepage": "",
This will force the require(resolveApp('package.json')).homepage, to come into play and use that instead as the final part of your URL.
I'm deploying an app on a host that has the following setup:
https://example.com/app1
https://example.com/app2
etc.
I need to deploy under a custom root path /app for my React app that will sit under this umbrella. I'm using react-router v5 and create-react-app.
Problem
When I build the app (I'm using vercel's serve), I get a blank page. When I go to localhost:5000/app/, nothing shows up.
I did all the suggestions from here and here, but still can't get my app to load.
I'm also confused: what's the difference between using react-router's basename and CRA's homepage field? Should I be using both, or one or the other?
EDIT: Potentially found the problem. Setting homepage=/app also changes the paths for my JS bundle, which it wasn't recognizing (hence the blank page). I manually added a app folder inside my build dir, like so: build/app/static and it worked. Shouldn't CRA do this automatically?
My setup
app.tsx
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
package.json
scripts: {
"build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",
Command to serve the prod build locally
> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000
The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
I navigate to http://0.0.0.0:5000/app/ and get a blank page (no network calls).
What I tried
set homepage: "/app" in package.json source
set the basename for react-router source
The CRA docs shows an example using the full path of the website. That didn't work either:
"homepage": "https://example.com/app",
I got it working, although it's a workaround.
As Mohit's comment mentions, the homepage field makes it so all the assets are pre-pended by that sub-path defined in homepage. I was getting a blank screen because it couldn't find the new path to my JS bundle, aka it went from serving /build/static/js/.. to /build/app/static/js/...
Solution (workaround)
Create a new folder called app (or whatever your new root path is called) under your build directory.
Move your /build/static folder to build/app/static.
This is what it looks like with Dockerfile:
RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)
You can take out the pwd and echo lines, I added it so I could see it working.
I don't know why CRA doesn't do this by default. It might be because I'm using react-app-rewired, which messes around with CRA's webpack config?
I'm trying to use the create-react-app in an existing app without using the default index.html built in that links the scripts generated by running yarn start. These files include /static/js/bundle.js, static/js/0.chunk.js, static/js/main.chunk.js, and /main.somehash...hot-update.js
I set INLINE_RUNTIME_CHUNK=false in my .env but no files ever get generated in the static folder when running yarn start.
You can either eject your project or use react-app-rewired to customize your webpack configuration. This way, you can modify the path to output js.
I have a Hugo site using the hyde-hyde theme.
When I serve the site with hugo serve -D, I can view the site with the expected theme:
When I build the site to the public directory with command git submodule init && git submodule update && hugo version && hugo and open the site, the theme markup is missing?
Does anyone know what I'm doing wrong?
Note: I added the theme as a submodule to the themes directory.
At the beginning of config.tohml, you need to specify your real domain name,
because after the assembly all files will be searched in the root of this address (replace "example.com" with the domain name)
Instead of using a 1-line command, I would advise to do it step by step.
The problem might be with git submodule update. The main common error I face when using this command is that git asks me to commit the complete distribution, and refuse to update the submodule if I have uncommited changes.
To bypass this behavior, you can try the following commands:
git submodule update --remote
git submodule update --remote --force
Or the problem might be with hugo
Try the following command to have more info on what is happening:
hugo --log --verbose
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.