Closed Anima-t3d closed 7 years ago
So yes, as you've discovered this isn't ready to go out-of-the-box, which I should reflect in its README. It's just an example of how you could go about structuring this type of application.
I have a personal script which installs this package as a dev dependency and then copies over the necessary templates, finds/replaces directory names and files where {{PKG_NAME}} is mentioned.
I've considered making it public, but most people just use create-react-app
- I'm just not a fan of how it's structured.
If you'd like to use it in a similar manner you would have to (which can easily be packed into an executable):
PKG_NAME=your-pkg
mkdir $PKG_NAME
cd $PKG_NAME
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type d -name "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
npm start
Edit: assuming you're doing this in bash
I've updated the README to include this information
@jaredlunde Thanks for the updated readme. The {{PKG_NAME}}
in [package name replaced]/assets/css/{{PKG_NAME}}
is not replaced.
There is also a warning about the package.json
:
npm WARN enoent ENOENT: no such file or directory, open '/Users/xxx/Desktop/repos/my-pkg/package.json'
However the package.json
file seems to be fine?
What is the use for having the files with -e appended?
Apologies, #8 above should be:
find . -type d -path "*/{{PKG_NAME}}/*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
I've updated the README to reflect that. Which files have -e appended?
Ack, nevermind. Still the same issue. One sec.
The whole script:
#!/bin/bash
if [ -z "$1" ]; then
echo "No package name was provided."
exit 1
fi
PKG_NAME=$1
mkdir $PKG_NAME
cd $PKG_NAME
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type d -path "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
npm start
The changed portion:
find . -type d -path "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
Thanks for the quick reply. I still have the same issue with the css folder?
Files with -e: index.html, package.json, server.js, both webpack config files and all the files in src
Mind telling me what operating system you're using? Could be a bash version issue. Can you echo $BASH_VERSION
too? The update works for me and I get a working app on :3000. This is the directory output:
assets/
css/
your-pkg/
core.scss
_layout.scss
_mixins.scss
_placeholders.scss
_variables.scss
images/
README
index.html
LICENSE
node_modules/
...
package.json
README.md
server.js
src/
App.js
index.hot.js
index.js
webpack.config.dev.js
webpack.config.js
I'm using bash 3.2.57(1)-release
on a macOS Sierra (10.12.4)
The issues were:
Instead of messing around with a find/replace command that works on multiple bash versions, I just changed it to a mv
command, since it's just one folder right now anyway.
This worked for me on macOS Sierra (10.12.2) and bash 3.2.57(1)-release:
#!/bin/bash
if [ -z "$1" ]; then
echo "No package name was provided."
exit 1
fi
PKG_NAME=$1
mkdir $PKG_NAME
cd $PKG_NAME
npm init -y
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i.bak -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type f -name "*.bak" -and -not -path "*/node_modules/*" -exec rm {} \;;
mv "./assets/css/{{PKG_NAME}}" "./assets/css/${PKG_NAME}"
npm start
There is an issue when running
webpack -p
:ERROR in {{PKG_NAME}}.js from UglifyJs Unexpected token: name (App) [{{PKG_NAME}}.js:662,4]
Additional question: Do I just find and replace {{PKG_NAME}} or is there somewhere I can change it?