I was moving my fullstack app (React + Express) from Heroku.
The problem was that React app has to be built for running (also has to install required dependencies), but on git we usually store only raw source code.
A common structure for fullstack projects:
Heroku has the option to run scripts after deployment with a special script in the package.json file:
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
But I didn't find a similar ability on Railway.
So my solution is:
Remove the build folder from the .gitignore file
Build react app with npm run build
Add all to git repository
Deploy on Railway via Git Repo
Do not forget to add environment variables
Create domain name to have access via public internet
Be happy!
I had some problems with this, so I am sharing the easiest solution for others.
By selecting a project on Railway, and going to its settings, you would find a field named Build Command. There you can add your build commands. For example, in your specific case, this should work:
cd client && npm install && npm run build && cd .. && npm i
If it does not work, look at your project structure and adapt the command. Currently, the field is there:
Go to the project setting and set your build command. I've fixed it this way- https://prnt.sc/OnYPp1Q5-Uze
npm run build
Related
Im in the process of building a custom NPX tool which will add my custom npm package into a local hosted server,
I have as of right now a template of the structure id like to replicate when other users run my NPX command, something along the lines of
src
index.js
build
built_js.js
styles
styles.css
I understand when it comes to npm packages ill have to run these commands separately which is fine but im wondering how i can rebuild this directory on command npx create-my-app
yes you can!
try to use this package for it:
https://www.npmjs.com/package/create-clone
Assume you use a library like vue3-datepicker. You realize you need to customize something, and as as first step you want to use a custom fork of it.
The issue is, there is a build step when the package is pushed to npm's registry since the project doesn't use plain JavaScript, but may have vue or typescript files.
In this case, that would be npm run build:component, though that depends on the project.
Just installing the fork from github via:
yarn add <GitHub user name>/<GitHub repository name>#<branch/commit/tag>
hence doesn't suffice as then the ./dist folder doesn't exist.
You'll get really strange errors like:
error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json.
As a quick and dirty solution, I removed in my fork the ./dist/ folder from the .gitignore, ran the npm i && npm run build:component in my fork, and pushed it.
Huge downside is, the ./dist/ folder is now part of that repository, after each change in my fork I also have to build the files again and push those as well.
I rather have the build process triggered in my application using my fork. Is there a way from my application to say:
When you install that library, you have to run a certain script once you downloaded all the files?
The solution should be usable for both npm and yarn, in the sense that the fork my be installed by either one in different applications.
A quote from npm-install Docs
If the package being installed contains a prepare script, its dependencies and devDependencies will be installed, and the prepare script will be run, before the package is packaged and installed.
so in your fork's package.json you can add
"scripts": {
// ...
"build:component": "rollup -c build/rollup.config.js",
"prepare": "yarn build:component || npm run build:component"
}
If you want to trigger builds after installation, you can use the postinstall or a build script in your package.json. In this script, you can create directories and do other setups, using shell commands or javascript programs:
{
"scripts": {
"build": "mkdir dist && npm run build:component",
"build:component": "some command"
}
}
I am working offline without any internet connectivity. I have node JS installed on my system. When I am trying to run the npm create-react-app command it gives me error. Is there any way for me to run npm commands and get react application running offline? Below is the error code I get:
npm ERR! code ENOTFOUND
npm ERR! errcode ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/create-react-app failed,
reason: getaddrinfo ENOTFOUND registry.npmjs.org
and get react application running offline
npm start works offline already. Once you created your application, you should have no problem.
i am trying to run the npm create-react-app command [offline]
Npm is basically a package manager, which downloads dependencies for you, located under /node_modules at your project root.
create-react-app does two things :
Install specific dependencies for React : as a huge framework, React doesn't only require Node.js to run, but also multiple other packages (including React istelf).
Creating a template project with some presets.
If you are working offline and need to create multiple React projects that way, then you'll have no choice but to run the create-react-app command at least once while being online.
However, once you created your first React app, you can just leave the folder untouched : this will give you a fully functional offline copy for your React applications.
When you're back offline, just copy those files to the folder of the React application you want to create (make sure to copy everything, including the node_modules folder). You should then be able to run npm start offline, and build your application.
I believe this is what you are looking for
https://npm.io/package/create-react-app-offline
It helps you create (download) a react project installer, which you can use to create any react JavaScript project offline.
everything was installed correctly. but whenever I try to create project, it says "'vue' is not recognized as an internal or external command". I installed and re-installed but didn't work. npm was also added to environmental variable path.
C:\Users\touha\Desktop>npm list -g --depth=0
C:\Users\touha\.npm-packages
`-- #vue/cli#3.8.2
C:\Users\touha\Desktop>vue ui
'vue' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\touha\Desktop>
Locate vue.cmd and add its location to your PATH
It is added to package manager(npm or yarn) installation. So you may find it at following locations
YARN
C:\Users{YourAccount}\AppData\Local\Yarn\bin
NPM
C:\Users{YourAccount}\AppData\Roaming\npm
just open PowerShell and run: npm install -g #vue/cli
Addition: If setting the path variable and reinstalling #vue/cli does not work, using the node.js command prompt instead might solve the issue.
It seems vue isn't been installed globally for some reasons.
This is the step I followed to solve mine:
Firstly, create your desired project folder (say "Vue Project"). This is where you want to create a vue project.
Then create a "node_modules" folder in the Vue Project folder
Then go to your system npm folder C:\Users{YourAccount}\AppData\Roaming\npm
You will see three different "vue" files. Copy them and paste in the Vue Project Folder you created.
Go back to C:\Users{YourAccount}\AppData\Roaming\npm and enter the node_modules folder. You'll see a "#vue" folder. Copy this, and paste it in the node_modules folder you created in the Vue Project Folder.
You can now head back to the CLI and create your project using "vue create my-vue-project" where my-vue-project is your desired vue project name.
You can try this way it worked for me
go to the location of your yarn or npm mine is C:\Users\TED\AppData\Local\Yarn\bin for Yarn
C:\Users\TED\AppData\Local\Npm\bin for Npm users
TED will be replaced by your user name
then copy and add it to your system environment variable
Note in case you don't find AppData make sure you have view hidden file checked
I am using Yarn to install #vue/cli.
The way I solve it is via the following steps
Locate your global installed vue.cmd location
Add the vue.cmd directory into System variable Env. For myself, the path is C:\Users{MyAccount}\AppData\Local\Yarn\.bin
what worked for me:
In a powershell :
npm install vue
npm install -g #vue/cli
C:\Users\{USER}\AppData\Roaming\npm\vue.cmd create {NAME}
if you got this error most probably chance package not installed completely
check-in C:\Users\dev\AppData\Roaming\npm
if you had not found the package under this folder then re-run your command
Run command prompt as administrator
Run setx /M path "%path%;%appdata%\npm
Restart the command prompt
Now create the Vue project
I am currently using a github url as a package which is basically a private base library for my application.
While a npm package will run the npm build script after it is installed it currently appears that if you use a github url as package no build script will be run after installation (Yes in that thread they say that if using npm 5 a prepare script will be run but from my testing it does not work).
I am wondering if it's possible to define a script in a parent npm package.json that would run the build script of a dependency after it installs?
Or if you have any better way to deal with this problem would be most welcome.